EMMET 语法 （https://docs.emmet.io/）
概念
emmet是一种介于标记性语言（如html、xml）和规范之外的逻辑输入方法，是一个 Web 开发人员的工具包，可以极大地改进您的 HTML 和 CSS 工作流程，可以跨不同平台工作：Web 浏览器、Node.js、Microsoft WSH 和 Mozilla Rhino。
语法
1、 元素（可以使用元素的名称，如div或p来生成HTML 标记）以vs code 为测试软件
div+tab键 <div></div>
p +tab键 <p></p>
...........
<1> 嵌套运算符(用于在生成的树中定位缩写元素：是否应该放置在上下文元素内部或附近)
① 孩子 > 使用>运算符将元素相互嵌套：
div>ul>li +tab键
<div>
<ul>
<li></li>
</ul>
</div>
② 兄弟 + 使用+运算符将元素彼此靠近放置在同一级别：
div+p+div +tab键
<div></div>
<p></p>
<div></div>
③ 孩子+兄弟同时使用
div+div>p>span +tab键
<div></div>
<div>
<p><span></span></p>
</div>
④ 乘法 * 使用*运算符，您可以定义元素应该输出多少次：
ul>li*5 +tab键
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
⑤ 分组 () Emmets 的高级用户使用括号对复杂缩写中的子树进行分组：
div>(div>ul>li*3)+span +tab键
<div>
<div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<span></span>
</div>
<2> 属性运算符(用于修改输出元素的属性。例如，在 HTML 和 XML 中，您可以快速将class属性添加到生成的元素。)
① class属性和id属性
div#header+div.page+div#footer.class1
<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1"></div>
②项目编号 $ 使用乘法*运算符，您可以重复元素，但$可以对它们进行编号。将$运算符放在元素名称、属性名称或属性值中，以输出当前重复元素的数量：
ul>li.list$*5
<ul>
<li class="list1"></li>
<li class="list2"></li>
<li class="list3"></li>
<li class="list4"></li>
<li class="list5"></li>
</ul>
③ 可以$连续使用多个来用零填充数字：
ul>li.list$$$*5
<ul>
<li class="list001"></li>
<li class="list002"></li>
<li class="list003"></li>
<li class="list004"></li>
<li class="list005"></li>
</ul>
④文本 {} 可以使用花括号向元素添加文本：
span{啊啊啊啊啊啊啊啊}
<span>啊啊啊啊啊啊啊啊</span>
总结
div>(div>ul>li#list$*3{123})+span
<div>
<div>
<ul>
<li id="list1">123</li>
<li id="list2">123</li>
<li id="list3">123</li>
</ul>
</div>
<span></span>
</div>
