emmet(原名zen coding)：是文字編輯器的一款輔助輸入HTML和CSS程式碼的外掛。現在可支援以下的文字編輯器：
Sublime Text 2
TextMate 1.x
Eclipse/Aptana
Coda 1.6 and 2.x
Espresso
Chocolat (可以通過 “Install Mixin” 對話方塊安裝)
Komodo Edit/IDE ( Tools → Add-ons)
Notepad++
PSPad
CodeMirror2/3
Brackets
在上面列表點選你目前使用的編輯器，就可以獲得對應的外掛檔案，安裝之後就可以使用 Emmet 的相關功能了。由於 Sublime text 2 是目前最好最強大的前端開發程式碼編輯器，所以本文就以 Sublime text 2文件編輯器中使用為例，講解基礎語法。

1，初始化文件

當我們開始編寫一個html文件時，有些固定的標籤是可以快速生成的。在sublime text2中新建檔案，另存為html格式。輸入：
！或者html:5 , 然後tab鍵或者Ctrl+e 快速載入HTML5文件。他型別的文件：
html:5 或!：用於HTML5文件型別
html:xt：用於XHTML過渡文件型別
html:4s：用於HTML4嚴格文件型別

2，單個DOM元素

在html文件中輸入以下格式，然後按下tab鍵可以快速補全新建的元素，並賦值相應的屬性：
2.1，div#myDiv 按Tab鍵

<div id="myDiv"></div
 
>

2.2，“.”號表示class 名

div.myDiv

<div class="myDiv"></div>

2.3,“#”號表示Id

div#testId.testName

<div id="testId" class="testName"></div>

2.4，大括號{}內新增的是內容

div{thisismydiv}

<div>thisismydiv</div>

2.5，方括號[]可賦值屬性。

scrip[src=”/local/my/.js”]

<script src="/local/my/.js"
 
></script>

3，DOM元素巢狀

emmet的補全功能很強大，一行程式碼就可以實現DOM元素的巢狀，我們首先熟悉下元素關係符號：

：子元素符號，表示巢狀的元素
+：同級標籤符號
^：可以使該符號後的標籤提升一級

下面給出了例子, 輸入以下格式，然後按下Tab鍵，快速產生巢狀元素：

3.1，div>span

<div><span></span></div>

3.2，div#parDiv>div.childnode
然後Tab

<div id="parDiv">
        <div class="childnode"></div>
    </div>

3.3，div+div+div

<div></div>
<div></div>
<div></div>

3.4，div^p

<div></div>
<p></p>

3.5，span>div^div#sss

<span>
    <div></div>
</span>
<div id="sss"></div>

注意與： span>div+div#sss 的區別：

<span>
    <div></div>
    <div id="sss"></div>
</span>

4，巢狀結合括號

巢狀加上使用括號（），可快速生產一些程式碼塊：

div#block1>span)+(div#block2>ul>li)+(.block3>h1) 接著按下Tab鍵

div id="block1"><span></span></div>
<div id="block2">
    <ul>
        <li></li>
    </ul>
</div>
<div class="block3">
    <h1></h1>
</div>

注意：以上id為block3的標籤還使用了隱式標籤。輸入“.item”即可生成

<div class="item"></div>

現在，emmet還會根據上下文判斷隱式標籤給出div還是其他，如:

ul>.myitem

<ul>
    <li class="myitem"></li>
</ul>

這裡有素有隱式標籤名稱：
li：用於ul和ol中
tr：用於table、tbody、thead和tfoot中
td：用於tr中
option：用於select和optgroup中

5，定義多個元素

這個是個很有用的功能。使用*定義多個元素，下面在例子中學習，同樣的，輸入公式後按Tab鍵，就不一一標註了：

5.1， ul>li*3

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

5.2，結合屬性使用：div#outer>div#childDiv*3

<div id="outer">
    <div id="childDiv"></div>
    <div id="childDiv"></div>
    <div id="childDiv"></div>
</div>

5.3 使用$來依次編號各元素：div>ul>li.item$*5

<div>
    <ul>
        <li class="item1"></li>
        <li class="item2"></li>
        <li class="item3"></li>
        <li class="item4"></li>
        <li class="item5"></li>
    </ul>
</div>

5.4 使用”$@-“符號號，來反向編號：div>ul>[email protected]*5

<div>
    <ul>
        <li class="item5"></li>
        <li class="item4"></li>
        <li class="item3"></li>
        <li class="item2"></li>
        <li class="item1"></li>
    </ul>
</div>

5.5 使用“$@數字”從指定的數字開始編號，例如“$@3”從3開始標號：
div>ul>li#[email protected]*6

<div>
    <ul>
        <li id="itme3"></li>
        <li id="itme4"></li>
        <li id="itme5"></li>
        <li id="itme6"></li>
        <li id="itme7"></li>
        <li id="itme8"></li>
    </ul>
</div>

記住以上公式，能夠大大提高寫程式碼的效率。