emmet使用

缩写语法

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

！    html 5

html:xt      html 4过渡

分子

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

嵌套操作员

嵌套操作符用于将缩写元素放在生成的树中：是否应放置在上下文元素的内部或附近。

儿童： >

您可以使用>操作符将元素嵌套在彼此中：

div>ul>li

...会生产

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

兄弟： +

使用+操作员将元素靠近对方，位于同一层面：

div+p+bq

...将输出

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

爬上： ^

使用>运算符，您将生成的树下降，并且所有兄弟元素的位置将针对最深入的元素进行解析：

div+div>p>span+em

...将扩大到

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

使用^运算符，您可以爬上一级树，并更改上下文，其中应显示以下元素：

div+div>p>span+em^bq

...输出

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

您可以使用尽可能多的^运营商，每个运营商将移动一级：

div+div>p>span+em^^^bq

...将输出到

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

乘法： *

使用*操作符可以定义要输出元素的次数：

ul>li*5

...输出

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

分组： ()

括号被Emmets的强大用户用于将复数缩写中的子树分组：

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 colspan="" title="">在每个空属性（如果您的编辑器支持它）中使用tabstops 生成。

您可以使用单引号或双引号引用属性值。

如果不包含空格，则不需要引用值：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>

在第二个例子中，<b>元素放置在 <a>元素内。这就是区别：什么时候{text}写入元素后，它不会改变父上下文。这是一个更复杂的例子，显示为什么它很重要：

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

...产生

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

在这个例子中，要写入Click here to continue内部<p>元素，我们已经明确地使用>运算符向下移动树p，但是在a元素的情况下，我们不需要，因为我们只需要单词的<a>元素here，而不改变父上下文。

为了比较，这里是没有子>操作符的相同的缩写：

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

...产生

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