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

快速生成HTML结构语法

标签

div 然后tab 键

1
<div></div>

多个相同标签

div*3

1
2
3
<div></div>
<div></div>
<div></div>

父子级标签

可以用 > ，比如 ul > li

1
2
3
<ul>
    <li></li>
</ul>

兄弟标签

用 + ,比如 div+p

1
2
<div></div>
<p></p>

有类名或者id名字

直接写 .demo 或者 #two, tab 键

1
2
<div class="demo"></div>
<div id="demo"></div>

有顺序的div类名

自增符号 ‘div `div*5`

1
2
3
4
5
<div1></div1>
<div2></div2>
<div3></div3>
<div4></div4>
<div5></div5>

标签内部写内容

{ }
div{胖虎同学}

1
<div>胖虎同学</div>

快速生成CSS样式语法

w200 按tab 可以 生成 width: 200px;
lh26px 按tab 可以生成 line-height: 26px;

参考资料：

emmet语法,