一、簡寫語法
Emmet 用和 CSS 選擇器相似的語法來描述元素的嵌套層級關系和屬性，實現 HTML/XML/CSS 等代碼的智能自動補全。
其通過文件名后綴識別文件類型，從而使用對應的自動補全語法。默認自動補全快捷鍵為制表符（Tab）。
下文中的“自動補全”均指“按下快捷鍵后自動補全”。
注意：Emmet 語法中的空格表示結束解析，所以書寫語句中不能出現空格。
1、元素
在編輯器中輸入元素名稱，即可自動補全生成 HTML 標簽，即使不是標准的 HTML 標簽。
// before
div
foo
// after
<div></div>
<foo></foo>
輸入 ! 或者 html:5 可以自動補全為 HTML5 基本結構。想要輸出 HTML4 文本類型申明可以輸入 html:4s 或者 html:4t 。
// before ! (或html:5) // after <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
2、嵌套操作
1）child：使用 “>” 生成子元素
// before div>ul>li // after <div> <ul> <li></li> </ul> </div>
2) Sibling: 使用符號 “+” 生成兄弟元素
// before div+p+bq // after <div></div> <p></p> <blockquote></blockquote>
3) Climb-up:使用 “^” 生成父元素，與 “>” 相反
// before div+div>p>span+em^bq // after <div></div> <div> <p><span></span><em></em></p> <blockquote></blockquote> </div>
你甚至可以使用多個 “^”。
// before div+div>p>span+em^^^bq
// after <div></div> <div> <p><span></span><em></em></p> </div> <blockquote></blockquote>
4) Multiplication:使用 “*” 操作符生成多個元素
// before div>ul>li*5 // after <div> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div>
5) Grouping:使用 “()” 操作符將元素分組，實現更復雜的簡寫任務
// before
// "+" 后面的元素與括號中的第一個元素屬於兄弟關系 div>(header>ul>li*2)+footer>p //after <div> <header> <ul> <li></li> <li></li> </ul> </header> <footer> <p></p> </footer> </div>
3. 屬性操作
在簡寫時就可以為元素設置屬性。
1) id 與 class
簡寫時，元素與 id 屬性值之間用 “#” 分隔，與 class 屬性值之間用 “.” 分隔。
// before div#header+div.page+div#footer.class1.class2.class3 // after <div id="header"></div> <div class="page"></div> <div id="footer" class="class1 class2 class3"></div>
2) 其他屬性
使用 [attr] 標記添加其他屬性。
// before td[title='hello' colspan=3] // after <td title="hello" colspan="3"></td>
注意：
- 方括號中可添加任意數量的屬性
不給定屬性值，則屬性值為""。td[colspan title]將得到 <td colspan="" title=""></td>- 屬性值可用單引號或雙引號，輸出統一為雙引號
- 如果屬性值中沒有空格，則引號可省略
3) 為條目編號
使用 “*” 符號生成的多個元素，可用 “$” 操作符實現從1到 N 自動編號。
// before li.item$*3 // after <li class="item1"></li> <li class="item2"></li> <li class="item3"></li>
可在 “$” 后添加 “@n” 修改編號的起始值為n。
// before li.item$@3*3 // after <li class="item3"></li> <li class="item4"></li> <li class="item5"></li>
可在 “$” 后添加 “@-” 修改編號的方向。
// before li.item$@-3*3 // after <li class="item5"></li> <li class="item4"></li> <li class="item3"></li>
4. 添加文本
使用花括號 “{}” 操作符為元素添加文本節點。
// before a[href=me.htm]{click me} // after <a href="me.htm">click me</a>
因為文本也是節點，所以 a[href=me.htm]{click me} 與 a[href=me.htm]>{click me} 等價。
但有多個元素時則要注意。
// before a[href=me.htm]{click me}+p{ok} a[href=me.htm]>{click me}+p{ok} // after <a href="me.htm">click me</a> <p>ok</p> <a href="me.htm">click me <p>ok</p> </a>
Emmet 的簡寫方式在 snippets.json 中定義，更多使用方式可通過查看該文件了解。
對於 visual studio code 編輯器來說，該文件路徑為： [安裝根目錄]\Microsoft VS Code\resources\app\node_modules\emmet\lib\snippets.json
參考：Emmet官方文檔