Emmet 项目的前身是前端开发人员熟知的 Zen Coding，一种提供快速编写 HTML/CSS 代码的方法。和一般的编辑器中使用的“代码片段”概念不同，Emmet 使用动态的类似 CSS 表达式的语法来生成代码，这意味着你不需要自己去编辑并创建固定的代码片段，大大的提高了代码编写效率。
Emmet安装方法
点击这里下载，根据 Sublime Text 版本下载相应的 python 安装语句。我用的是 Sublime Text2，Mac 开发环境。
1.打开 Sublime Text2，找到View -> Show Console，输入：
import urllib2,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf282' + 'd0e7a3098092775ccb37ca9d6b2e4b7d'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')
然后重启 Sublime Text2 。
2.点击 Sublime Text2 -> Preferences -> Package Control，输入 Install Package，找到 Emment。双击 Emmet 进行安装，然后再次重启 Sublime Text 2。
Emmet使用
快速编写 HTML 代码
1.初始化
HTML 文档需要包含一些固定的标签，比如 、
、 等，现在你只需要1秒钟就可以输入这些标签。比如输入 “!” 或 “html:5”，然后按 Tab 键：- html:5 或!：用于HTML5文档类型
- html:xt：用于XHTML过渡文档类型
- html:4s：用于HTML4严格文档类型
2.轻松添加类、id、文本和属性
连续输入元素名称和 ID，Emmet 会自动为你补全，比如输入 p#foo：
连续输入类和 id，比如 p.bar#foo，会自动生成：
<p class="bar" id="foo"></p>
定义 HTML 元素的内容和属性。你可以通过输入 h1{foo} 和 a[href=#] ，就可以自动生成如下代码：
<h1>foo</h1>
<a href="#"></a>
3.嵌套
只需要1行代码就可以实现标签的嵌套。
>： 子元素符号，表示嵌套的元素+： 同级标签符号^： 可以使该符号前的标签提升一行
效果如下图所示：
4.分组
你可以通过嵌套和括号来快速生成一些代码块，比如输入 (.foo>h1)+(.bar>h2) ，会自动生成如下代码：
<div class="foo">
<h1></h1>
</div>
<div class="bar">
<h2></h2>
</div>
5.隐式标签
声明一个带类的标签，只需输入 div.item，就会生成 <div class="item"></div> 。
在过去版本中，可以省略掉 div，即输入 .item 即可生成 <div class="item"></div> 。现在如果只输入 .item，则 Emmet 会根据父标签进行判定。比如在 <ul> 中输入 .item ，就会生成 <li class="item"></li>。
下面是所有的隐式标签名称：
- li：用于 ul 和 ol 中
- tr：用于 table、tbody、thead 和 tfoot 中
- td：用于 tr 中
- option：用于 select 和 optgroup 中
6.定义多个元素
要定义多个元素，可以使用 * 符号。比如，ul>li*3 可以生成如下代码：
<ul>
<li></li>
<li></li>
<li></li>
</ul>
7.定义多个带属性的元素
如果输入 ul>li.item$*3，将会生成如下代码：
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
</ul>
CSS缩写
1.值
比如要定义元素的宽度，只需输入 w100 ，即可生成
width: 100px;
除了 px，也可以生成其他单位，比如输入 h10p+m5e，结果如下：
height: 10%;
margin: 5em;
单位别名列表：
- p 表示%
- e 表示 em
- x 表示 ex
2.附加属性
可能你之前已经了解了一些缩写，比如 @f，可以生成：
@font-face {
font-family:;
src:url();
}
一些其他的属性，比如 background-image、border-radius、font、@font-face,text-outline、text-shadow 等额外的选项，可以通过 “+” 符号来生成，比如输入 @f+，将生成：
@font-face {
font-family: 'FontName';
src: url('FileName.eot');
src: url('FileName.eot?#iefix') format('embedded-opentype'),
url('FileName.woff') format('woff'),
url('FileName.ttf') format('truetype'),
url('FileName.svg#FontName') format('svg');
font-style: normal;
font-weight: normal;
}
3.模糊匹配
如果有些缩写你拿不准，Emmet 会根据你的输入内容匹配最接近的语法，比如输入 ov:h、ov-h、ovh 和 oh ，生成的代码是相同的：
overflow: hidden;
4.供应商前缀
如果输入非 W3C 标准的 CSS 属性，Emmet 会自动加上供应商前缀，比如输入 trs，则会生成：
-webkit-transform: ;
-moz-transform: ;
-ms-transform: ;
-o-transform: ;
transform: ;
也可以在任意属性前加上 “-” 符号，也可以为该属性加上前缀。比如输入 -super-foo：
-webkit-super-foo: ;
-moz-super-foo: ;
-ms-super-foo: ;
-o-super-foo: ;
super-foo: ;
如果不希望加上所有前缀，可以使用缩写来指定，比如 -wm-trf 表示只加上 -webkit 和 -moz 前缀：
-webkit-transform: ;
-moz-transform: ;
transform: ;
前缀缩写如下：
- w 表示 -webkit-
- m 表示 -moz-
- s 表示 -ms-
- o 表示 -o-
5.渐变
输入 lg(left, #fff 50%, #000)，会生成如下代码：
background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5, #fff), to(#000));
background-image: -webkit-linear-gradient(left, #fff 50%, #000);
background-image: -moz-linear-gradient(left, #fff 50%, #000);
background-image: -o-linear-gradient(left, #fff 50%, #000);
background-image: linear-gradient(left, #fff 50%, #000);
