Vscode Emmet語法-快速生成HTML結構語法


Emmet語法的前身是Zen coding,它使用縮寫,來提高htm/css的編寫速度Vscode內部已經集成該語法。

 注:本篇內容中Tab鍵和Enter(回車)鍵功能相同

 

首先先輸入一個英文狀態下的 “ ! ”再按Enter鍵,就可以生成html的骨架了,這里做個示范:

 

 

 下面舉例標簽的快捷生成

1.生成標簽直接輸入標簽名按tab鍵就可以生成,比如:先輸入div,然后按Enter鍵,就可以生成<div> </div>了。

 

2.如果想要生成多個相同標簽那就在標簽后面加上 *  就可以了,比如:輸入div*3 ,按Enter鍵,就可以快速生成3div。

 

3.如果是有父子級關系的標簽可以用 >  ,比如:輸入ul > li ,按Enter鍵,這就可以了。

 

4.如果有兄弟關系的標簽用 +   就可以了,比如:輸入 div+p   試試。

 

5.如果生成帶有類名或者id名字的,直接寫 .one  或者 #two然后 回車就可以了,

  默認是給div加的類,如果你想給其他標簽加類名,只需要在 . 前面指定就好了。

  同理,父子級關系的標簽也可以這么使用,

  兄弟關系的標簽也可以這么使用,但是,會生成類名的只有順序在后面的標簽,可以結合實際情況使用。

 

6.如果生成的div類名是有順序的,那就可以用自增符號 $  來

 

7.如果想要在生成的標簽內部寫內容可以用  {} 表示

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM