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.如果想要在生成的标签内部写内容可以用 {} 表示