# Emmet ###### tags: `PID` Emmet原本是為使用者達到更好的農碼體驗, 但是實在太強大了, 所以現在許多編輯(譯)器都有內建, 本次以HTML為範例, 其他的請自己找, 有些有有些沒有, 就跟哈密瓜一樣 :::info 這只會讓你打很快, 不會變強！！！而且有時候還會誤導你 ::: ## 初始篇 ### 使用方法 打入Emmet語法, 然後按下tab, 就會DoReMiSo~ ### TAG(element) 直接打就對了 ``` div ---> <div></div> ``` ### 同層元素 使用加號相連 ``` h1+p ---> <h1></h1> <p></p> ``` ### 元素重複 使用乘號複製 ``` div*3 ---> <div></div> <div></div> <div></div> ``` ### 父子層 用>代表子層 ``` ul>li*3 ---> <ul> <li></li> <li></li> <li></li> </ul> ``` ### 往上一層 用^代表往上一層 ``` div>h1^div ---> <div> <h1></h1> </div> <div></div> ``` ### 包裹 emmet也可以用()做範圍區隔 ``` (div>p)+(ul>li) ---> <div> <p></p> </div> <ul> <li></li> </ul> ``` ## 屬性篇 屬性是可以越接越長 ### id 跟選擇器一樣, 打#, 如果是div可以不用打div ``` #box1>p#text1 ---> <div id='box1'> <p id='text1'></p> </div> ``` ### class 打上. 即可, div一樣不用打, 可同時設定多個className ``` .box.light>h1.error ---> <div class='box light'> <h1 class='error'></h1> </div> ``` ### 元素屬性 與CSS一樣, 可以用[]輸入, 但是他不會管你有沒有打錯字 ``` input[type='button' value='submit'] ---> <input type='button' value='submit'> ``` ## 進階篇 這裡以下通通都是, 不常用!!! ### 內容 可以用{}來輸入預設內容, 相較之下這比較常用 ``` p{Hello} ---> <p>Hello</p> ``` ### 多個設定 用$可以快速設定很多編號, 但是是從1開始 ``` .item$*4 ---> <div class='item1'></div> <div class='item2'></div> <div class='item3'></div> <div class='item4'></div> ``` ### 多個設定-初始值 用@可以設定初始編號 ``` .item$@5*4 ---> <div class='item5'></div> <div class='item6'></div> <div class='item7'></div> <div class='item8'></div> ``` ## 特別收錄-常用CSS ``` m0 ---> margin: 0; p0 ---> padding: 0; (m|p)(t|r|b|l) //看不懂這串的先去看正規化 ---> (margin|padding)-(top|right|bottom|left) bz //不要問我為什麼不是bs 因為bs是別的 ---> box-sizing: border-box; ff ---> font-family: serif; bg ---> background: #000; bgi ---> background-image bgp ---> background-position fz12 //也不要問我fs, 自己去打打看 ---> font-size: 12px; w100+h100 ---> width: 100px; height: 100px; ta ---> text-align: left; ```