Emmet语法（vscode自带）

一、快速生成HTML结构语法

1、生成标签，输入div 按tab键，快速生成标签

2、div*5 生成5个div标签

3、父子级关系标签用> ， 如ul>li

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

4、兄弟（并列）关系用+，如div+p

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

5、生成带类名和id的标签直接写id（默认div标签）如.demo或#demo 

1
2
3
4
5
6
7
8
9
10
11
.id 
<div class="demo"></div>
#demo
<div id="demo"></div>
p.demo	指定标签则前面加上限制标签即可
<p class="demo"></p>
ul>li.demo
<ul>
     <li class="demo"></li>
</ul>

6、使用$自增符号，生成多个有顺序的类名

（应该是把$符号变为对应数字

1
2
3
4
5
6
p.demo$*5
<p class="demo1"></p>
<p class="demo2"></p>
<p class="demo3"></p>
<p class="demo4"></p>
<p class="demo5"></p>

7、用{}中输入，指定标签中的文本内容

1
2
3
4
5
6
7
8
div{text}
<div>text</div>
div{text$}*5
<div>text1</div>
<div>text2</div>
<div>text3</div>
<div>text4</div>
<div>text5</div>

二、快速生成CSS结构语法

1
2
3
输入tac补全成text-align: center;
输入ti补全成text-indent: ;
输入w100补全成width: 100px;