在前端开发的过程中，编写 HTML、CSS 代码始终占据了很大的工作比例。特别是手动编写 HTML 代码，效率特别低下，因为需要敲打各种“尖括号”、闭合标签等。而现在 Emmet 就是为了提高代码编写的效率而诞生的，它提供了一种非常简练的语法规则，然后立刻生成对应的 HTML 结构或者 CSS 代码，同时还有多种实用的功能帮助进行前端开发。
你可能听说过一款强大的功能相似的工具：Zen Coding，那个比较老了，而现在的 Emmet 则是 Zen Coding 的升级版，由 Zen Coding 的原作者进行开发等。 Emmet 严格意义上来说，并不是一款软件或者工具，它是一款编辑器插件，必须要基于某个编辑器使用。目前它支持如下编辑器：
Sublime Text 2
TextMate 1.x
Eclipse/Aptana
Coda 1.6 and 2.x
Espresso
Chocolat (可以通过 “Install Mixin” 对话框安装)
Komodo Edit/IDE ( Tools → Add-ons)
Notepad++
PSPad
<textarea>
CodeMirror2/3
Brackets
在上面列表点击你目前使用的编辑器，就可以获得对应的插件文件，安装之后就可以使用 Emmet 的相关功能了。由于 Sublime text 2 是目前最好最强大的前端开发代码编辑器，所以本文就以 Sublime text 2 为例，讲解 Emmet 的安装、基础语法。
在 Sublime text 2 中安装 Emmet
Sbulime text 2 安装插件肯定要通过 Package Control 这个插件了，如果你还没有安装这个插件，抓紧先去安装一下吧。安装完成之后，我们摁下“shift + ctrl + p”呼出面板，输入“pci”即可锁定“Package Control：Install Package”这个功能，回车之后就可以看到一个列表，我们继续输入“emmet”即可找到这个插件，回车之后等待一会就安装完成了。
Visual Studio中的 Emmet
在visual studio 中的插件管理中搜索Web Essentials这样一个插件，直接安装就行了。
开始使用 Emmet
Emmet 可以快速的编写 HTML 和 CSS 以及实现其他的功能。它根据当前文件的“语言”来判断要使用 HTML 语法还是 CSS 语法来解析。例如当前文件的后缀为 .html 那 Sublime text 2 就会用 HTML 的方式来解析高亮这个文件，Emmet 也会根据 HTML 的语法把你输入的指令编译成 HTML 结构。如果是在一个 .c 的 C语言 文件中，你根据 Emmet 的语法编写出来的指令，是不会被编译的。
此外，在没有后缀的文件中，你可以摁下“shift + ctrl + p”呼出面板，输入“seth”就可以选择当前文档是使用 HTML 的模式还是其他编程语言的模式来解释。下面就是一条 Emmet 的指令：
#page>div.logo+ul#navigation>li*5>a{Item $}我们把它复制到 Sublime text 2 中已经打开的 HTML 文件中，这时候敲击一下 TAB 键，你就会发现这行指令变成了下面的 HTML 结构：
<div id="page">
<div class="logo"></div>
<ul id="navigation">
<li><a href="">Item 1</a></li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 3</a></li>
<li><a href="">Item 4</a></li>
<li><a href="">Item 5</a></li>
</ul>
</div>
怎么样？很神奇吧，仅仅写一行代码，就可以生成这么一个复杂的 HTML 结构，而且还可以声称对应的 class 、id 和内容。这行指令你现在可能还看不懂，下面会详细讲解语法，你现在只需要知道 Emmet 的工作流程：打开 HTML 或 CSS 文件->按语法编写指令->摁下 TAB 键->生成！
Emmet 生成 HTML 结构基础语法
生成 HTML 文档初始结构 HTML 文档的初始结构，就是包括 doctype、html、head、body 以及 meta 等内容。你只需要输入一个 “!” 就可
1. 生成html格式
输入 html:5
2. 简写Div
大家可以看到，不管你是否添加了div，Emmet都会自动生成需要div元素。
含糊标签名称
这个技巧属于implicit tag names特性，你不需要指定div或者li，Emmet会自动帮助你生成，如下：
3. 带有DOM导航的链式缩写
如果你使用Emmet来扩展简单的class名称生成div的话。这个方式可以帮助你省去大量的时间。你只需要记住如下语法：
> 子节点：在DOM树下一层添加创建一个元素
+ 同级别：在DOM树同一层添加创建一个元素
^ 向上层：向上一层添加创建创建一个元素。
向上一层
如果需要的话你可以向上多层，如下：
4. 使用分组来简化你的代码结构
有的时候你可能会发现使用向上符号比较复杂，这时候可能使用分组更加的合理。如下：
一个更复杂一些的例子，如下：
5. 插入文本和属性
如果你需要生成HTML，内容和属性也是你常常需要添加的。很多开发人员只是使用Emmet来生成框架，然后再添加内容。其实你可以在生成页面框架的过程中同时添加属性和内容。
从下面代码可以看到，你输入的文字和属性都可以分别通过大括号和中括号来生成。
6. 添加多个class到一个元素
这个非常简单，你只需要使用逗号来添加多个class，如下：
7. 重复添加
这可能是最让人舒服的操作了，帮助你重复添加元素：
如果你整合分组功能，那么你将能够处理更复杂的HTML生成：
8. 自动列表记数
如果你需要按顺序生成HTML元素，这个技巧你一定喜欢，使用$符号可以帮助你生成一系列数字，支持class，id，属性，内容等等。如下：
注意如果你需要生成2位的数字，使用两个$符号即可。
补充阅读：http://docs.emmet.io/cheat-sheet/
Syntax
ID and CLASS attributes
#header
<div id="header"></div>
Text: {}
a{Click me}
<a href="">Click me</a>
HTML
All unknown abbreviations will be transformed to tag, e.g. foo → <foo></foo>.
a:link
<a href="http://"></a>
a:mail
<a href="mailto:"></a>
abbr
<abbr title=""></abbr>
bdo:r
<bdo dir="rtl"></bdo>
bdo:l
<bdo dir="ltr"></bdo>
meta:vp
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
script:src
<script src=""></script>
picture
<picture></picture>
source:srcset, src:s
<source srcset="" />
embed
<embed src="" type="" />
form
<form action=""></form>
label
<label for=""></label>
input
<input type="text" />
select:disabled, select:d
Alias of select[disabled.]
<select name="" id="" disabled="disabled"></select>
video
<video src=""></video>
audio
<audio src=""></audio>
button:submit, button:s, btn:s
Alias of button[type=submit]
<button type="submit"></button>
button:reset, button:r, btn:r
Alias of button[type=reset]
<button type="reset"></button>
button:disabled, button:d, btn:d
Alias of button[disabled.]
<button disabled="disabled"></button>
fieldset:disabled, fieldset:d, fset:d, fst:d
Alias of fieldset[disabled.]
<fieldset disabled="disabled"></fieldset>
fig
Alias of figure
<figure></figure>
pic
Alias of picture
<picture></picture>
emb
Alias of embed
<embed src="" type="" />
cap
Alias of caption
<caption></caption>
colg
Alias of colgroup
<colgroup></colgroup>
fst, fset
Alias of fieldset
<fieldset></fieldset>
btn
Alias of button
<button></button>
optg
Alias of optgroup
<optgroup></optgroup>
leg
Alias of legend
<legend></legend>
sect
Alias of section
<section></section>
art
Alias of article
<article></article>
hdr
Alias of header
<header></header>
ftr
Alias of footer
<footer></footer>
adr
Alias of address
<address></address>
dlg
Alias of dialog
<dialog></dialog>
str
Alias of strong
<strong></strong>
prog
Alias of progress
<progress></progress>
mn
Alias of main
<main></main>
tem
Alias of template
<template></template>
datag
Alias of datagrid
<datagrid></datagrid>
datal
Alias of datalist
<datalist></datalist>
kg
Alias of keygen
<keygen />
out
Alias of output
<output></output>
det
Alias of details
<details></details>
cmd
Alias of command
<command />
doc4
Alias of html>(head>meta[http-equiv="Content-Type" content="text/html;charset=${charset}"]+title{1:Document}})+body
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Document</title>
</head>
<body> </body>
</html>
html:4t
Alias of !!!4t+doc4[lang=${lang}]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Document</title>
</head>
<body> </body>
</html>
html:4s
Alias of !!!4s+doc4[lang=${lang}]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Document</title>
</head>
<body> </body>
</html>
html:xt
Alias of !!!xt+doc4[xmlns=http://www.w3.org/1999/xhtml xml:lang=${lang}]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Document</title>
</head>
<body> </body>
</html>
html:xs
Alias of !!!xs+doc4[xmlns=http://www.w3.org/1999/xhtml xml:lang=${lang}]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Document</title>
</head>
<body> </body>
</html>
html:xxs
Alias of !!!xxs+doc4[xmlns=http://www.w3.org/1999/xhtml xml:lang=${lang}]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Document</title>
</head>
<body> </body>
</html>
ol+
Alias of ol>li
<ol>
<li></li>
</ol>
ul+
Alias of ul>li
<ul>
<li></li>
</ul>
tr+
Alias of tr>td
<tr>
<td></td>
</tr>
CSS
CSS module uses fuzzy search to find unknown abbreviations, e.g. ov:h == ov-h == ovh == oh.
If abbreviation wasn’t found, it is transformed into property name: foo-bar → foo-bar: |;
You can prefix abbreviations with hyphen to produce vendor-prefixed properties: -foo
Visual Formatting
d:ib
display:inline-block;
d:itb
display:inline-table;
d:tbcp
display:table-caption;
d:tbcl
display:table-column;
d:tbrg
display:table-row-group;
d:rbbg
display:ruby-base-group;
d:rbtg
display:ruby-text-group;
ovs:a
overflow-style:auto;
ovs:p
overflow-style:panner;
ovs:m
overflow-style:move;
ovs:mq
overflow-style:marquee;
Box Sizing
bxz
box-sizing:border-box;
bxz:cb
box-sizing:content-box;
bxz:bb
box-sizing:border-box;
Font
fw:lr
font-weight:lighter;
fv:sc
font-variant:small-caps;
fza:n
font-size-adjust:none;
ff:ss
font-family:sans-serif;
ff:m
font-family:monospace;
ff:t
font-family: "Times New Roman", Times, Baskerville, Georgia, serif;
fef:eg
font-effect:engrave;
fef:eb
font-effect:emboss;
fef:o
font-effect:outline;
fems
font-emphasize-style:;
fsm:aw
font-smooth:always;
fst:n
font-stretch:normal;
fst:c
font-stretch:condensed;
fst:e
font-stretch:expanded;
Text
va:sup
vertical-align:super;
va:tt
vertical-align:text-top;
va:m
vertical-align:middle;
va:bl
vertical-align:baseline;
va:b
vertical-align:bottom;
va:sub
vertical-align:sub;
tal:a
text-align-last:auto;
tal:l
text-align-last:left;
tal:c
text-align-last:center;
tal:r
text-align-last:right;
td:n
text-decoration:none;
te:ac
text-emphasis:accent;
te:c
text-emphasis:circle;
te:b
text-emphasis:before;
th:f
text-height:font-size;
th:t
text-height:text-size;
th:m
text-height:max-size;
tj:iw
text-justify:inter-word;
tj:d
text-justify:distribute;
tj:k
text-justify:kashida;
tj:t
text-justify:tibetan;
to+
text-outline:0 0 #000;
tw:u
text-wrap:unrestricted;
tsh+
text-shadow:0 0 0 #000;
lts-n
letter-spacing:normal;
whs:nw
white-space:nowrap;
whs:pw
white-space:pre-wrap;
whs:pl
white-space:pre-line;
whsc
white-space-collapse:;
wob:k
word-break:keep-all;
wob:ba
word-break:break-all;
wow:u
word-wrap:unrestricted;
wow:b
word-wrap:break-word;
Background
bgc
background-color:#fff;
bgi
background-image:url();
bgi:n
background-image:none;
bgr:sp
background-repeat:space;
bgr:rd
background-repeat:round;
bga
background-attachment:;
bgp
background-position:0 0;
bgpx
background-position-x:;
bgpy
background-position-y:;
bgcp:nc
background-clip:no-clip;
bgsz:a
background-size:auto;
bgsz:ct
background-size:contain;
bgsz:cv
background-size:cover;
Color
c:ra
color:rgba(0, 0, 0, .5);
Generated content
cnt:n, ct:n
content:normal;
cnt:oq, ct:oq
content:open-quote;
cnt:noq, ct:noq
content:no-open-quote;
cnt:cq, ct:cq
content:close-quote;
cnt:ncq, ct:ncq
content:no-close-quote;
cnt:a, ct:a
content:attr();
cnt:c, ct:c
content:counter();
cnt:cs, ct:cs
content:counters();
Outline
olw:tn
outline-width:thin;
olw:m
outline-width:medium;
olw:tc
outline-width:thick;
ols:dt
outline-style:dotted;
ols:ds
outline-style:dashed;
ols:s
outline-style:solid;
ols:db
outline-style:double;
ols:g
outline-style:groove;
ols:r
outline-style:ridge;
ols:i
outline-style:inset;
ols:o
outline-style:outset;
olc:i
outline-color:invert;
Tables
cps:b
caption-side:bottom;
Border
bd+
border:1px solid #000;
bdbk:c
border-break:close;
bdti
border-top-image:url();
bdti:n
border-top-image:none;
bdri:n
border-right-image:none;
bdli
border-left-image:url();
bdli:n
border-left-image:none;
bdf:st
border-fit:stretch;
bdf:ow
border-fit:overwrite;
bdf:of
border-fit:overflow;
bdlen:a
border-length:auto;
bds:h
border-style:hidden;
bds:dt
border-style:dotted;
bds:ds
border-style:dashed;
bds:db
border-style:double;
bds:dtds
border-style:dot-dash;
bds:g
border-style:groove;
bds:o
border-style:outset;
bdts:n
border-top-style:none;
bdtc
border-top-color:#000;
bdrst
border-right-style:;
bdrst:n
border-right-style:none;
bdrc
border-right-color:#000;
bdbw
border-bottom-width:;
bdbs
border-bottom-style:;
bdls:n
border-left-style:none;
bdlc
border-left-color:#000;
bdtlrs
border-top-left-radius:;
Lists
lisp
list-style-position:;
list:n
list-style-type:none;
list:d
list-style-type:disc;
list:c
list-style-type:circle;
list:s
list-style-type:square;
list:dc
list-style-type:decimal;
lisi:n
list-style-image:none;
Print
pgbb:au
page-break-before:auto;
pgbb:l
page-break-before:left;
pgbb:r
page-break-before:right;
pgbi:au
page-break-inside:auto;
pgbi:av
page-break-inside:avoid;
pgba:au
page-break-after:auto;
pgba:al
page-break-after:always;
pgba:l
page-break-after:left;
pgba:r
page-break-after:right;
Others
@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;
}
@i, @import
@import url();
@m, @media
@media screen { }
ac:c
align-content:center;
ac:fe
align-content:flex-end;
ac:s
align-content:stretch;
ai:b
align-items:baseline;
ai:fe
align-items:flex-end;
ai:fs
align-items:flex-start;
animdel
animation-delay:time;
animdur
animation-duration:0s;
animn
animation-name:none;
as:fe
align-self:flex-end;
as:fs
align-self:flex-start;
colmrc
column-rule-color:;
colmrs
column-rule-style:;
colmrw
column-rule-width:;
fxd:c
flex-direction:column;
fxw:wr
flex-wrap:wrap-reverse;
jc:c
justify-content:center;
ori:l
orientation:landscape;
ori:p
orientation:portrait;
tov:e
text-overflow:ellipsis;
trf:sc
transform: scale(x, y);
trf:scx
transform: scaleX(x);
trf:scy
transform: scaleY(y);
trf:scz
transform: scaleZ(z);
trf:skx
transform: skewX(angle);
trf:sky
transform: skewY(angle);
trsde
transition-delay:time;
wm:btl
writing-mode:bt-lr;
wm:btr
writing-mode:bt-rl;
wm:lrb
writing-mode:lr-bt;
wm:lrt
writing-mode:lr-tb;
wm:rlb
writing-mode:rl-bt;
wm:rlt
writing-mode:rl-tb;
wm:tbl
writing-mode:tb-lr;
wm:tbr
writing-mode:tb-rl;
XSL
imp
<xsl:import href="" />
inc
<xsl:include href="" />
num
<xsl:number value="" />
xsl
Alias of !!!+xsl:stylesheet[version=1.0 xmlns:xsl=http://www.w3.org/1999/XSL/Transform]>{
|}
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"></xsl:stylesheet>