前端开发的快速编码插件，只需要敲一行代码然后按下 “Tab键” 就能生成你想要的完整HTML结构。
推荐博客https://www.cnblogs.com/summit7ca/p/6944215.html?tdsourcetag=s_pctim_aiomsg
1.生成html初始结构
输入!+tab键生成
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
2.带有id的标签
div#header
<div id="header"></div>
3.带有class的标签
div.header
<div class="header"></div>
4.子节点
div>ul>li>p
<div>
<ul>
<li>
<p></p>
</li>
</ul>
</div>
5.兄弟节点
div+ul+p
<div></div>
<ul></ul>
<p></p>
6.上级节点
div>ul>li^div (这里的^是接在li后面所以在li的上一级，与ul成了兄弟关系,当然两个^^就是上上级）
<div>
<ul>
<li></li>
</ul>
<div></div>
</div>
7.重复
div*5
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
8.分组()（括号里面的内容为一个代码块，表示与括号内部嵌套和外面的的层级无关）
div>(ul>li>a)+div>p
<div>
<ul>
<li><a href=""></a></li>
</ul>
<div>
<p></p>
</div>
</div>
9.属性[]括号内填写属性键值对的形式，并且空格隔开
a[href='www.google.com' name='a']
<a href="www.google.com" name="a"></a>
10.编号
ul>li.test$*3 $代表一位数，后面更上*数字就代表从1递增到填写的数字
<ul>
<li class="test1"></li>
<li class="test2"></li>
<li class="test3"></li>
</ul>
11.文本 {}
ol>li{hello wold}
<ol>
<li>hello wold</li>
</ol>
12.隐式标签(默认可以生成的标签)
.test
<div class="test"></div>
