本文已参与「新人创作礼」活动，一起开启掘金创作之路。
Emmet 语法
Emmet语法的前身是Zen coding,它使用缩写,来提高html/css的编写速度, Vscode内部已经集成该语法.
- 快速生成HTML结构语法
- 快速生成CSS样式语法
1.快速生成HTML结构语法
（1）生成标签直接输入标签名按tab键即可，比如输入div然后tab 键，就可以生成
示例：
输入：div
输出：<div></div>
（2）如果想要生成多个相同标签 加上 * 就可以了 比如 div*3 就可以快速生成3个div
示例：
输入：div*3
输出：
<div></div>
<div></div>
<div></div>
（3）如果有父子级关系的标签，可以用 > 比如 ul > li就可以了
示例1：
输入：ul>li
输出：
<ul>
<li></li>
</ul>
示例2：
输入：ul>li*3
输出：
<ul>
<li></li>
<li></li>
<li></li>
</ul>
（4）如果有兄弟关系的标签，用 + 就可以了，比如 div+p
示例：
输入：div+p
输出：
<div></div>
<p></p>
（5）如果生成带有类名或者id名字的， 直接写 .demo 或者 #two tab 键就可以了
示例1：
输入：.one
输出：
<div class="one"></div>
示例2：
输入：#two
输出：
<div id="two"></div>
（6）如果生成的div 类名是有顺序的，可以用自增符号 $
示例：
输入： .demo$*5
输出：
<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>
<div class="demo4"></div>
<div class="demo5"></div>
（7）如果想要在生成的标签内部写内容可以用 { } 表示
示例1：
输入：div{demo}
输出：
<div>demo</div>
示例2：
输入：div{demo$}*3
输出：
<div>demo1</div>
<div>demo2</div>
<div>demo3</div>
（8）如果需要指定基础序号的，可以使用@x，通常与$向关联使用
输入：div{demo$@2}*2
输出：
<div>demo2</div>
<div>demo3</div>
2.快速生成CSS样式语法
CSS 基本采取简写形式即可.
（1）比如 输入w200按tab可以生成width: 200px;
输入：w200
输出：
width: 200px;
（2）比如输入lh26px按tab可以生成line-height: 26px;
输入：lh26
输出：
line-height: 26px;
3.快速格式化代码
Vscode 快速格式化代码: Shift+Alt+F
也可以设置当我们保存页面的时候自动格式化代码:
( 1 )文件 ------.>【首选项】---------->【设置】；
( 2 )搜索emmet.include;
( 3 )在settings.json下的【工作区设置】中添加以下语句： "editor.formatOnType": true, "editor.formatOnSave": true
