假如让你在编辑器中敲出下面的代码，那么你需要敲多久的代码呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum mollitia illo deserunt possimus dicta, quod aliquam, fugiat eligendi debitis sed magni, perferendis recusandae tenetur officia ipsa ipsam tempore fugit error!
</div>
<ul>
<li>list 1</li>
<li>list 2</li>
<li>list 3</li>
<li>list 4</li>
<li>list 5</li>
<li>list 6</li>
<li>list 7</li>
<li>list 8</li>
</ul>
</body>
</html>
如果使用传统的方法一行一行的敲，即使有编辑器的智能补全功能也会非常的慢。
而使用Emmet语法就可以非常快速的完成输入：
如上图所示，Emmet是一个编辑器插件，提供了代码智能补全的语法规则。它能够帮我们快速的编写HTML和CSS代码。
我们知道HTML中有大量模式化的重复字符，Emmet的存在就是帮我们摆脱这些冗余的代码。
安装
目前VSCode、WebStorm等主流的代码编辑器已经预装了Emmet插件，大家不需要下载，可以直接使用。
下面的GIF都是在VSCode中录制的，但是规则是通用的，你在其他编辑器中也可以使用类似的技巧。
生成HTML模板
我们知道每个HTML5文件都应该有固定的框架，大致如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
使用Emmet语法后你不需要手动的敲击这些字符，你只需要在一个HTML文件中输入一个! 符号就行了，VSCode会提醒你要不要使用Emmet规则自动补全：
GIF:
输入一个标签
在HTML中，一个标签是长这个样子的：
<div></div>
<span></span>
<img/>
这种标签中，除了div、span是核心内容，其他的符号都是模式化的补充字符。
而使用Emmet，我们就不需要输入这些冗余字符了：
同时，像header、blockquote这样比较名字比较长的标签还可以使用缩写：
输入带有class的标签
我们知道一个HTML标签一般都会带有CSS样式。在使用Emmet的时候，我们只需要在标签名后面加上Class名称，就可以自动补充了：
规则：
div.container ==> <div class="container"></div>span.red ==> <span class="red"></span>div.row.blue ==> <div class="row blue"></div>
GIF:
输入带有ID的标签
规则：
div#id1 ==> <div id="id1"></div>
span#bytefish.blue ==> <span id="bytefish" class="blue"></span>
GIF:
输入带有内容的标签
如果我们想在标签中添加具体的内容，我们可以使用{} 语法：
GIF:
同时输入多个标签
Emmet支持相加运算，如果我们使用+就可以同时的输入多个标签：
GIF:
输入嵌套标签
在CSS中，子代组合器的符号是>,在Emmet中也可以使用这种语法来输入嵌套标签。
规则：
nav>ul>li =>
<nav> <ul> <li></li> </ul></nav>
GIF:
在输入嵌套标签的时候，我们也可以连同class、内容一起输入：
GIF:
上级
假设我们想要使用Emmet一次性的输入这样的文本，那么我们应该怎么做呢？
<div></div><div> <p><span><em></em></span></p> <blockquote></blockquote></div>
上面的文本最大的痛点在于：p标签既有子标签又有并列标签。只使用我们之前提到的> 和 + 无法一次性的输入所有的文本。
错误的示例：
上面这种写法的问题在于当我们输入 +bq 的时候，其实是创建了一个和em同一个层级的标签。如果我们想要创建一个span同层级的标签，我们可以使用^符号。这个符号就是让标签提升到上级。
规则：
效果：
GIF:
如果我们想要bq和p并列，那么我们只需要使用两次^,这表示将这个标签提升两级。
规则：
GIF：
乘法
很多标签需要重复出现多次，比如说li。为了方便批量的输入这些标签，Emmet允许我们使用乘法。
规则：
*表示乘法，*3表示前面的标签出现三次。
效果：
GIF:
GIF2:
自增符号 $
在使用乘法批量的生成Tag的时候，我们可能需要使用到数字。比如说这样的：
<ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> <li>item 5</li> <li>item 6</li></ul>
那么我们该如何输入上面的内容呢？
在Emmet中提供了一个特殊的符号：$. 这个符号代表着一个特殊的变量，它默认的初始值是1，每次出现后自动加1。
规则：
效果：
GIF:
GIF2:
如果你希望使用三位数的数字，那么只需要使用三次$符号：
规则：
结果：
GIF:
如果你希望将$的初始值设置为其他数字，那么可以使用@符号。
规则：
这里的@3就是将前面的$变量的初始值设置为3。
结果：
GIF：
Lorem
我们在编写代码的时候，经常需要填写一些无意义的字符串，用来测试我们的HTML页面的展示效果。你之前是否都是用键盘随机输入字符呢？
Emmet为我们提供了一个特殊的命令，可以快速的生成一堆无具体意义的字符串。
规则：
Result:
GIF:
GIF2:
小结
这就是Emmet的基本用法，希望对你有帮助。如果你认为这些GIF帮助到你了，请告诉我，我会继续创作同类型的文章。
最后：现在你能够快速的输入本文开头的那个HTML文本了吗？
