emmet html缩写

HTML缩写

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

元素

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

  ，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>

如果您正在使用浏览器的DOM，则可以将组视为文档片段：每个组均包含缩写子树，并且以下所有与第一个元素相同的级别插入以下元素。

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

(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>

• 可以在方括号内放置任意数量的属性。
• 不必指定属性值：td[colspan title]会 在每个空属性内使用制表符产生（如果您的编辑器支持它> 们）。
• 可以使用单引号或双引号来引用属性值。
• 如果值不包含空格，则无需引用它们：td[title=hello colspan=3]可以。

项目编号 $

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

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>

要更改计数器的基本值，请在上添加@N修饰符$：

ul>li.item$@3*5

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

您可以将这些修饰符一起使用：

ul>li.item$@-3*5

<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>

请注意，它{text}是作为单独的元素（如等）使用和解析的div，p但是紧接在元素后面时具有特殊的含义。例如，a{click}和a>{click}将产生相同的输出，但是a{click}+b{here}和a>{click}+b{here}不会：

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

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

在第二个示例中，元素放置在元素内部。那就是区别：当{text}在元素之后立即编写时，它不会更改父上下文。这是一个更复杂的示例，显示了为什么它很重要：

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

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

在此示例中，要写入Click here to continue内部

元素，我们必须使用>运算符after 显式地将其移至树下p，但是对于a元素而言，则不必这样做，因为我们只需要带有here单词的元素，而无需更改父上下文。

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

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” 构造器

1. 您可以在缩写中指定应生成多少个单词。例如，lorem100将生成一个100字的伪文本。
2. 您可以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>

1. 当元素是自重复元素时，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>