Emmet（前身为 Zen Coding）是一个能大幅提高前端开发效率的工具。在前端开发的过程中，一大部分的工作是写 HTML、CSS 代码。特别是手动编写 HTML 代码的时候，效率会特别低下，因为需要敲打很多尖括号，而且很多标签都需要闭合标签等。于是，就有了 Emmet，它可以极大地提高代码编写的效率，它提供了一种非常简练的语法规则，然后立刻生成对应的 HTML 结构或者 CSS 代码，同时还有多种实用的功能帮助进行前端开发。
基本规则
语法基本规则如下：
-
E代表 HTML 标签。 -
E#id代表 id 属性。 -
E.class代表 class 属性。 -
E[attr=foo]代表某一个特定属性。 -
E{foo}代表标签包含的内容是 foo。 -
E>N代表 N 是 E 的子元素。 -
E+N代表 N 是 E 的同级元素。 -
E^N代表 N 是 E 的上级元素。
基础用法
元素
可以使用元素的名称，如 div 或 p 来生成 HTML 标签。Emmet 没有一组可用的标签名称，可以写任何单词并将其转换为标签。也就是只要知道元素的缩写，Emmet 会自动转换成对应标签。
形如：
div => <div> </div>
foo => <foo> </foo>
html:5 => 将生成 HTML5 标准的包含空 body 的基本 DOM
html:xt => 生成 XHTM L过渡文档类型，DOCTYPE 为 XHTML
html:4s => 生成 HTML4 严格文档类型，DOCTYPE 为 HTML 4.01
a:mail => <a href="mailto:"></a>
a:link => <a href="http://"></a>
base => <base href="">
br => <br>
link => <link rel="stylesheet" href="">
script:src => <script src=""></script>
form:get => <form action="" method="get"></form>
label => <label for=""></label>
input => <input type="text">
inp => <input type="text" name="" id="">
input:hidden => <input type="hidden" name=""> input:h 亦可
input:email => <input type="email" name="" id="">
input:password => <input type="password" name="" id="">
input:checkbox => <input type="checkbox" name="" id="">
input:radio => <input type="radio" name="" id="">
select => <select name="" id=""></select>
option => <option value=""></option>
bq => <blockquote></blockquote>
btn => <button></button>
btn:s => <button type="submit"></button>
btn:r => <button type="reset"></button>
文本操作符
如果想在生成元素的同时添加文本内容，可以使用 {}：
div{这是一段文本}
<div>这是一段文本</div>
a{点我点我}
<a href="">点我点我</a>
属性操作符
属性运算符用于修改输出元素的属性。
Id 和 Class：
div.test => <div class="test"></div>
div#pageId => <div id="pageId"></div>
隐式标签则会自动联想生成对应元素，根据配置规则不同生成的结果也是不同的。
.class
=>
<div class></div>
em>.class
=>
<em><span class></span></em>
table>.row>.col
=>
<table>
<tr class="row">
<td class="col"></td>
</tr>
</table>
绑定多个类名用 . 符号连续起来即可：
div.test1.test2.test3
=>
<div class="test1 test2 test3"></div>
自定义属性使用 [attr1='' attr2='']：
a[href='#' data-title='customer' target='_blank']
=>
<a href="#" data-title="customer" target="_blank"></a>
嵌套操作符
嵌套操作符用于将缩写元素放置在生成的树中，不管它应放置在上下文元素的内部或附近。
子级
通过 > 标识元素可以生成嵌套子级元素，可以配合元素属性进行连写。
div#pageId>ul>li
=>
<div id="pageId">
<ul>
<li></li>
</ul>
</div>
同级
+ 字符表示生成兄弟级元素。
div#pageId+div.child
=>
<div id="pageId"></div>
<div class="child"></div>
父级
^ 用于生成父级元素的同级元素。从这个 ^ 字符所在位置开始，查找左侧最近的元素的父级元素并生成其兄弟级元素。
div>p.parent>span.child^ul.brother>li
=>
<div>
<p class="parent"><span class="child"></span></p>
<ul class="brother">
<li></li>
</ul>
</div>
分组操作符
分组使用 () 来实现缩写的分离。比如这个例子，如果不加括号那么 a 将作为 span 的同级元素生成，加上括号 a 将与 () 内的元素同级。
div>(ul>li+span)+a
=>
<div>
<ul>
<li></li>
<span></span>
</ul>
<a href=""></a>
</div>
乘法
使用 * 运算符，可以定义元素应输出的次数：
ul>li*3
=>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
自动编号
在生成重复项时，增加一个序号，只需要加上 $ 符号即可。
ul>li.item${item number:$}*3
<ul>
<li class="item1">item number:1</li>
<li class="item2">item number:2</li>
<li class="item3">item number:3</li>
</ul>
编号方向
使用 @ 修饰符，可以更改编号方向（升序或降序）和基数（例如起始值）。注意这个操作符在 $ 之后添加。
@- 表示降序，@+ 表示升序。默认使用升序。
ul>li.item$@-*3
=>
<ul>
<li class="item3"></li>
<li class="item2"></li>
<li class="item1"></li>
</ul>
若要两位数的序号，就得写两个 $：
ul>li.item$$*3
=>
<ul>
<li class="item01"></li>
<li class="item02"></li>
<li class="item03"></li>
</ul>
编号基数
@N 可以改变起始值。需要注意的是，如果配合升降序使用的话，N 放到 +- 符后。
ul>li.item$@-10*3
=>
<ul>
<li class="item12"></li>
<li class="item11"></li>
<li class="item10"></li>
</ul>
