装好编辑器，新建文档，再次迫不及待把刚学会的代码写了进去，保存，然后用浏览器打开，非常不错，有效果了呢！
是的，要说简单，就是这么简单。但是我们真正的写网页，不可能这样直接去写内容，总要严谨一些，先准备一个模板。首先这个操作一点都不麻烦，依然是像刚才一样，新建文档，设置好文档的语言（上一章我们讲过的两种方法），然后先别急着写内容，按照我所说的进行操作：
首先输入一个英文的感叹号: !，会出现如下的提示。（如果提示没有出现，那么检查，是否已经将文档的语言设置为 HTML，并将输入法切换到英文，然后清空文档，输入感叹号，提示就会出现了）
这时候按一下 Tab 键，就会出现如下内容：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body></body></html>那么我们一共按了两个键，就出来这么一大堆内容，看来写代码实在不要太简单啊~刚才用到的功能是 Emmet[1] 的快速补全代码，它可以极大的提升我们输入的速度，非常值得学习，而且也非常简单，不过现在我们能够用到的还非常非常少，大概要等到我们 CSS 部分完结之后才行，因为到那时，才能基本掌握使用它所必备的一些基础知识。
可能好多朋友，首先是觉得一下出来这么多代码，好厉害，然后又觉得这么一堆代码让人头大。那么我们先来记住关键的几点就好：
第一、先把他当做固定格式来用
反正按两下就出来，用起来也不麻烦喽~
第二、修改一下语言
第二行 <html lang="en"> 里面的 en 表示英文，当然中文就是 zh 了，这个说的是网页内容的主要语言，不是说代码哦，所以一般我们都改为 zh。[2]
第三、title 就是标题
第七行 <title>Document</title> 是用来设置网页的标题的，这个内容会显示在浏览器的标签上，如下图：
当然你也可以把 Document 改成其他内容试试看。
第四、编码要保持一致
第四行的 <meta charset="UTF-8">，这里的 UTF-8 要和 编辑器右下角这个位置保持一致，否则就会乱码。反过来，网页出现乱码，先看是不是这里出了问题。
最后、我们网页的内容写在 body 里面
就是这样：
<!-- 上面的省略，要不然太长了，假装我写了 --><body>在这里写我们的代码……</body><!-- 下面的省略，要不然太长了，假装我写了 -->所以从模板开始规范的写代码，一点都不难。按两下按键，出来了模板，修改一下语言和标题，检查一下网页编码，然后就可以开始写我们的内容。
因为刚刚开始接触这些代码，如果上来我把它们都进行一个非常详细的解释，看起来好像是我讲的非常到位，但至少一半的同学并不能够得到理解，甚至会被这些东西绕晕，毕竟我们对这一切还很陌生。所以本章只先指明其中需要修改和注意的点，让大家先用起来。而关于这个模板的详细解释，我会在以后附上。
>注释 1: Emmet 原名 Zen Coding，是一个主要针对 HTML 和 CSS 的快速输入插件，简单而强大。不过在 VSCode 里面，是通过编辑器的自动补全功能进行实现，所以有一些地方实现得并不完美，以及和各种自动补全的插件之间，可能有一些冲突，让人略感遗憾，即便如此，它所带来的效率提升，也是极其惊人的。
>注释 2: 对于网页语言的说明，是一个比较容易被忽视的地方，但其实它还是会产生很多影响的，作为入门课程，这里只讲了最简单笼统的设置方式，有兴趣的同学可以在网上自行查询，深入了解一下。
暂无评论内容