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