Emmet语法记录

前景：

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

说明：

1.生成标签：输入标签名 按tab即可。例：div tab

<div></div>

2.生成多个标签：输入标签名数量 按tab即可。例：div3 tab

<div></div>
<div></div>
<div></div>

3.父子标签：输入标签名>标签名 按tab即可。例：ul>li tab

<ul>
    <li></li>
</ul>

4.兄弟标签：输入标签名+标签名 按tab即可。例：div+p tab

<div></div>
<p></p>

5.带类名或id标签：输入标签名./#名称 按tab即可。例：span.title tab / span#title tab

<span class="title"></span>
<span id="title"></span>

6.类名顺序：类名后连接$ 按tab即可。例：div.title$*5 tab

<div class="title1"></div>
<div class="title2"></div>
<div class="title3"></div>
<div class="title4"></div>
<div class="title5"></div>

示例：

div.header+div.content>span.title+div.text$*5 tab

<div class="content">
    <span class="title"></span>
    <div class="text1"></div>
    <div class="text2"></div>
    <div class="text3"></div>
    <div class="text4"></div>
    <div class="text5"></div>
</div>