介绍
Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具。
基本上，大多数的文本编辑器都会允许你存储和重用一些代码块，我们称之为“片段”。虽然片段能很好地推动你得生产力，但大多数的实现都有这样一个缺点：你必须先定义你得代码片段，并且不能再运行时进行拓展。
Emmet把片段这个概念提高到了一个新的层次：你可以设置CSS形式的能够动态被解析的表达式，然后根据你所输入的缩写来得到相应的内容。Emmet是很成熟的并且非常适用于编写HTML/XML 和 CSS 代码的前端开发人员，但也可以用于编程语言。
示例在编辑器中输入缩写代码ul>li*5，然后按下拓展键（默认为tab），即可得到代码片段：
立即学习“前端免费学习笔记（深入）”；
编辑器插件
以下都是Emmet为编辑器提供的安装插件。
Sublime Text
Eclipse/Aptana
TextMate
Coda
Espresso
Chocolat
Komodo Edit
Notepad++
PSPad
textarea
CodeMirror
Brackets
NetBeans
Adobe Dreamweaver
在线编辑器的支持：
JSFiddle
JS Bin
CodePen
ICEcoder
Divshot
Codio
第三方插件的支持
下面这些编辑器的插件都是由第三方开发者所提供的，所以可能并不支持所有Emmet的功能和特性。
SynWrite
WebStorm
PhpStorm
Vim
HTML-Kit
HippoEDIT
CodeLobster PHP Edition
TinyMCE
语法后代：>
nav>ul>li
兄弟：+
div+p+bq
上级：^
div+div>p>span+em^bq
div+div>p>span+em^^bq
分组：()
div>(header>ul>li*2>a)+footer>p
(div>dl>(dt+dd)*3)+footer>p
乘法：*
ul>li*5
自增符号：$
ul>li.item$*5
h$[title=item$]{Header $}*3
Header 1
Header 2
Header 3
ul>li.item$$$*5
ul>li.item$@-*5
ul>li.item$@3*5
ID和类属性
#header
.title
form#search.wide
p.class1.class2.class3
自定义属性
p[title="Hello world"]
td[rowspan=2 colspan=3 title]
[a='value1' b="value2"]
文本：{}
a{Click me}
Click me
p>{Click }+a{here}+{ to continue}
Click here to continue
隐式标签
.class
em>.class
ul>.class
table>.row>.col
HTML
所有未知的缩写都会转换成标签，例如，foo →
!
Document
a
a:link
a:mail
abbr
acronym
base
basefont
br
frame
hr
bdo
bdo:r
bdo:l
col
link
link:css
link:print
link:favicon
link:touch
link:rss
link:atom
meta
meta:utf
meta:win
meta:vp
meta:compat
style
script
script:src
img
iframe
embed
object
param
map
area
area:d
area:c
area:r
area:p
form
form:get
form:post
label
input
input:text input:t inp
input:hidden input:h input[type=hidden name]
input:search inp[type=search]
input:email inp[type=email]
input:url inp[type=url]
input:password input:p inp[type=password]
input:datetime inp[type=datetime]
input:date inp[type=date]
input:datetime-local inp[type=datetime-local]
input:month inp[type=month]
input:week inp[type=week]
input:time inp[type=time]
input:number inp[type=number]
input:color inp[type=color]
input:checkbox input:c inp[type=checkbox]
input:radio input:r inp[type=radio]
input:range inp[type=range]
input:file input:f inp[type=file]
input:submit input:s
input:image input:i
input:button input:b
input:reset input:button[type=reset]
select
option
textarea
menu:context menu:c menu[type=context]
menu:toolbar menu:t menu[type=toolbar]
video
audio
html:xml
keygen
command
bq blockquote
acr acronym
fig figure
figc figcaption
ifr iframe
emb embed
obj object
src source
cap caption
colg colgroup
fst fset fieldset
btn button
btn:b button[type=button]
btn:r button[type=reset]
btn:s button[type=submit]
最后
关于更多的HTML以及CSS的缩写请查看：官网文档
