Emmet學習筆記

Emmet的前身是大名鼎鼎的Zen coding，若是你從事Web前端開發的話，對該插件必定不會陌生。它使用仿CSS選擇器的語法來生成代碼，大大提升了HTML/CSS代碼編寫的速度，固然Sublime Text也支持改插件，默認在Sublime Text3種自帶了這個插件。

下載Sublime Text3：http://download.csdn.net/detail/u011127019/9596257

1、快速格式化Html代碼，輸入內容而後按Tab鍵（注意在輸入內容的結尾處）

1.初始化，好比輸入「!」或「html:5」，而後按Tab鍵

輸入標籤，而後Tab鍵

div

<div></div>

2.輕鬆添加類、id、文本和屬性

好比輸入：div#person.top

自動生成：

<div id="person" class="top"></div>

好比輸入：h1{標題}

自動生成：

<h1>標題</h1>

好比輸入：a[href=#]

<a href="#"></a>

3.嵌套

如今你只須要1行代碼就能夠實現標籤的嵌套。

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

• +：同級標籤符號

• ^：能夠使該符號前的標籤提高一行

效果以下圖所示：

4.分組

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

<div class="foo">  

  <h1></h1>  

</div>  

<div class="bar">  

  <h2></h2>  

</div>

5.隱式標籤

聲明一個帶類的標籤，只需輸入div.item，就會生成<div class="item"></div>。
在過去版本中，能夠省略掉div，即輸入.item便可生成<div class="item"></div>。如今若是隻輸入.item，則Emmet會根據父標籤進行斷定。好比在<ul>中輸入.item，就會生成<li class="item"></li>。
下面是全部的隱式標籤名稱：

• li：用於ul和ol中

• tr：用於table、tbody、thead和tfoot中

• td：用於tr中

• option：用於select和optgroup中

6.定義多個元素

要定義多個元素，能夠使用符號。好比，ul>li3能夠生成以下代碼：

<ul>  

  <li></li>  

  <li></li>  

  <li></li>  

</ul>

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

若是輸入 ul>li.item$*3，將會生成以下代碼：

<ul>  

  <li class="item1"></li>  

  <li class="item2"></li>  

  <li class="item3"></li>  

</ul>

更多請參考：http://www.iteye.com/news/27580

文檔：http://docs.emmet.io/（其中包含了一個Demo，你能夠試驗文中所提到的這些縮寫）

Via smashingmagazine

更多技術乾貨—Jimmy的技術樂園