认识Emmet
我是最近安装Sublime Text2才接触到zen coding插件方面的知识。刚开始从网上看到都是说安装zen coding 这个插件，但是我安装了之后，发现用不了。后来才知道这个插件已经没有更新了，已经替换为另外一个插件了，它就是我今天要说的Emmet了。
一款强大的集HTML（HTML5）+CSS（CSS3）缩写的插件，安装了这个插件之后，前端写代码的速度应该能够提高几倍吧。虽然说码字这点时间相对于思考来说不怎么样，但是还是挺让人感到兴奋。我相信你看到这款插件的功能，一定会非常高兴的。
强大的Emmet
下面引用youtube（请自行准备梯子）上Emmet作者的视频介绍：
在大名鼎鼎的SmashingMagazine上有一篇详细的文章介绍使用这些缩写方式：Goodbye, Zen Coding. Hello, Emmet!访问
若有爱，可以访问作者的博客：http://chikuyonok.ru
若已爱上，你可以访问插件的主页：http://emmet.io/
Emmet的HTML属性缩写
html:5or!for an HTML5 doctypehtml:xtfor an XHTML transitional doctypehtml:4sfor an HTML4 strict doctype
p.bar#foo
a[href=#]
(.foo>h1)+(.bar>h2)
ul>li*3
Emmet的CSS属性缩写
w100
h10p+m5e
height: 10%; margin: 5em;
ov:h and ov-h and ovh and oh
trs
lg(left, #fff 50%, #000)
文字补全
lorem10
以下内容来自这里，本想照着文档来写一篇中文文档的，发现官方的文档都已经是st3的版本了，快捷键大部分都已经改了。你也可以在这里看更多的快捷键
1、生成 Lorem Ipsum
这是什么？之前接了一些国外的单子，发现内容填充都是相同的一段文字:只需要输入lorem然后加tab，或者lorem*10/lorem10这样子，就会生成一个无意义的文字了。
2、进行数学算术
数学算术？有人会问，这个有什么用，特别是对于前端来说。其实这个功能在做响应式网页开发时就能派上用场。
做过响应式开发的人都知道，流动布局的精髓就是把所有的宽度值尽量都换成精确的百分比。没错，注意“精确”，有时候除出来的结果，不是心算可以出来的，这时候这个功能就比较方便了，直接在代码编辑器里进行计算，就不用打草稿，或者打开计算器了。
快捷键是： ⇧⌘Y（苹果） / Shift+Ctrl+Y（Windows），具体演示看官网 DEMO：http://docs.emmet.io/actions/evaluate-math/
3、快速移除标签
往往要删除一个HTML标签，如果中间有一大段内容，就会感觉不方便，要拖动屏幕，要点光标，要选择，然后还要按下 Backspace ，很麻烦有木有！
Emmet 贯标停在标签上，一个快捷键就搞定了：⌘’ / Shift+Ctrl+;
官方 Demo ：http://docs.emmet.io/actions/remove-tag/
同样的，重命名标签，另一个快捷键：⇧⌘K / Shift+Ctrl+’
4、自动添加图片的尺寸大小
往往图片需要添加尺寸的，不管是使用 img 标签，还是通过 CSS 添加背景图片，不然bug会很多，但是每次添加尺寸，很麻烦，都要找到这张图片然后看看图片大小，然后再填写 width、height 。
现在有了Emmet，只要填写上图片地址，将光标放在图片地址上，一个快捷键统统搞定：⇧⌃I / Ctrl+U
官方 Demo ：http://docs.emmet.io/actions/update-image-size/
5、自动映射更新 CSS 的属性值
自动映射更新 CSS 的属性值？这个什么意思呢？举个例子，通常为了使用 CSS3 ，就不得不考虑各个浏览器的私有属性，都要各写各的：
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
这么多，写起来太麻烦了，使用 Emmet ，（以上面为例）你只需要写一个 transform ，然后按下 Tab 键；
如果要更改属性值怎么办，只需该其中一个值，然后按快捷键：⇧⌘R / Shift+Ctrl+R
是不是太方便额！
6、将图片资源转换成 data url 形式
什么是 data url ？data url 是针对于一些小的数据，可以在网页中直接嵌入，而不是从外部文件载入，比如图片。这样的好处是可以减少一次http的请求，缺点是使得页面内容变大。兼容 性方面，大部分是支持的，但是 IE系列（6~8） 都不支持或者支持的不好，鄙视一下IE。
将图片转为 data url 一般的用工具，然后再粘贴过来，现在使用 Emmet ，将光标移动到 background: url() 中的图片位置的地方，一个快捷键瞬间转换：⇧⌃D / Ctrl+’
Emmet支持以下的编辑器，看看能否找到你的
- Sublime Text 2
- TextMate 1.x
- Eclipse/Aptana
- Coda 1.6 and 2.x
- Espresso
- Chocolat (available via the “Install Mixin” dialog)
- Komodo Edit/IDE (available via
Tools → Add-ons) - Notepad++
- PSPad
- <textarea>
- CodeMirror2/3
- Bracket
