Emmet(一)

這是一款強大的前端開發工具，早期設計Html、CSS總是要手刻畫面，這套軟件大大幫助前端設計師提升開發速度
建議可搭配Sublime、Visual Studio Code等

前言

具有CSS和Html網頁基礎

為什麼要學習Emmet的三大理由

1. 加快開發速率
2. 簡單、好用、易學習
3. 加強自己對Html和CSS的結構學習,讓前端程式不再凌亂

基本語法介紹

• 凡要使用Emmet 下完語法 按TAB鍵

• 用 ‘>’ 串接 html 的層級

• 用 ‘+’ 串接同階層

• 打Emmet不要Key空白鍵

• html tag 直接輸入關鍵字，不用輸入’<‘ 和 ‘>’

進階語法與實例

1. 新增html 5 的檔案： html:5 (按Tab)
   

2. 創建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加入屬性,可以參考下圖