Emmet 的使用方式很简单，写完缩写之后敲下tab按键，就可以自动渲染代码。
在VsCode中新建一个html后缀的文件，输入！符号并按Tab或Enter键，Emmet语法帮我们自动生成以下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
- 标签与内容:
Emmet语法可以帮助我们快速生成带标签的内容，包括该标签的属性。
<h3>Emmet语法标签与内容</h3>
例如，我们创建一个class属性名称为title的div标签，并写上内容默认标签,那我们用Emmet写上如下代码：
<div class="title">默认标签div</div>
- 属性与语法糖:
id,class是高频,通用属性,emmet为它定制了”语法糖”
[id=app]{app}(按Tab生成如下)<div id="app">app</div>
语法糖：
id => #, class => .
=app{app}(按Tab生成如下)
<div id="app">app</div>
.title{title1}(按Tab生成如下)
<div class="title">title1</div>
3.重复：
当我们遇到重复样式时，可以用*数量，代表重复样式数量
.container{box}*3(按Tab生成如下)
<div class="container">box</div>
<div class="container">box</div>
<div class="container">box</div>
4.父子关系：
父子关系也是html元素种最常见的，用>符号表达父子关系，其格式为父>子比如我们用ul和li做一个菜单导航，那一级菜单和二级菜单就是父子关系，我们用Emmet快速写父子关系的菜单导航。如：
UL>li{item}*3(按Tab生成如下)
<UL>
<li>item</li>
<li>item</li>
<li>item</li>
</UL>
5.兄弟关系：
兄弟关系是平级的，所以我们用+号表示
h3{字体}+p{内容} (按Tab生成如下)
<h3>字体</h3>
<p>内容</p>
6.父级关系：
父级是表示往回退一级的意思。
.box>span{text}^h3{小标题} (按Tab生成如下)
<div class="box"><span>text</span></div>
<h3>小标题</h3>
7.分组:
分组是为了写Emmet语法的时候让元素的层级关系更清晰。
nav>h3{导航}+(ul>li*3>a{link}) (按Tab生成如下)
<nav>
<h3>导航</h3>
<ul>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
</ul>
</nav>
8.序号:
序号我们通过$和$@符号来实现添加顺序数字。
ul>li{item-$}*3 (按Tab生成如下)
<ul>
<li>item-1</li>
<li>item-2</li>
<li>item-3</li>
</ul>
或
自定义起始序号: ul>li{item-$@6}*3 (按Tab生成如下)
<ul>
<li>item-6</li>
<li>item-7</li>
<li>item-8</li>
</ul>