一、快速編寫HTML代碼

1.? 初始化

HTML文檔需要包含一些固定的標簽，比如、、等，現在你只需要1秒鐘就可以輸入這些標簽。比如輸入“!”或“html:5”，然后按Tab鍵：

html:5 或!：用于HTML5文檔類型

html:xt：用于XHTML過渡文檔類型

html:4s：用于HTML4嚴格文檔類型

2.2.? 輕松添加類、id、文本和屬性

連續輸入元素名稱和ID，Emmet會自動為你補全，比如輸入p#foo：

3.? 嵌套

現在你只需要1行代碼就可以實現標簽的嵌套。

>：子元素符號，表示嵌套的元素

+：同級標簽符號

^：可以使該符號前的標簽提升一

效果如下圖所示：

4.? 分組

你可以通過嵌套和括號來快速生成一些代碼塊，比如輸入(.foo>h1)+(.bar>h2)，會自動生成如下代碼：

5.? 隱式標簽

聲明一個帶類的標簽，只需輸入div.item，就會生成

在過去版本中，可以省略掉div，即輸入.item即可生成

現在如果只輸入.item，則Emmet會根據父標簽進行判定。比如在中輸入.item，就會生成

下面是所有的隱式標簽名稱：

li：用于ul和ol中

tr：用于table、tbody、thead和tfoot中

td：用于tr中

option：用于select和optgroup中

6.? 定義多個元素

要定義多個元素，可以使用*符號。比如，ul>li*3可以生成如下代碼：

7.? 定義多個帶屬性的元素

如果輸入 ul>li.item$*3，將會生成如下代碼：

二、CSS縮寫

1.? 值

比如要定義元素的寬度，只需輸入w100，即可生成

Css代碼 ?width:?100px;

除了px，也可以生成其他單位，比如輸入h10p+m5e，結果如下：

Css代碼

height:10%;

margin:?5em;

單位別名列表：

p 表示%

e 表示 em

x 表示 ex

一些其他的屬性，比如background-image、border-radius、font、@font-face,text-outline、text-shadow等額外的選項，可以通過“+”符號來生成，比如輸入@f+，將生成：

Css代碼

@font-face?{

font-family:'FontName';

src:?url('FileName.eot');

src:?url('FileName.eot?#iefix')?format('embedded-opentype'),

url('FileName.woff')?format('woff'),

url('FileName.ttf')?format('truetype'),

url('FileName.svg#FontName')?format('svg');

font-style:?normal;

font-weight:?normal;

}

3.? 模糊匹配

如果有些縮寫你拿不準，Emmet會根據你的輸入內容匹配最接近的語法，比如輸入ov:h、ov-h、ovh和oh，生成的代碼是相同的：

Css代碼 ?overflow:?hidden;