emmet 是一個提高前端開發效率的一個工具。
emmet允許在html、xml、和css等文檔中輸入縮寫，然后按tab鍵自動展開為完整的代碼片段。
一、Sublime Text 3 安裝插件Emmet
點擊菜單欄的首選項
->Package Control
-> 在彈出命令行中輸入ip，在列表中點擊“install Package”
-> 彈出命令行輸入框，輸入“emmet”進行安裝
本人安裝完后提示
Error while loading PyV8 binary:exit code 4
Try to manually install PyV8 from
https://github.com/emmetio/pyv8-binaries
解決方法：
按提示打開https://github.com/emmetio/pyv8-binaries，選擇自己版本下載pyv8，本人下載pyv8-win64-p3.zip。
點擊Sublime Text 3菜單欄的首選項->瀏覽插件目錄，打開Packages目錄，再切換到上一層Installed Packages目錄，
新建目錄PyV8，把pyv8-win64-p3.zip解壓后的文件放進去，重啟ST編輯器。
二、emmet的用法
emmet插件的官方文檔： https://docs.emmet.io/abbreviations/syntax/
新建一個html文件
1、元素
可以使用元素的名稱（如DIV或P）生成HTML標記。
如輸入div按tabl鍵后，自動生成<div></div>。
如果輸入！，則自動生成一個HTML5基本結構
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
2、嵌套操作符
（1）子元素：>
<!-- div>ul>li --> <div> <ul> <li></li> </ul> </div>
備注：div>ul>li的中間和后面不能有空格，否則按tab鍵后emmet 會停止解析，后面的例子也一樣不能有空格。
（2）兄弟元素：+
<!-- div+p+bq --> --> <div></div> <p></p> <blockquote></blockquote>
（3）向上一層：^，和>相反，可以多次使用
<!-- div+div>p>span+em --> <div></div> <div> <p><span></span><em></em></p> </div> <!-- div+div>p>span+em^^^bq --> <div></div> <div> <p><span></span><em></em></p> </div> <blockquote></blockquote>
（4）乘法：*，重復指定次數生成元素
<!-- ul>li*5 --> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
（5）分組：()，括號里面的內容為一個代碼塊，括號后面的元素與括號的第一個元素在同一級別
<!-- div>(header>ul>li*2>a)+footer>p --> <div> <header> <ul> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </header> <footer> <p></p> </footer> </div>
3、屬性操作符
（1）id和class
<!-- div#header+div.page+div#footer.class1.class2.class3 --> <div id="header"></div> <div class="page"></div> <div id="footer" class="class1 class2 class3"></div>
（2）自定義屬性：[attr]
<!-- td[title="Hello world!" colspan=3] --> <td title="Hello world!" colspan="3"></td>
（3）項目編號：$
<!-- ul>li.item$*5 --> <ul> <li class="item1"></li> <li class="item2"></li> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li> </ul>
使用任意個$在數字前加任意個0
<!-- ul>li.item$$*5 --> <ul> <li class="item01"></li> <li class="item02"></li> <li class="item03"></li> <li class="item04"></li> <li class="item05"></li> </ul>
倒序，在$后面加@-
<!-- ul>li.item$@-*5 --> <ul> <li class="item5"></li> <li class="item4"></li> <li class="item3"></li> <li class="item2"></li> <li class="item1"></li> </ul>
指定開始的序號，在$后面加@N，N為開始的序號
<!-- ul>li.item$@3*5 --> <ul> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li> <li class="item6"></li> <li class="item7"></li> </ul>
4、文本：{}，為元素添加文本
<!-- a{Click me} --> <a href="">Click me</a>
因為文本也是節點，所以 a[href=1.htm]{click me} 與 a[href=1.htm]>{click me} 等價。
但是有多個元素時生成的結果會不同，用子元素>后面有元素時，也會放在a元素里面，例如
<!-- a{click}+b{here} --> <a href="">click</a><b>here</b> <!-- a>{click}+b{here} --> <a href="">click<b>here</b></a>