本文已搬家到筆者自己的部落格嘍，有興趣的可以點這個連結～

前言

經過前兩天的介紹相信大家都對 HTML 已經有了差不多的概念了，但是當我們在寫 HTML 的時候難免大家都會有這種想法：難道我們每寫一份 HTML 文件就必須要重最前面的 HTML tag 慢慢往下寫嗎？更不要說有些 element 裡面還加了一堆 attribute 進去導致每次在撰寫 HTML 文件的時候都要花費不少心力。

沒錯！身為一個正常的工程師因為自身的懶惰要加快開發速度總是希望有個好用的工具可以讓自己在撰寫 HTML 文件的時候更加的便利，因此 Emmet 出現了。

使用說明

Emmet 的使用方式基本上跟寫 CSS 是差不多的，利用 selectors 的方式表達 HTML 架構，寫完後在按下鍵盤中的 tab 就會自動轉成 HTML 程式碼，底下會附上一些範例提供給大家參考，而目前主流的編輯器也都內建好 Emmet 這個強大的套件就連 codepen 也都有內建喔！想練習的話也可以直接在 codepen 上面練習。

範例

• element

• element.className

• element.className1.className2....

• element#idName

• element.className(#idName)>element.className(#idName)>...

• element.className(#idName)+element.className(#idName)+...

• element.className(#idName)*value

• ! / html:5

總結

今天分享的 Emmet 可以說是前端工程師在寫 HTML 檔的必備神器，摸熟 Emmet 保證可以讓你在撰寫 HTML 的過程中更加容易、更加迅速，而大家在看 Emmet 的文章時也發現裡面牽扯到很多 CSS selectors 的觀念，所以大家不妨可以先把選擇器摸熟後再來看 Emmet 的介紹，這樣會更容易看懂文章喔！