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 会自动转换成对应标签。
形如：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 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 >
文本操作符 如果想在生成元素的同时添加文本内容，可以使用 {}：
1 2 3 4 5 div{这是一段文本} <div > 这是一段文本</div > a{点我点我} <a href ="" > 点我点我</a >
属性操作符 属性运算符用于修改输出元素的属性。
Id 和 Class：
1 2 div.test => <div class ="test" > </div > div#pageId => <div id ="pageId" > </div >
隐式标签则会自动联想生成对应元素，根据配置规则不同生成的结果也是不同的。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 .class => <div class > </div > em>.class => <em > <span class > </span > </em > table>.row>.col => <table > <tr class ="row" > <td class ="col" > </td > </tr > </table >
绑定多个类名用 . 符号连续起来即可：
1 2 3 div.test1.test2.test3 => <div class ="test1 test2 test3" > </div >
自定义属性使用 [attr1='' attr2='']：
1 2 3 a[href='#' data-title='customer' target='_blank'] => <a href ="#" data-title ="customer" target ="_blank" > </a >
嵌套操作符 嵌套操作符用于将缩写元素放置在生成的树中，不管它应放置在上下文元素的内部或附近。
子级 通过 > 标识元素可以生成嵌套子级元素，可以配合元素属性进行连写。
1 2 3 4 5 6 7 div#pageId>ul>li => <div id ="pageId" > <ul > <li > </li > </ul > </div >
同级 + 字符表示生成兄弟级元素。
1 2 3 4 div#pageId+div.child => <div id ="pageId" > </div > <div class ="child" > </div >
父级 ^ 用于生成父级元素的同级元素。从这个 ^ 字符所在位置开始，查找左侧最近的元素的父级元素并生成其兄弟级元素。
1 2 3 4 5 6 7 8 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 将与 () 内的元素同级。
1 2 3 4 5 6 7 8 9 div>(ul>li+span)+a => <div > <ul > <li > </li > <span > </span > </ul > <a href ="" > </a > </div >
乘法 使用 * 运算符，可以定义元素应输出的次数：
1 2 3 4 5 6 7 ul>li*3 => <ul > <li > </li > <li > </li > <li > </li > </ul >
自动编号 在生成重复项时，增加一个序号，只需要加上 $ 符号即可。
1 2 3 4 5 6 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 >
编号方向 使用 @ 修饰符，可以更改编号方向（升序或降序）和基数（例如起始值）。注意这个操作符在 $ 之后添加。
@- 表示降序，@+ 表示升序。默认使用升序。
1 2 3 4 5 6 7 ul>li.item$@-*3 => <ul > <li class ="item3" > </li > <li class ="item2" > </li > <li class ="item1" > </li > </ul >
若要两位数的序号，就得写两个 $：
1 2 3 4 5 6 7 ul>li.item$$*3 => <ul > <li class ="item01" > </li > <li class ="item02" > </li > <li class ="item03" > </li > </ul >
编号基数 @N 可以改变起始值。需要注意的是，如果配合升降序使用的话，N 放到 +- 符后。
1 2 3 4 5 6 7 ul>li.item$@-10*3 => <ul > <li class ="item12" > </li > <li class ="item11" > </li > <li class ="item10" > </li > </ul >
