Emmet語法的前身是Zen coding,它使用縮寫,來提高htm/css的編寫速度Vscode內部已經集成該語法。
注:本篇內容中Tab鍵和Enter(回車)鍵功能相同
首先先輸入一個英文狀態下的 “ ! ”再按Enter鍵,就可以生成html的骨架了,這里做個示范:
下面舉例標簽的快捷生成
1.生成標簽直接輸入標簽名按tab鍵就可以生成,比如:先輸入div,然后按Enter鍵,就可以生成<div> </div>了。
2.如果想要生成多個相同標簽那就在標簽后面加上 * 就可以了,比如:輸入div*3 ,按Enter鍵,就可以快速生成3個div。
3.如果是有父子級關系的標簽,可以用 > ,比如:輸入ul > li ,按Enter鍵,這就可以了。
4.如果有兄弟關系的標簽,用 + 就可以了,比如:輸入 div+p 試試。
5.如果生成帶有類名或者id名字的,直接寫 .one 或者 #two然后 回車就可以了,
默認是給div加的類,如果你想給其他標簽加類名,只需要在 . 前面指定就好了。
同理,父子級關系的標簽也可以這么使用,
兄弟關系的標簽也可以這么使用,但是,會生成類名的只有順序在后面的標簽,可以結合實際情況使用。
6.如果生成的div類名是有順序的,那就可以用自增符號 $ 來
7.如果想要在生成的標簽內部寫內容可以用 {} 表示