EMMET 语法

EMMET 基本语法 (https://docs.emmet.io/)

概念

emmet是一种介于标记性语言（如html、xml）和规范之外的逻辑输入方法，是一个 Web 开发人员的工具包，可以极大地改进您的 HTML 和 CSS 工作流程，可以跨不同平台工作：Web 浏览器、Node.js、Microsoft WSH 和 Mozilla Rhino。

语法

元素（可以使用元素的名称，如div或p来生成HTML 标记）以vs code 为测试软件

div+tab键      <div></div>
p +tab键        <p></p>
...........

嵌套运算符(用于在生成的树中定位缩写元素：是否应该放置在上下文元素内部或附近)

孩子 > 使用>运算符将​​元素相互嵌套：

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>

属性运算符(用于修改输出元素的属性。例如，在 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>