Emmet 是一個可用在許多流行文字編輯器上的極大簡化HTML和CSS工作流程的外掛。
Emmet的所有功能，都是在輸入後按tab鍵，就會顯示出你所想要的。
本文中所有例子是基於windows下的Sublime Text3
HTML
文件初始格式化
html:5
->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
元素
可以用任何元素名字來建立標籤
div -> <div></div>
巢狀操作
child：>
使用>符號，將大於號右面元素巢狀在左面的元素之中。
div>ul>li
->
<div>
<ul>
<li></li>
</ul>
</div>
Sibling: +
使用+符號，使兩者成為兄弟元素。
div + p
->
<div></div>
<p></p>
Climb-up: ^
使用^，可以讓元素在DOM中向上升一級。
div+div>p>span^p
->
<div></div>
<div>
<p><span></span></p>
<p></p>
</div>
多個^,可以升多級。
div+div>p>span^^p
->
<div></div>
<div>
<p><span></span></p>
</div>
<p></p>
multiplication:*
用*可以定義需要建立多少次元素。
ul>li*5
->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
Grouping:()
在複雜的縮寫中，使用()將同一個父元素的元素連在一起。
(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
同css一樣，用#表示ID，.表示類。
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="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>
@後加數字，改變開始的數字
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>
Text:{}
元素後加{}，就可以給元素新增文字值。
a{Click me}
->
<a href="">Click me</a>
注意{}的位置
p>{Click }+a{here}+{ to continue}
->
<p>Click <a href="">here</a> to continue</p>
注意格式
有的時候為了閱讀方便，會加入空格，可是這樣會導致Emmet無法使用。
(header > ul.nav > li*5) + footer
上例就無法使用，如果將元素之間空格取消就可以了。
隱式標籤名
在不同標籤名下使用縮寫，會生成指定的標籤。
- li for ul and ol
- tr for table, tbody, thead and tfoot
- td for tr
- option for select and optgroup
<div>.item</div>
->
<div class=item></div>
<ul>.item</ul>
->
<ul><li class="item"></li></ul>
生成Lorem ipsum文字
Lorem ipsum指一篇常用於排版設計領域的拉丁文文章，主要目的是測試文章或文字在不同字型、版型下看起來的效果。通過Emmet，你只需輸入lorem 或 lipsum即可生成這些文字。還可以指定文字的個數，
CSS
帶單位的值
使用整數的縮寫，會自動在後面新增px單位
m10 -> margin:10px;
m10-20 -> margin:10px 20px;
m-10--20 -> margin:-10px -20px;
使用浮點值的縮寫,會自動在後面新增em單位
m1.5 -> margin:1.5em;
使用字母字元，就會自動明確單位
m1.5ex -> margin:1.5ex;
如果已經明確單位了，就不需要使用連字元了
m10ex20em -> margin:10ex 20em;
m10ex-5 -> margin:10ex -5px;
值的別名
p ->
顏色
Emmet支援十六進位制的顏色，
c#3 -> color:#333;
#是一個值的分離器，所以不需要連字元來分離。
bd5#0s -> border:5px #000 solid;
可以寫一個、兩個、三個字元作為顏色的值
#1 -> #11111
#e0 -> #e0e0e0
#fc0 -> #ffcc00
無單位屬性
一些CSS屬性是沒有單位，
lh2 -> line-height: 2;
fw400 -> font-weight: 400;
!important
可以在css縮寫後加!，會自動新增!important
p! -> padding: !important;
p!+ m10e -> padding: !important; margin : 10em;
供應商字首
屬性前加-，會自動新增供應商字首，
-bdrs ->
-webkit-border-radius: ;
-moz-border-radius: ;
-ms-border-radius: ;
-o-border-radius: ;
border-radius: ;
輸入之後，只需要輸入一次數值，就會給所有屬性新增此數值。
如果不需要所有供應商字首，則使用縮寫來指定
- w: webkit
- m: moz
- s: ms
- o: o
-wm-bdrs ->
-webkit-border-radius: ;
-moz-border-radius: ;
漸變
使用lg(...)，就會自動新增漸變屬性
lg(left,#0,top,black)
->
background-image: -webkit-linear-gradient(left, #0, top, black);
background-image: -o-linear-gradient(left, #0, top, black);
background-image: linear-gradient(to right, #0, top, black);
參考資料
Emmet官方文件
Emmet：HTML/CSS程式碼快速編寫神器
emmet, 讓你的 html 飛起來