# 加快HTML撰寫速度 Emmet 使用心得

###### tags: `HTML` `前端` `開發工具`

昨天的課程介紹了這個工具，當下我只有種相見恨晚的感覺，這工具實在太好用了！

以往撰寫 HTML 的時後相當麻煩，一個 div 標籤我要先輸入 "<" 接著輸入 "div" 最後再輸入 ">"，然後 end tag 再來一次，最後變成只要能複製貼上就複製貼上，不然有夠麻煩。

同樣一件事有了 emmet 後我只需要輸入 "div" 然後按下 tab 就完成了!!

基本概念：
* 輸入縮寫然後按下 tab，就會直接產生對應標籤、語法
* HTML 標籤加上數字，會產生多個標籤
* CSS 屬性加上數字，會直接套用設定值，若有單位預設是 "px"

下面再補充幾個方便的操作：

1. 直接產生一份 HTML 架構
輸入 ! + tab 就會直接生出下圖的結構，基本該有的都有了


2. 產生多個標籤
如果我想直接產生五個\<p>，只要輸入 p*5 再 tab就好，其他標籤同理。

3. 產生假文
這邊有兩種做法，一樣是輸入後按 tab
* lorem20 = 產生20個字的假文
* lorem*20 = 產生20行的假文