Emmet的前身是大名鼎鼎的Zen coding蓝角，如果你從事Web前端開發(fā)的話，對該插件一定不會陌生稚矿。它使用仿CSS選擇器的語法來生成代碼掏熬，大大提高了HTML/CSS代碼編寫的速度，而且作為一款插件能夠大部分的代碼編輯器叨粘，文章后面列出了支持的代碼編輯器類型猾编。請看下面演示：
Zen coding下的編碼演示
一、快速編寫HTML代碼
1.? 初始化
HTML文檔需要包含一些固定的標簽升敲，比如答倡、、等驴党，現(xiàn)在你只需要1秒鐘就可以輸入這些標簽瘪撇。比如輸入“!”或“html:5”，然后按Tab鍵：
html:5 或!：用于HTML5文檔類型
html:xt：用于XHTML過渡文檔類型
html:4s：用于HTML4嚴格文檔類型
2.? 輕松添加類鼻弧、id设江、文本和屬性
連續(xù)輸入元素名稱和ID，Emmet會自動為你補全攘轩，比如輸入p#foo：
連續(xù)輸入類和id叉存，比如p.bar#foo，會自動生成：
Html代碼?
下面來看看如何定義HTML元素的內(nèi)容和屬性度帮。你可以通過輸入h1{foo}和a[href=#]歼捏，就可以自動生成如下代碼：
Html代碼?
foo
3.? 嵌套
現(xiàn)在你只需要1行代碼就可以實現(xiàn)標簽的嵌套稿存。
>：子元素符號，表示嵌套的元素
+：同級標簽符號
^：可以使該符號前的標簽提升一行
效果如下圖所示：
4.? 分組
你可以通過嵌套和括號來快速生成一些代碼塊瞳秽，比如輸入(.foo>h1)+(.bar>h2)瓣履，會自動生成如下代碼：
Html代碼?
5.? 隱式標簽
聲明一個帶類的標簽，只需輸入div.item练俐，就會生成
袖迎。在過去版本中，可以省略掉div腺晾，即輸入.item即可生成
⊙嘧叮現(xiàn)在如果只輸入.item，則Emmet會根據(jù)父標簽進行判定悯蝉。比如在- 中輸入.item归形，就會生成
- 。
下面是所有的隱式標簽名稱：
li：用于ul和ol中
tr：用于table鼻由、tbody暇榴、thead和tfoot中
td：用于tr中
option：用于select和optgroup中
6.? 定義多個元素
要定義多個元素，可以使用*符號蕉世。比如蔼紧，ul>li*3可以生成如下代碼：
Html代碼?
7.? 定義多個帶屬性的元素
如果輸入 ul>li.item$*3，將會生成如下代碼：
Html代碼?
二讨彼、CSS縮寫
1.? 值
比如要定義元素的寬度歉井，只需輸入w100，即可生成
Css代碼?
width:?100px;??
除了px哈误，也可以生成其他單位哩至，比如輸入h10p+m5e，結果如下：
Css代碼?
height:10%;??
margin:?5em;??
單位別名列表：
p 表示%
e 表示 em
x 表示 ex
2.? 附加屬性
可能你之前已經(jīng)了解了一些縮寫蜜自，比如 @f菩貌，可以生成：
Css代碼?
@font-face?{??
??font-family:;??
??src:url();??
}??
一些其他的屬性，比如background-image重荠、border-radius箭阶、font、@font-face,text-outline戈鲁、text-shadow等額外的選項仇参，可以通過“+”符號來生成，比如輸入@f+婆殿，將生成：
Css代碼?
@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會根據(jù)你的輸入內(nèi)容匹配最接近的語法，比如輸入ov:h婆芦、ov-h怕磨、ovh和oh喂饥，生成的代碼是相同的：
Css代碼?
overflow:?hidden;??
4.? 供應商前綴
如果輸入非W3C標準的CSS屬性，Emmet會自動加上供應商前綴肠鲫，比如輸入trs员帮，則會生成：
Css代碼?
-webkit-transform:?;??
-moz-transform:?;??
-ms-transform:?;??
-o-transform:?;??
transform:?;??
你也可以在任意屬性前加上“-”符號，也可以為該屬性加上前綴导饲。比如輸入-super-foo：
Css代碼?
-webkit-super-foo:?;??
-moz-super-foo:?;??
-ms-super-foo:?;??
-o-super-foo:?;??
super-foo:?;??
如果不希望加上所有前綴捞高，可以使用縮寫來指定，比如-wm-trf表示只加上-webkit和-moz前綴：
Css代碼?
-webkit-transform:?;??
-moz-transform:?;??
transform:?;??
前綴縮寫如下：
w 表示 -webkit-
m 表示 -moz-
s 表示 -ms-
o 表示 -o-
5.? 漸變
輸入lg(left, #fff 50%, #000)帜消，會生成如下代碼：
Css代碼?
background-image:?-webkit-gradient(linear,00,100%0,?color-stop(0.5,?#fff),?to(#000));??
background-image:?-webkit-linear-gradient(left,?#fff50%,?#000);??
background-image:?-moz-linear-gradient(left,?#fff50%,?#000);??
background-image:?-o-linear-gradient(left,?#fff50%,?#000);??
background-image:?linear-gradient(left,?#fff50%,?#000);??
三棠枉、附加功能
生成Lorem ipsum文本
Lorem ipsum指一篇常用于排版設計領域的拉丁文文章，主要目的是測試文章或文字在不同字型泡挺、版型下看起來的效果。通過Emmet命浴，你只需輸入lorem 或 lipsum即可生成這些文字娄猫。還可以指定文字的個數(shù)，比如lorem10生闲，將生成：
引用
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero delectus.
四媳溺、定制
你還可以定制Emmet插件：
添加新縮寫或更新現(xiàn)有縮寫，可修改snippets.json文件
更改Emmet過濾器和操作的行為碍讯，可修改preferences.json文件
定義如何生成HTML或XML代碼悬蔽，可修改syntaxProfiles.json文件
五、針對不同編輯器的插件
Emmet支持的編輯器如下（鏈接為針對該編輯器的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
語法及標簽縮寫方法如下：
后代：>
縮寫：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 1Header 2Header 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}
Clickhere to continue
隱式標簽
縮寫：.class
縮寫：em>.class
縮寫：ul>.class
縮寫：table>.row>.col
所有未知的縮寫都會轉換成標簽捉兴，例如蝎困，foo → <foo></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
縮寫：inp
縮寫：input:hidden
別名：input[type=hidden name]
縮寫：input:h
別名：input:hidden
縮寫：input:text, input:t
別名：inp
縮寫：input:search
別名：inp[type=search]
縮寫：input:email
別名：inp[type=email]
縮寫：input:url
別名：inp[type=url]
縮寫：input:password
別名：inp[type=password]
縮寫：input:p
別名：input: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
別名：inp[type=checkbox]
縮寫：input:c
別名：input:checkbox
縮寫：input:radio
別名：inp[type=radio]
縮寫：input:r
別名：input:radio
縮寫：input:range
別名：inp[type=range]
縮寫：input:file
別名：inp[type=file]
縮寫：input:f
別名：input:file
縮寫：input:submit
縮寫：input:s
別名：input:submit
縮寫：input:image
縮寫：input:i
別名：input:image
縮寫：input:button
縮寫：input:b
別名：input:button
縮寫：isindex
縮寫：input:reset
別名：input:button[type=reset]
縮寫：select
縮寫：option
縮寫：textarea
縮寫：menu:context
別名：menu[type=context]>
縮寫：menu:c
別名：menu:context
縮寫：menu:toolbar
別名：menu[type=toolbar]>
縮寫：menu:t
別名：menu: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]
<button type="submit"></button>
