這是一款強大的前端開發工具,早期設計Html、CSS總是要手刻畫面,這套軟件大大幫助前端設計師提升開發速度
建議可搭配Sublime、Visual Studio Code等
前言
具有CSS和Html網頁基礎
為什麼要學習Emmet的三大理由
- 加快開發速率
- 簡單、好用、易學習
- 加強自己對Html和CSS的結構學習,讓前端程式不再凌亂
基本語法介紹
進階語法與實例
新增html 5 的檔案: html:5 (按Tab)

創建html 架構 範例
div>h1+div#main>div.site>nav>ul#Item>(li.item$>span{this is my item})*5

這一串看起來很複雜嗎?
不要緊張 很簡單的!
讓我們看下圖,顯示結果

語法 |
說明 |
# |
Tag 加入id |
. |
Tag 加入class |
$ |
自動編碼 1,2,3 依序如下,如果想要二位數編碼01,02,03 可寫成‘$$’ |
*N |
產生N個Tag |
{} |
Tag加入描述內容 |
[] |
加入屬性 |
補充說明:
如果想要預設起始值,可以使用’@‘
div.mydiv$@3*2
產生兩個div class各為mydiv3, mydiv4

若想要在Tag加入屬性,可以參考下圖