Emmet语法(css)

Emmet语法

Emmet语法的前身是Zen coding,它使用缩写来提高html/css编写速度,Vscode内部已经集成该语言.

（一）快速生成HTML结构语法

1.快速生成标签

2.快速生成大量相同标签，如div*3=三个div

3.父级关系标签，使用>比如ul>li就可以

ul>li＋（tab）
=
<ul><li></li></ul>

4.兄弟标签，使用+，比如div+p

div+p
=
<div></div>
<p></p>

5.生成带有id或者类名的直接使用#11和.11即可

p.abc=<p class="abc"></p>
p#abc=<p id="abc"></p>

6.生成的div是类名有顺序的，可以用自增符号$

.demo$*3
=
<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>

7.想要生成标签内的内容可以使用{ }表示

div{$}*3
=
<div>1</div>
<div>2</div>
<div>3</div>

（二）快速生成CSS，效果与HTML相同