Emmet是一款編輯器插件，支援多種編輯器支援。在前端開發中，Emmet 使用縮寫文法快速編寫 HTML、CSS 以及實作其他的功能，極大的提高前端開發效率。
下載下傳位址http://emmet.io/download/
縮寫
Emmet使用特殊的表達式Abbreviations，也就是縮寫：這種特殊的表達式會被Emmet解析并轉義成結構化的代碼塊。Emmet使用類似CSS選擇器的文法來描述元素在DOM樹節點的位置和屬性。
例如
#page>div.logo+ul#navigation>li*5>a{Item $} 會被轉義成
<div id="page">
<div class="logo"></div>
<ul id="navigation">
<li><a href="">Item 1</a></li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 3</a></li>
<li><a href="">Item 4</a></li>
<li><a href="">Item 5</a></li>
</ul>
</div> HTML元素
在Emmet中可以使用元素名例如 div 或 p 生成HTML标簽。Emmet沒有預設任何标簽名，是以可以使用任何可用名稱來生成HTML标簽：div → <div></div> 或 foo → <foo></foo>
嵌套操作符
嵌套操作用來生成元素的DOM樹中的兄弟節點或子節點
child：>
使用 > 生成元素子節點
div>ul>li 會被轉義成
<div>
<ul>
<li></li>
</ul>
</div> Sibling: +
使用 + 生成元素兄弟節點
div+p+bq 會被轉義成
<div></div>
<p></p>
<blockquote></blockquote> Climb-up: ^
使用 ^ 在元素父節點生成新的元素節點
操作符 ^ 的作用和 > 剛好相反
用 > 可以在子級生成新的節點
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>
<blockquote></blockquote>
</div> 用n個 ^ ，就可以在第n父級生成新的節點
div+div>p>span+em^^^bq 會被轉義成
<div></div>
<div>
<p><span></span><em></em></p>
</div>
<blockquote></blockquote> Multiplication: *
使用 * 生成多個相同元素
ul>li*5 會被轉義成
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul> Grouping: ()
圓括号 () 是Emmet的進階用法，用來實作比較複雜的DOM結構
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> 還可以嵌套使用圓括号 ()
(div>dl>(dt+dd)*3)+footer>p 會被轉義成
<div>
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
</div>
<footer>
<p></p>
</footer> 屬性操作符
屬性操作符用來修改元素的屬性
ID 和 CLASS
Emmet給元素添加ID和CLASS的方法和CSS的文法類似
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> 自定義屬性
使用[attr]标記來添加自定義屬性
td[title="Hello world!" colspan=3] 會被轉義為
<td title="Hello world!" colspan="3"></td> 元素編号
使用 $ 操作符可以對重複元素進行有序編号
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> 還可以用多個 $ 定義編号的格式
ul>li.item$$$*5 會被轉義為
<ul>
<li class="item001"></li>
<li class="item002"></li>
<li class="item003"></li>
<li class="item004"></li>
<li class="item005"></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 可以改變編号基數
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> 還可以組合使用上面的修飾符
ul>li.item$@-3*5 會被轉義為
<ul>
<li class="item7"></li>
<li class="item6"></li>
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
</ul> 文本操作符
Emmet使用 Text:{} 給元素添加文本内容
a{Click me} 會被轉義為
<a href="">Click me</a> 注意： {text} 在Emmet中是被當成單獨的元素來解析的，但當和其他元素結合使用時會有特殊的含義
例如：
a{click} 和 a>{click
會輸出相同的結果，但
a{click}+b{here} 和 a>{click}+b{here}
輸出的結果則不一樣
<!-- a{click}+b{here} -->
<a href="">click</a><b>here</b>
<!-- a>{click}+b{here} -->
<a href="">click<b>here</b></a> 在 a>{click}+b{here} 中， <b> 元素是<a>元素的子節點。這個就是差別：當 {text} 直接寫在元素後面時，并不會改變父元素的上下文。
下面是一個更複雜的案例:
p>{Click }+a{here}+{ to continue} 會被轉義為
<p>Click <a href="">here</a> to continue</p> 而
p{Click }+a{here}+{ to continue} 則會被轉義為
<p>Click </p>
<a href="">here</a> to continue 