Vscode Emmet语法-快速生成HTML结构语法

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