Emmet 的官網：http://emmet.io/
以前寫html和css常用的插件就是zen_coding，后來它升級為emmet了，現在搜集一下常用的技巧，希望對新手一些幫助。
在html文件中輸入下面的簡寫腳本，按tab鍵就可生成標准的代碼了。
1、html5
腳本：
html:5 生成： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
2、簡單標簽
腳本： div.header#header 生成： <div class="header" id="header"></div>
3、模糊標簽
腳本： .wrap>ul>.item 生成： <div class="wrap"> <ul> <li class="item"></li> </ul> </div>
4、鏈式縮寫
> 子節點：在DOM樹下一層添加創建一個元素
+ 同級別：在DOM樹同一層添加創建一個元素
^ 向上層：向上一層添加創建創建一個元素。
腳本： .outer>.inner>div+p>a^span 生成： <div class="outer"> <div class="inner"> <div></div> <p><a href=""></a></p> <span></span> </div> </div>
5、分組
腳本： (.top>a)+(.bom>a) 生成： <div class="top"><a href=""></a></div> <div class="bom"><a href=""></a></div>
6、添加文本和屬性
腳本： div[title='測試']>span{測試}+a[href='/a/b']{測試} 生成： <div title="測試"><span>測試</span><a href="/a/b">測試</a></div>
7、多個class
腳本： .left.con.info 生成： <div class="left con info"></div>
8、控制標簽個數
腳本： .wrap>ul>li*5 生成： <div class="wrap"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> 腳本： .wrap>(h1+p.con)*3 生成： <div class="wrap"> <h1></h1> <p class="con"></p> <h1></h1> <p class="con"></p> <h1></h1> <p class="con"></p> </div>
9、列表自動添加行號
腳本： ul>li.nav${$$標題}*5 生成： <ul> <li class="nav1">01標題</li> <li class="nav2">02標題</li> <li class="nav3">03標題</li> <li class="nav4">04標題</li> <li class="nav5">05標題</li> </ul>
可用的操作
展開縮寫 - Tab鍵或按Ctrl + E
互動“展開縮寫” - 按Ctrl + Alt + Enter鍵
對外的標簽匹配對 - ^ D（MAC）/ Ctrl鍵 + ,（PC）
作用：選中光標所在的標簽或文本,每多按一次都會向外層元素擴展選擇。
標簽匹配對向內 - ^ J / 按Ctrl + Alt +，
作用：選中光標所在的標簽或文本,每多按一次都會向內層元素收縮選擇。
對匹配 - ⇧^ T / 按Ctrl + Alt + J
作用：在標簽的開始<>和結束</>來回跳轉。
使用縮寫包裹 - ^ W / Shift鍵+ Ctrl鍵+ G
ul.nav>li.nav-item$*>a|t |t能夠去掉ul,ol等列表項的包裹內容標記，比如排序的數字。
ul>li[title=$#]*>{$#}+img[alt=$#] $#可以控制包裹內容位置
轉到編輯點 - 按Ctrl + Alt +→或按Ctrl + Alt +←
使用縮寫包裹 - ^ W / Shift鍵+ Ctrl鍵+ G
選擇“屬性值”html和css都可以選 - “ ⇧⌘。或⇧⌘ / 按Ctrl + Shift +。或Shift + Ctrl + ,
切換注釋 - ⇧⌘/ / Shift + Ctrl鍵+ /
拆分/加入標簽 - ⇧⌘ / Shift + Ctrl +`
刪掉標簽間的內容，並合並標簽開始和結束符。生成標簽的開始和結束符。
刪除標記 - ⌘' / Ctrl + Shift +;
快速刪掉標簽並保留標簽中的內容調整縮進。
更新圖片大小 - ⇧^ I / 按Ctrl + U
html和css中設置默認圖片大小
評估數學表達式 - ⇧⌘Ÿ / Shift鍵+ Ctrl鍵+ Y
2*4 or 10/2 做簡單的加減乘除算術
體現價值CSS - ⇧⌘直徑 / 按Ctrl + Shift + R
統一修改css3數據，修改透明數值。
編碼/解碼圖像數據：URL - ⇧^ D / 按Ctrl +'
圖片轉編碼
遞增/遞減編號操作：
改變數值
增量為1：按Ctrl +↑
減1：按Ctrl +↓
增量0.1：Alt +↑
遞減0.1：Alt +↓
10增量：⌥⌘↑ / Shift鍵+ Alt +↑
遞減10：⌥⌘↓ / Shift鍵+ Alt +↓
補充：
html:4t
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
html:4s
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
html:xt
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
html:xs
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
html:xxs
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">