Zen Coding是知名的前端编码辅助工具，可以极大简化HTML/CSS代码输入。简单说Zen Coding就是一个强大、智能的自动补全工具。出于品牌管理的考虑，Zen Coding这个名字已成往事，2012年年末作者把它改名为Emmet。其实我挺喜欢她原先大气上档次的名字，所以冒着标题党的危险，用Zen coding做标题，其实下面主要讲的是Emmet。
尽管Emmet（蚂蚁）名字略显屌丝，不过相比更新之前的 Zen Coding，支持的编辑器更多了，包括：Sublime Text，TextMate， Eclipse，Coda，NotePad++，CodeMirror等，甚至一些在线代码服务也支持：JSFiddle、JS Bin等。功能也增强了很多，提供了对HTML5和CSS3的支持，下面列举一些进行说明：
HTML缩写语法
输入 ! 或者 html:5 再按Tab可以输出HTML基本结构：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
上面输出的是HTML5的文本类型申明，如果想要输出HTML4文本类型申明可以输入 html:4s 或者 html:4t 。
基本的标签缩写和展开形式如下：
a -> <a href=""></a>
div.class -> <div class="class"></div>
div#id -> <div id="id"></div>
div>p -> <div><p></p></div>
div+p -> <div></div><p></p>
Emmet能够智能的补全标签名，如果输入省略了标签名，默认使用div，除非上下文标签有关联的情况，比如在 ul 中会自动采用 li：
.class -> <div class="class"></div>
ul>.class -> <ul><li class="class"></li></ul>
除了这些，Emmet考虑到了一些复杂的标签结构，因此提供了非常丰富的缩写方式，比如：
标签属性
a[href] -> <a href=""></a>
一些标签属性还有进一步的缩写：
a:link -> <a href="http://"></a>
input:c -> <input type="checkbox" name="" id="" />
组合
(div>p)+(div>span) -> <div><p></p></div> <div><span></span></div>
标签计数
ul>li*2 ->
<ul>
<li></li>
<li></li>
</ul>
ul>li.item$*2 ->
<ul>
<li class="item1"></li>
<li class="item2"></li>
</ul>
注释及条件注释
c -> <!-- -->
cc:ie6 -> <!--[if lte IE 6]> <![endif]-->
CSS缩写语法
跟HTML的补全相比，CSS的补全更强大。Emmet会识别不完整的CSS属性，自动选择最匹配的结果来展开，比如 ov:h 或者 overf:h 都会展开成 overflow:hidden 。
属性
CSS的缩写官方有说明，基本是属性名缩写，比如：
pos:s -> position:static;
mr -> margin-right:;
CSS属性非常多，包括CSS3的属性都能通过类似的缩写来展开，记不住官方文档里的缩写也不要紧，前面说了她的智能匹配特性，凭感觉写就好，你的想法Emmet基本都能猜到的。
属性前缀
CSS3的很多属性都包含浏览器厂商前缀，写起来异常蛋疼，不过没关系，用Emmet写CSS3属性会自动添加前缀，比如输入trs 会展开为：
-webkit-transition: prop time;
-moz-transition: prop time;
-ms-transition: prop time;
-o-transition: prop time;
transition: prop time;
属性值 Emmet支持自动扩展属性值单位，比如 w100 展开以后是 100px; ，当然不仅仅支持像素，还支持%和em：
w10 -> 10px;
w10p -> 10%;
w1.5e -> 1.5em
看到这里想必你已跃跃欲试，如本文开头所说，Emmet的编辑器插件已经覆盖到Mac和Windows下的几款主流编辑器，不妨今天就装一个试试。
详细的语法参考手册，有兴趣的同学可以到这里查看：http://docs.emmet.io/cheat-sheet/ 。
参考资料
本站文章均由远尘原创，转载请注明：
转载自前端网事博客，本文链接地址:Zen Coding 禅境编程