安裝Emmet插件

一旦你寫好縮寫之后，按一下tab鍵就能生成你所請求的代碼

創建初始文檔

任何一個HTML文件，都具有一些默認的文檔結構。使用Emmet來創建需要的時間不到一秒。只要輸入!或html:5，然后點擊tab鍵，你就會看到一個HTML5的doctype默認標簽。

html:5或!：HTML5文檔類型
html:xt：XHTML過渡型文檔類型
html:xs：XHTML嚴格型文檔類型
html:4t：HTML4過渡型文檔類型
html:4s：HTML4嚴格型文檔類型

子元素

使用>運算符可以用來生成彼此嵌套的元素：
section>div>p
上面的代碼會生成下面的代碼：

相鄰元素

使用+運算符可以用來生成彼此相鄰的元素：
section+div+p
上面代碼會生成下面的代碼：

返回上一層

使用^運算符，可以讓你的代碼返回上一層。當你使用>嵌套元素時，想讓后面的回到上一層，那么這個方法很適用。
section>div>p>a^p
這個縮寫將兩個段落元素都放置在div內，但只有第一個段落里會包含一個鏈接。

乘法

如果你想一次性生成多個相同的元素，比如列表中的li，那么就可以使用乘法運算符
ul>li*5
上面代碼會生成5個li：

組合

為了更有效的利用嵌套，我們常會制作一些代碼片段。在Emmet中你可以通過()將一個塊組合在一起，來看一個簡單的示例
ul>(li>a)*3
上面的代碼就會生成3個li，而且每個li中套了一個a

快速添加類名、ID、文本和屬性

在Emmet中，還有一個功效，能快速幫助你添加類名、ID、文本和屬性。

使用E#ID添加ID名
使用E.class添加類名
使用E[attr]添加屬性
使用E{text}添加文本

省略標簽名

在Emmet中可以省略標簽名，默認情況下，如.item和div.item起到的作用是一致的
。在實際中還有幾種情況：

ul和 ol中輸入指的是li
table、tbody、thead和tfoot指的是tr
tr中指的是td
select和optgroup指的是option

Emmet和CSS

屬性

CSS提供了屬性的值，比如font-size，margin和 padding等等：

Emmet定義了所有已知的CSS屬性和縮寫。所以border-bottom縮寫是bdb，border-top縮寫是bdt。正如下面的示例font-size縮寫是fz：
假設你在你的編輯器中輸入fz，然后按一下tab鍵，Emmet就像一個魔法師一樣將縮寫變成有效的CSS，并且放在你的光標之處。

13.gif

屬性值

現在我們已經了解了CSS的屬性，它只需要添加一個值。這是通過一個組合縮寫和所需要的值一起來完成。例如，fz18將輸出font-size:18px。你不需要輸入px，因為Emmet將會其單位是px。如果一個項目沒有一個單位（如font-weight），Emmet會很聰明，他不會添加像素單位。

單位

如果你在CSS不經常使用的像素(px)單位，那會是什么？是em、rem、%、ex和px嗎？那么這些單位在Emmet中都是可以使用的。在Emmet中每一個單位都有其縮寫形式：

px→ 默認
p→ %
e→ em
r→ rem
x→ ex

要使用一個單位，只需要在值的后面使用縮寫的單位值。下面的例子是使用em定義font-size：

多個單位

CSS中的某些屬笥，比如margin，允許多個值。在Emmet中要做到這一點，只需要每個值之間使用破折號(-)。來看看下面的例子，給body定義margin的四個值：

顏色

在Emmet中使用#前綴，后面緊跟顏色值，但不同的字符數將會輸出不同的十六進制代碼。來看一些例子：

＃1→ ＃111111
＃E0→ ＃e0e0e0
＃FC0→ ＃FFCC00

下面定義通過c#2定義body的顏色值，將會輸出#222：

!important

盡管在CSS中!important并不經常使用，但在Emmet也帶有一定的縮寫。添加!就可以自動生成：

多屬性

現在我們具Emmet的CSS特性的一個基本了解，也是將它們放在一起的時候。就類似于Emmet和HTML中的相鄰元素的功能。可以使用加號+運算符來創建多個屬性。我們來看一個簡單的示例：

示例

記住，你可以使用所有縮寫或者將其分開。這并不是很重要，關鍵的是你要使用得正確，它能更容易讓你編寫你的CSS。這里有一個動畫，他給div.panel創建一些樣式：