skip to main content

Emmet插件入門教學, 快速產生HTML CSS代碼,前端網站開發必備神器

於2020年8月28日更新


Emmet插件入門教學, 快速產生HTML CSS代碼,前端網站開發必備神器影片
點擊圖片觀看影片版本

Emmet是甚麼?

如果你是網頁開發人員,或者常常需要重覆地寫HTML和CSS代碼的話,懂得使用Emmet可以省掉你很多代碼輸入時間。

Emmet文字編輯插件

Emmet是一個幾乎每個現在流行文字編輯器插件,例如VSCode,Sublime Text, Atom, Notepad++,Dreamweaver,甚至是網頁上的文字輸入方框等等的必備插件(Plugin)

Emmet插件可以做甚麼?

跟著我會透過使用VSCode介紹怎樣利用幾個核心Emmet語法輸入想要的代碼結果:

Emmet使用方法#1 - 加入HTML tag 和Tab鍵的使用

首先舉個簡單例子,例如你想打出<div></div>,你只需要在編輯器裏打"div" + "Tab",就會得到 Emmet插件入門結果圖01,而且滑鼠指標已經在兩個tag的中間,可以讓你隨時輸入內容。

如果你是打img這類有多個屬性的html tag的話,按"Tab"鍵可以讓你立刻跳到下一個屬性的內容位置。

當然這只是個小事,接下來我會介紹更多Emmet使用方法。

Emmet使用方法#2 - HTML 子元素(Child)

以">"為代表符號
語法示範 : div>ul>li
按"Tab"或"Enter"會出現 Emmet插件入門結果圖01

Emmet使用方法#3 - 同一層多個HTML tag元素

以"+"為代表符號
語法示範 : div+h1+p
按"Tab"或"Enter"會出現 Emmet插件入門結果圖02

Emmet使用方法#4 - 多次重複HTML tag用法

以"*"為代表符號
語法示範 : ul>li*3
按"Tab"或"Enter"會出現 Emmet插件入門結果圖03

Emmet使用方法#5 - 加入CSS的ID

以"#"為代表符號
語法示範 : div#idname
按"Tab"或"Enter"會出現 Emmet插件入門結果圖04

Emmet使用方法#5 - 加入CSS的Class

以"."為代表符號
語法示範 : p.mystyle
按"Tab"或"Enter"會出現 Emmet插件入門結果圖05

Emmet使用方法#6 - 加入編號

以"$"為代表符號
語法示範 : ul>li.product_id$*5按"Tab"或"Enter"會出現 Emmet插件入門結果圖07

Emmet使用方法#7 - 加入內容

以"{ }"為代表符號
語法示範 : p{內容文字}
按"Tab"或"Enter"會出現 Emmet插件入門結果圖08

Emmet Plugin下載和安裝

某些文字編輯器已經預裝了Emmet(如VSCode),你在編輯器中試我上述所講的Emmet技巧時如果成功了,就証明你那文字編輯器已經安裝了Emmet。

如果你的文字/代碼編輯器未有安裝Emmet的話可以去Emmet官網這頁進行下載或安裝。

另外想在網頁的文字方框textarea使用Emmet的話可以到這頁去下載和安裝Emmet.js

Emmet使用貓紙

Emmet官網也提供了CheatSheet 供你下載,你可以打印出來放在桌前用到隨時可以看。

這次就講到這裡,希望對你有幫助,感謝你的觀看。

如果你覺得本文章或影片有用,想再看更多我寫關於DIY網站開發,Google SEO內容的話,可以按下面的按鍵,填上你的電郵然後訂閱

作者 :- 香港全端網站開發人員,中文Google SEO顧問

其他文章

響應試網站開發課程入門

DIY網站開發初階自學課程橫額