vscode如何创建并打开html文件（骨灰级新手友好）

已于 2023-04-12 09:26:25 修改
阅读量1.7w 收藏 109
点赞数 42
文章标签： vscode ide 编辑器 前端
于 2023-04-12 08:21:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_65163985/article/details/130092733
版权
该文详细介绍了如何在VSCode中下载中文语言包和HTML相关插件，如HTMLPlay和openinbrowser，以及如何配置和使用这些插件来创建、保存和在浏览器中运行HTML文件。此外，还讲解了快速生成HTML骨架的技巧，包括输入!或html:5来自动补全基础结构。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

目录

一、 在VSCode下载相关插件

 二、 创建html文件

三、 html运行在浏览器上

四、 快捷创建骨架

一、 在VSCode下载相关插件

1. 先打开Visual Studio Code

2. 下载三个插件 ，点击第五个图标

  • Chinese (Simplified) (简体中文)
  • HTML Play
  • open in browser

 下载完Chinese (Simplified) (简体中文)，重启后发现就变成中文（对于原来是英文版的小伙伴）

 安装  HTML Play

 open in browser要下载1.1.0版本，但是会发现只能找到2.2.0的，所以我们这样做

先下载open in browser2.2.0

然后右击鼠标，点击“安装另一个版本 ”

选择1.1.0版本的安装即可

然后配置你要打开在哪个浏览器

右键鼠标 -> 点击扩展设置

 填上一个你已经安装好的浏览器， 我这里填的是火狐，你填其它的也可以

 

 然后重启一下VScode

 二、 创建html文件

左上角点击文件 -> 新建文件

 输入html

注意要以html为后缀名

设置放置的位置后就可以得到

三、 html运行在浏览器上

代码附上

<html>
	<head>
		<title>HelloWorld</title>
	</head>
	<body>
		HelloWorld!
	</body>
</html>

先左上角点击文件 -> 点击保存

然后按 CTRL + ALT + H 运行程序

最后在空白处点击鼠标右键， 然后选择 Open In Default Browser

然后可以得到效果

 

四、 快捷创建骨架

一般是输入一个！号，然后按回车就可以了

但是也有遇到输入!号不行的情况，这时候可以打一个html：5，然后按回车

 

 也可以得到骨架，然后你再输入!号，发现也可以得到骨架了

 过程就结束了

学会的小伙伴给博主点个赞呗，遇到困难的可以在评论区下方提问哦

