Emmet插件仿照CSS語法來生成代碼，使用emmet語法可以大大提高HTML/CSS代碼書寫的速度。
下面就來介紹一下Emmet語法到底應該如何書寫;
當熟悉了Emmet的縮寫語法之后，可能會想一些格式來生成更清晰可讀的縮寫，例如，在元素和運算符之間使用空格隔開
(header > ul.nav > li*5) + footer
注意：這種寫法是錯誤的，空格是Emmet停止縮寫解析的標志符。很多人會誤認為每個縮寫都應該寫在新的一行上，實際上，可以在文本的任意位置輸入和擴展縮寫。
還有光標定在Emmet縮寫之后的那個位置，進行Tab，縮寫就會解析到哪里。
div>span*3
（光標放在了span之后）
注意：不需要寫復雜的縮寫。不要認為在 web 編程中”鍵入“是最慢的運算。想快速找出構建單個的復雜縮寫比構造和鍵入一些較短較簡單的縮寫更慢。
一、HTML代碼
（一）HTML5文檔基本結構（！）
想要快速生成一個HTML5的文檔，包含<meta>、<html>、<body>、<title>、<head>、<!DOCTYPE html>的一個基本結構只需要 感嘆號（！）和 Tab 鍵 就可以實現
- html:5 或!：用於HTML5文檔類型
- html:xt：用於XHTML過渡文檔類型
- html:4s：用於HTML4嚴格文檔類型
（二）頁面中添加添加類、id、文本和屬性
1、添加id（#）
輸入 p#box （給p元素添加一個名為box的id）
p#box
2、添加類class（.）
輸入 .box（給div元素添加一個名為box的class）
.box
輸入 p.box （給p元素添加一個名為box的class）
p.box
3、添加文本（{ }）和屬性（[ ]）
輸入 h1{neirong} 和 Tab鍵 （為h1元素添加內容 neirong）
h1{nierong}
輸入 a[href=#] 和Tab鍵（為a元素加上href屬性，並且為href加上屬性值#）
a[href=#]
（三）元素嵌套（子節點（>），兄弟節點（+），上級節點（^））
>：子元素符號，表示嵌套的元素
+：同級標簽符號
^：可以使該符號前的標簽提升一行
嵌套子元素（>）
div>span
生成同級元素（+）
div+span
使符號前的標簽提升一行，上級節點（^）
div>ul>li^span (這里的^是接在li后面所以span在li的上一級，與ul成了兄弟關系,當然兩個 ^^ 就是上上級）
div>ul>li^div
（四）重復指令（*）
*號后面添加數字表示重復的元素個數
ul>li*3
（五）分組（( )）
可以通過嵌套和括號來快速生成一些代碼塊，括號里面的內容為一個代碼塊，表示與括號內部嵌套和外面的的層級無關。
div>(ul>li>a)+div>p
（六）隱式標簽
這個標簽沒有指令，而是部分標簽可以不使用輸入標簽，直接輸入指令，即可識別父元素
隱式標簽有以下幾個：
li：用於 ul 和 ol 中
tr：用於 table、tbody、thead 和 tfoot 中
td：用於 tr 中
例1：
.box
例2：
ul>.box$*3
（七）遞增（$）
$代表一位數，后面更上*數字就代表從1遞增到填寫的數字；
1、使用 * 運算符可以重復生成元素，如果帶 $ 就可以為它們編號。把 $ 放在元素名、屬性名或者屬性值中，將為每個元素生成正確的編號
select>.box$*3
2、使用多 $ 可以填充前導的零
select>.box$$$*5
3、改變編號的基數和方向
使用@，可以改變數字的走向（升序或降序）和基數（例如啟始值）。在$ 后添加 @- 來改變數字的排序。
（從3開始，倒序排列）
select>.box$@-*3
4、在 $ 后面添加 @N(@數字) 改變編號的基數：
（從3開始，共5個數）
select>.box$@3*5
二、CSS簡寫
（一）屬性值
一般長度單位默認的都是px，除了px之外也可以生成其他的單位：
單位名稱：
- p 表示%
- e 表示 em
- x 表示 ex
在css樣式中輸入 w100 ，可以生成 元素的寬度width：100px；
w100
除了寬度外，其他需要設置尺寸的屬性還可以這樣寫：（w—width、h—height、m—margin、p—padding、b—bottom、l—left、r—right）
w10+h10p+p10x+m10e+b10p+l10p+r10x
（二）附加屬性
bc
一些其他的屬性，比如background-image、border-radius、font、@font-face,text-outline、text-shadow等額外的選項，可以通過“+”符號來生成
bc+
（三）模糊匹配
有些屬性模糊不清，Emmet會根據你的輸入內容匹配最接近的語法，比如輸入ov:h、ov-h、ovh和oh，生成的代碼是相同的：
oh
（四）廠商前綴
如果輸入非W3C標准的CSS屬性，Emmet會自動加上供應商前綴，比如輸入transform，再使用Tab鍵
transform
也可以在任意屬性前加上“-”符號，也可以為該屬性加上前綴。比如輸入-super-foo：
-sdra
如果不希望加上所有前綴，可以使用縮寫來指定，比如-wm-trf表示只加上-webkit和-moz前綴
-wm-trf
前綴縮寫如下：
- w 表示 -webkit-
- m 表示 -moz-
- s 表示 -ms-
- o 表示 -o-
（五）漸變屬性
輸入lg(left, #fff 50%, #000)，會生成如下代碼：
lg(left, #fff 50%, #000)
參考博客：