html快捷键零基础教你学前端——1.HTML扬帆vscode中html快捷键硬核推荐，

本节课开始前，我们先回忆一个事情，我们小时候写作文时，老师都会教我们一些“规矩”，比如说：题目要在中间写，也就是居中，要分段，要有标点符号，第一段要空两个格子等等。那同样的！ html文件也有他们的书写规则 ？那他们都有什么规则呢？我来慢慢告诉你！

通过上节课学习，你已经认识了，在浏览器中运行的文件就是网页，那么这个文件到底是什么呢？其实就是一个以 html 为后缀的普通文件，说到这，你可能会出现疑问了，这个文件我也没见过，应该怎么创建和书写呢？

先来尝试一下，新建一个 test.html 文件（注意是html为后缀名哦！如果不能改后缀名的话，度娘查一下，如何显示文件后缀名，就可以更改了），右键点击文件， 使用记事本打开。

可以看到 html 文件可以直接在这里面进行读写了 但是记事本的功能比较少 不够强大 ，就像我们要编辑一个文字文件需要Word一样，我们需要用到一个专业读写 html 文件的软件 我们叫它代码编辑器

市面上有各种各样的代码编辑器 比如说 Notepad++， sublime， DreamWeaver， webStorm， Hbuilder， 等等。

今天为大家推荐的一款编辑器 是开发工程师们使用频率比较高的一款软件 vscode 它是一款轻量级编辑器 上手方便 操作简单

只需要来到官网（Visual Studio Code - Code Editing. Redefined） 点击下载 下载好以后双击安装 你可以自己选择安装路径 也可以用默认安装路径 安装好以后 桌面上会出现一个图标 这就是我们的VScode代码编辑器了

那我们吃饭的家伙有了 我们先来认识一下它，双击图标 打开软件一看是是英文的，根本看不懂！没关系 我们只需要安装一个汉化插件就好了。

首先点击左侧这个按钮 在输入框内输入 Chinese 对应搜索结果的第一个 点击 install 稍等一会 即可安装完成 此时 我们只要重启 vscode 这个编辑器 会发现 英文变成中文了

接下来就可以使用这个vscode 来进行 html 文件的创建和编辑了

首先在电脑桌面上面点击鼠标右键 新建一个文件夹 命名为千锋学习 这个文件夹用来存储其他文件夹和网页相关的文件，用编辑器打开文件夹可以右击选择→通过code打开，也可以直接直接将文件夹拖到编辑器里直接打开

接下来新建一个文件，在这里关于文件的命名 希望你遵循以下规范

第一 文件名不建议太长第二 不要在文件名中出现空格第三 不要使用特殊符号第四 尽量使用一些有意义的单词 不建议书写中文名称

根据文件命名规则 我们在 vscode 里创建一个文件，点击这里的新建文件图标 书写文件名 start.html 注意 你要手动写上文件后缀 这样一个标准的 html 文件就创建好了

点击文件 我们看到在右侧打开了这个文件 目前内容还是空白的 我们直接写入 hello world 点击这里的保存按钮 也可以使用快捷键 ctrl + s 完成文件保存 此时 一个简单的 html 文件就写好了 我们赶紧到浏览器内运行一下吧

返回到文件夹——右键点击文件——打开方式——用浏览器打开

好啦！我们的第一个网页运行成功了。

到这里 细心的小朋友发现了 每次这样打开文件岂不很麻烦 其实可以在 vscode 内安装一个的插件 直接打开浏览器 就像安装 Chinese 汉化版插件一样。

再次点击 扩展 按钮 搜索 open in browser 点击安装 在文件位置点击右键 选择 open in default browser 就可以直接在浏览器打开了 或者你可以直接使用快捷键 alt + b

回到编辑器的 start.html 再来写点内容 前端培训界的扛把子——千锋HTML5大前端 首先记得ctrl+s保存文件，然后打开浏览器

点击刷新按钮—看到新增的文字也出现了，仔细观察发现：所有的文字格式都一样，如果你想把某些文字变得不一样。该怎么办呢？

这时候就需要用到标签了 比如：我们来书写一个 < h1 >再写一个</h1> 两个组合在一起形成一个完整标签 ，这个标签对中间可以书写一段内容，把我们的这一段内容复制进去，再次打开浏览器刷新，这一段内容变得不一样了 这就是 h1 标签的作用

在HTML 中 有很多不同的标签 各自有不同的作用 我们就是用这些标签来组成页面的骨架。

这节课你学会了编写一个简单的网页 并了解了文件的书写规范，我们也只是了解了冰山一角，九牛一毛。那其他的标签，都有什么呢？标签又有什么书写规范呢？

我们下一篇文章等你哦！