Emmet是甚麼呢?
這是一套文字編輯器的外掛程式，輔助用縮寫的編排方式提升編輯HTML、XML、XSL的速度。
簡單來說就是前端的開發利器，大部分編譯器都已經內鍵安裝此套件了，學會使用能大大加速撰寫整體架構的速度(相見恨晚是不是!!!)。
前置工作
- 打開Vscode點選
new File
- 輸入
Test.html創立這個html檔案
- 檢查一下右下角是否是
HTML，否則Emmet語法可能會沒有反應
常用語法(我自己常用的語法QQ)
以下所有的空白鍵(Enter)均能替換成Tab鍵(英文字母Q旁邊的Tab按鍵)
html檔案基本架構
- 輸入! + Enter(有看到旁邊提示才能按空白鍵)
- 登登登登~快速產生了一個html
HTML標籤(無Class)
- 輸入標籤名稱 + Enter(有看到旁邊提示才能按空白鍵)
- 以下範例圖片輸入h1 + Enter
HTML標籤 + Class
單單只是產生標籤那一定不夠，腦中可能已經將畫面各自命名了(Class)，那就要一次到位
- 輸入標籤名稱 + . + class名稱 + Enter(有看到旁邊提示才能按空白鍵)
有幾個Class就多幾組的 . + class名稱 - 範例圖片使用 p + . + name + . + number(一次給他兩個Class名稱)
- 順帶一提，如果沒有給標籤名稱會變成神麼樣子呢?
- 登登登登答案就是div，也就是只有div可以省略標籤名稱
HTML標籤 + Attribute
標籤屬性也是HTML裡面很重要的一環，讓我們把這個也學起來
- 輸入標籤名稱 + [屬性名稱:屬性值] + Enter(有看到旁邊提示才能按空白鍵)
有幾個屬性就用空格分開 - 範例圖片使用input[type=text name=姓名框]
Class + Attribute一次滿足
偷偷告訴你一個小技巧，Emmet語法可以混用喔!!!
- 範例圖片使用input[type=text name=姓名框].UserInput
結尾
上面僅僅只是冰山一角呢，有時間會補齊自己常用的語法，如果你還是那麼想知道的話就告訴你吧。
最完整的使用方法就在Emmet官方文件(不要打我QQ)