HTML缩写

Emmet使用类似于CSS选择器的语法来描述元素在生成的树中的位置和元素的属性。

元素

您可以使用元素的名字，如div或p以生成 HTML标签。
Emmet没有一组预定义的可用标签名称，您可以编写任何单词并将其转换为标签：div→ <div></div>，foo→ <foo></foo>等。

嵌套运算符

嵌套运算符用于将缩写元素放置在生成的树内：是否将其放置在context元素内或附近。

父子元素 >
您可以使用 > 运算符将元素相互嵌套：
div>ul>li

<div>
    <ul>
        <li></li>
    </ul>
</div>

兄弟元素 +
使用 + 运算符将元素彼此放置在同一水平上：
div+p+bq

<div></div>
<p></p>
<blockquote></blockquote>

爬升 ^
使用^运算符，您可以将树爬上一层并更改上下文，其中应显示以下元素： div+div>p>span+em^bq

<div></div>
<div>
    <p><span></span><em></em></p>
    <blockquote></blockquote>
</div>

乘法 *
使用*运算符，您可以定义元素应输出多少次：
ul>li*5

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

分组 ()
使用括号将复杂缩写的子树分组：
div>(header>ul>li*2>a)+footer>p

<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

您可以将组彼此嵌套，并使用乘法*运算符将它们组合在一起：

(div>dl>(dt+dd)*3)+footer>p

<div>
    <dl>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
    </dl>
</div>
<footer>
    <p></p>
</footer>

属性运算符

属性运算符用于修改输出元素的属性。例如，在HTML和XML中，您可以快速将class属性添加到生成的元素。

id和class 在CSS中，您可以使用elem#id和elem.class表示法来访问具有指定id或class属性的元素。在Emmet中，可以使用完全相同的语法将这些属性添加到指定的元素：
div#header+div.page+div#footer.class1.class2.class3

<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>

自定义属性 [] 您可以使用[attr]符号（如CSS中一样）向元素添加自定义属性：
td[title="Hello world!" colspan=3]

<td title="Hello world!" colspan="3"></td>

项目编号 $ 随着乘法*运算符可以重复的元素，但是$你可以编号它们。将$运算符放在元素名称，属性名称或属性值内，以输出当前重复元素的数量： ul>li.item$*5

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
</ul>

您可以连续使用多个 $ 以零填充数字： ul>li.item$$$*5

<ul>
    <li class="item001"></li>
    <li class="item002"></li>
    <li class="item003"></li>
    <li class="item004"></li>
    <li class="item005"></li>
</ul>

更改编号基础和方向 @ 使用@修饰符，您可以更改编号方向（升序或降序）和基数（例如起始值）。
例如，要更改方向，请在@-之后添加$： ul>li.item$@-*5

<ul>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
    <li class="item2"></li>
    <li class="item1"></li>
</ul>

<ul>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
    <li class="item6"></li>
    <li class="item7"></li>
</ul>

<ul>
    <li class="item7"></li>
    <li class="item6"></li>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
</ul>

文本 {} 您可以使用花括号将文本添加到元素： a{Click me}

<a href="">Click me</a>

<!-- a{click}+b{here} -->
<a href="">click</a><b>here</b>

<!-- a>{click}+b{here} -->
<a href="">click<b>here</b></a>

<p>Click <a href="">here</a> to continue</p>

为了进行比较，这是不带子>运算符的相同缩写：

p{Click }+a{here}+{ to continue}

<p>Click </p>
<a href="">here</a> to continue

隐式生成的标签

span>.item

<span><span class="item"></span></span>

ul>.item

<ul>
    <li class="item"></li>
</ul>

缩写注意事项

运算符左右不要使用空格

“Lorem Ipsum” 构造器

您可以在缩写中指定应生成多少个单词。例如，lorem100将生成一个100字的伪文本。
您可以lorem在重复元素内使用生成器来创建填充有完全随机句子的标签。例如，p*4>lorem缩写将生成如下内容：

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta minus molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias officiis assumenda officia quibusdam deleniti eos cupiditate dolore doloribus!</p>
<p>Ad dolore dignissimos asperiores dicta facere optio quod commodi nam tempore recusandae. Rerum sed nulla eum vero expedita ex delectus voluptates rem at neque quos facere sequi unde optio aliquam!</p>
<p>Tenetur quod quidem in voluptatem corporis dolorum dicta sit pariatur porro quaerat autem ipsam odit quam beatae tempora quibusdam illum! Modi velit odio nam nulla unde amet odit pariatur at!</p>
<p>Consequatur rerum amet fuga expedita sunt et tempora saepe? Iusto nihil explicabo perferendis quos provident delectus ducimus necessitatibus reiciendis optio tempora unde earum doloremque commodi laudantium ad nulla vel odio?</p>

当元素是自重复元素时，lorem生成器会使用隐式标签名称解析器，lorem因此您可以缩短缩写：
ul.generic-list>lorem10.item*4+

<ul class="generic-list">
    <li class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam vero.</li>
    <li class="item">Laboriosam quaerat sapiente minima nam minus similique illum architecto et!</li>
    <li class="item">Incidunt vitae quae facere ducimus nostrum aliquid dolorum veritatis dicta!</li>
    <li class="item">Tenetur laborum quod cum excepturi recusandae porro sint quas soluta!</li>
</ul>

lblog_oj4rjab5