Emmet 教學 - 基本用法

大多數的編輯器都有相對應的 Emmet(Zen Coding) 套件可以安裝，它能加快並縮短開發者在編寫 HTML 及 CSS 的時間。Emmet 基本的用法就跟我們在寫 CSS 的概念是一樣的，讓筆者先一一介紹基本的使用方式。

TagName:

假設我們要產生一個 h1 元素，那麼我們只要直接輸入 h1 後，按下 Tab 鍵或是 Ctrl+E 鍵就能產生出包含起始元素及結束元素的內容

只要是 HTML 所定義的元素都能快速產生出相對應的語法，甚至還會帶入跟該元素有關的屬性，例如：a 或是 img 等等

除了標準的元素之外，它也內建了一些快速產生 HTML 樣板的快捷語法，像是要產生一個標準的 HTML5 樣板的話，我們可以直接輸入 ! 或是 html:5

若是 Emmet 不認識的元素的話，如果是使用 Ctrl+E 鍵來觸發 Emmet 的話，它會直接當成標籤來轉換；但如果是用 Tab 鍵則不會觸發

.className:

我們也可以在產生元素時直接加上指定的 .className，例如：h1.title

若是要針對單一元素要加上多個 .className 的話，只要把它們接在一起就可以了

雖然 Emmet 有隱性的判斷標籤的能力，但一般預設的元素是 div，所以如果直接寫 .className 的話，就會自動產生一個 div 元素然後加上指定的 .className

#id:

當然我們也可以幫元素加上指定的 #id

同時加上 #id 及 .className 也是沒問題的，只要接在一起寫就可以了

更多關於元素的快捷縮寫方式都可以在官方的文件中找到：Emmet Cheat Sheet