创建一个空白的 HTML 文档，使用 Emmet 插件可以非常容易做到。比如我们要创建一个 html5 类型的文档，在这个空白的 html 文件里，输入一个 ! 号。然后按一下 tab 键…

Emmet 会给我们准备好一般的 html 文档需要的东西 … 文档的声明，还有一些基本的标签 ..

首先我们要修改的地方可能就是这个 title 标题标签 … Emmet …

然后是 html 标签里的 lang 属性，它可以设置文档的语言，现在是 en ，表示英文 … 我们可以改成 zh-hans ，如果文档是繁体中文的话，可以把它的值改成 zh-hant ..

css

下面我们可能需要把文档要用到的 css 样式表链接过来 .. 直接输入 link … 按下 tab … 在 href 属性里，可以指定样式表的位置和名字 …

或者，可以用一个 link:css … 在 href 属性里，会自动添加一个默认的样式表 … 这里我们直接修改它的名字就行了 …

在 css 目录下面有一个 bootstrap 的样式表 … 把它嵌接到这个文档上来 …

css/bootstrap.min.css

想去给打印设备链接一个样式表，可以输入 link:print …. 注意在这个 link 标签里面，会多了一个 media 属性，属性的值是 print ，表示这个样式表是专门针对打印设备的 …

想直接在这个网页上去定义点样式，这些样式可以放在一组 style 标签里， 我们可以直接输入 style ，然后按一下 tab 键 …

favicon

网页上可以设置一个小图标，这个小图标可以显示在浏览器的标签栏上 … 链接这个小图标同样可以使用 link 标签 …

使用 emmet 的方式，我们只需要输入 …

link:favicon

viewport

响应式的网页设计一般都需要设置一个 viewport …

输入 … meta:vp …

你可以根据自己的需要去设置这个 viewport … 不过一般使用这个默认的设置就行 …

script

嵌入网页需要的脚本文件，用的是 script 标签 … 输入 script:src … 按下 tab …

直接在 script 标签上的 scr 属性里，输入脚本文件的位置和名字 …

我们也可以把一些脚本代码放在一组 script 标签之间 .. script …