2024从零开始使用VSCode编程（静态页面制作篇）HTML+CSS+JS阶段
ssrsrrn的博客
07-25 7969
VSCode第一个前端静态页面的编写
Matlab教程(从新手到骨灰级玩家).pdf
05-08
为了帮助不同层次的学习者从新手成长为Matlab骨灰级玩家，这份《Matlab教程(从新手到骨灰级玩家).pdf》应运而生，为每一位Matlab使用者打开了探索和精通Matlab的大门。 教程内容从Matlab的基础语法开始讲起，对每个...
VSCode创建运行html界面及CSS
CYL5913的博客
09-12 2674
打开网址http://localhost:【端口号】/【html文件名】.html，例如http://localhost:5500/index.html，端口号默认为5500，如果不是，以自己电脑的端口号为准，端口号为下图 port：xxxx 点击后即可在网页显示内容。），简单的说，它是用于设置和布局网页的计算机语言。例如，调整内容的字体，颜色，大小等样式，设置边框的样式，调整模块的间距等。：是指丰富的样式外观。拿边框距离来说，允许任何设置边框，允许设置边框与框内元素的距离，允许设置边框与边框的距离等等。
HTML操作详解
最新发布
一名还在努力学习技术的程序员的博客
02-25 1525
在本篇博客中，我们学习的是 HTML 的操作，后面的博客中会学习 CSS、JavaScript 的相关知识
【HTML专栏2】VSCode的使用（新建HTML文件）
小黄鸭的博客
09-07 3328
VSCode新建HTML文件，保存，快捷键基础结构代码
VSCode中快速创建Html文件
记录和分享属于我的“IT”时光。
02-02 1702
VSCode中快速创建Html文件
在vscode中新建html文件的两种方法
热门推荐
qq_43142545的博客
09-13 6万+
在vscode中新建html文件的两种方法: 第一个方法: 1 点击菜单【文件】，如图所示。 2 点击【新建文件】，如图所示。 3 就会创建一个没有命名的文件，如图所示。 4 点击选择语言开始，会弹出选择语言模式，在自动检测的下拉菜单中选择html，一个没有命名的html文件就创建好了。 5 点击保存或者另存为，给没有命名的html起个名字,可以起字母,数字,中文，起好名字,点击保存，一个html文件就创建好了。 6 我们在html文件上输入【!】叹号(在英文状态下)，然后按键盘的【Tab】键，只
vscode新建html文件
helloic的博客
08-23 1054
3.输入感叹号，并按【tab键】即可快速生成HTML模板。1.选择需要建html的文件夹，点击新建文件。2.输入名字，以.html结束。
在vscode中创建html文件的方法
weixin_66958882的博客
01-24 2501
vscode如何创建html文件
Matlab教程(从新手到骨灰级玩家)
03-27
本教程旨在帮助初学者快速掌握Matlab的基本操作，并逐步提升至高级应用，成为一名熟练的Matlab骨灰级玩家。 1. **Matlab基础** - **安装与启动**：讲解如何下载并安装Matlab软件，以及启动和设置工作环境。 - **...
网络泡妞骨灰级教程
01-01
很抱歉，但根据您给出的信息，这个"网络泡妞骨灰级教程"并不属于IT行业的专业知识点。这个标题和描述更倾向于个人社交技巧或者心理学范畴，而非技术类内容。因此，我无法根据这些信息生成相关的IT知识。标签为空，且...
Matlab教程(从新手到骨灰级玩家)-388页
05-22
《Matlab教程(从新手到骨灰级玩家)-388页》是一份全面介绍Matlab的资源，适合从初学者到高级用户的进阶学习。Matlab是一款强大的可视化计算程序，广泛应用于各种计算机平台，包括个人电脑和超级计算机。它包含丰富的...
VScode中创建一个html文件
qq_40156884的博客
10-14 3303
1.新建一个文件 2.右下角点击纯文本 3.选择想要创建的响应的文件，此处输入html 4.然后输入！按tab就行了
在VSCode中编写Html
fhqiwmc的博客
09-30 1591
5.新建文件：sheet.html,按！+ tab键可以生成HTML文件标准格式,不支持中文。3.打开一个文件夹：用于在这个文件夹内写Html。2.安装插件： 简体中文插件可把界面改成中文。基本编写流程已完成，是不是很简单。6.然后在浏览器用打开。
如何在VSCode里快速新建一个html文件并运行
Jet_Lover的博客
02-08 3219
首先新建一个html文件，取名后缀为XXX.html，如图 建好文件之后是空的，然后输入！同时按下tab键就自动生成html目录了 目录建好后怎么运行呢？ 打开扩展商店，输出op就出来了，选择第一个open in browser安装 安装好了之后就可以运行啦，快捷键是alt+b，当然也可以在项html文件中点击鼠标右键来运行，如图 然后选择浏览器来运行，推荐最好选择谷歌，运行效果如下 最后有人问，这个中文是怎么设置的？也是在应用商店里面搜索language然后选择中文的下载然后重新启动VSCo
如何使用VS Code 建立并运行HTML文件（超详细，新手入内）？
m0_61783767的博客
07-31 1835
输入你想在浏览器中呈现的内容,写完单击鼠标右键 在属性框内点击open in （default）broswer 即可在浏览器中运行啦！（我这里是已经安装好的界面，未安装的在搜索出现时会有安装按钮，点击即可）创建完HTML文件后，按！+ tab键可以生成HTML文件标准格式。打开文件夹，点击新建文件，创建一个自命名的html文件。自动重命名配对的HTML / XML标签。输入完名称后 按下回车 即文件创建成功。：自动配对HTML / XML标签。，这是运行html文件的关键。
vscode：创建html文件
cxx187968的博客
09-02 2736
vscode：创建html文件 一.创建html文件： 1.创建后缀名为.html文档 2.创建html的文档结构
Vscode如何新建html文件
小泽
02-11 6306
1、点击Open Folder： 2、选择目标文件夹，在本地新建一个拓展名为html的文件： 3、在第1行输入!（英文状态下），按tab键，新建成功。界面如下图所示： ...
Vscode新建html文件
weixin_30362083的博客
03-15 672
在Vscode新建html文件 1、点击Open Folder： 2、选择目标文件夹，新建一个拓展名为html的文件： 3、在第1行输入!（英文状态下），按tab键，新建成功。界面如下图所示： 转载于:https://www.cnblogs.com/zhangyu10/p/10535730.html...
vscode html
07-27
VSCode是一款流行的代码编辑器，它支持多种编程语言，包括HTML。在VSCode中编写HTML非常方便。你可以使用VSCode的HTML插件来提供更好的开发体验。在编辑器中打开一个HTML文件后，你可以使用智能代码补全、语法高亮、代码片段以及其他一些功能来加快编写HTML的速度。你可以使用Emmet缩写来快速生成HTML标记，还可以使用内置的调试工具来调试你的前端代码。如果你需要在VSCode中编写HTML，我可以给你一些更具体的提示和建议。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值