在前端開發的過程中，編寫 HTML、CSS 代碼始終占據了很大的工作比例。特別是手動編寫 HTML 代碼，效率特別低下，因為需要敲打各種“尖括號”、閉合標簽等。而現在 Emmet 就是為了提高代碼編寫的效率而誕生的，它提供了一種非常簡練的語法規則，然后立刻生成對應的 HTML 結構或者 CSS 代碼，同時還有多種實用的功能幫助進行前端開發。
你可能聽說過一款強大的功能相似的工具：Zen Coding，那個比較老了，而現在的 Emmet 則是 Zen Coding 的升級版，由 Zen Coding 的原作者進行開發等。 Emmet 嚴格意義上來說，並不是一款軟件或者工具，它是一款編輯器插件，必須要基於某個編輯器使用。目前它支持如下編輯器：
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
<textarea>
CodeMirror2/3
Brackets
在上面列表點擊你目前使用的編輯器，就可以獲得對應的插件文件，安裝之后就可以使用 Emmet 的相關功能了。由於 Sublime text 2 是目前最好最強大的前端開發代碼編輯器，所以本文就以 Sublime text 2 為例，講解 Emmet 的安裝、基礎語法。
在 Sublime text 2 中安裝 Emmet
Sbulime text 2 安裝插件肯定要通過 Package Control 這個插件了，如果你還沒有安裝這個插件，抓緊先去安裝一下吧。安裝完成之后，我們摁下“shift + ctrl + p”呼出面板，輸入“pci”即可鎖定“Package Control：Install Package”這個功能，回車之后就可以看到一個列表，我們繼續輸入“emmet”即可找到這個插件，回車之后等待一會就安裝完成了。
Visual Studio中的 Emmet
在visual studio 中的插件管理中搜索Web Essentials這樣一個插件，直接安裝就行了。
開始使用 Emmet
Emmet 可以快速的編寫 HTML 和 CSS 以及實現其他的功能。它根據當前文件的“語言”來判斷要使用 HTML 語法還是 CSS 語法來解析。例如當前文件的后綴為 .html 那 Sublime text 2 就會用 HTML 的方式來解析高亮這個文件，Emmet 也會根據 HTML 的語法把你輸入的指令編譯成 HTML 結構。如果是在一個 .c 的 C語言 文件中，你根據 Emmet 的語法編寫出來的指令，是不會被編譯的。
此外，在沒有后綴的文件中，你可以摁下“shift + ctrl + p”呼出面板，輸入“seth”就可以選擇當前文檔是使用 HTML 的模式還是其他編程語言的模式來解釋。下面就是一條 Emmet 的指令：
#page>div.logo+ul#navigation>li*5>a{Item $}
我們把它復制到 Sublime text 2 中已經打開的 HTML 文件中，這時候敲擊一下 TAB 鍵，你就會發現這行指令變成了下面的 HTML 結構：
<div id="page">
<div class="logo"></div>
<ul id="navigation">
<li><a href="">Item 1</a></li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 3</a></li>
<li><a href="">Item 4</a></li>
<li><a href="">Item 5</a></li>
</ul>
</div>
怎么樣？很神奇吧，僅僅寫一行代碼，就可以生成這么一個復雜的 HTML 結構，而且還可以聲稱對應的 class 、id 和內容。這行指令你現在可能還看不懂，下面會詳細講解語法，你現在只需要知道 Emmet 的工作流程：打開 HTML 或 CSS 文件->按語法編寫指令->摁下 TAB 鍵->生成！
Emmet 生成 HTML 結構基礎語法
生成 HTML 文檔初始結構 HTML 文檔的初始結構，就是包括 doctype、html、head、body 以及 meta 等內容。你只需要輸入一個 “!” 就可