Emmet

Emmet 官网文档

1. 基础语法

1.1. 元素

你可以写任何单词并将其转换为标签：div → <div></div>、foo → <foo></foo>

1.2. 嵌套

1.2.1. 子级

可以使用 > 运算符将元素嵌套在内部：

div>ul>li

生成：

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

1.2.2. 同级

使用 + 运算符将元素放在邻近的同一级别上:

div+p+bq

生成：

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

1.2.3. 父级

使用 ^ 运算符，您可以向树上爬一层，并更改后续元素将要显示的位置：

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>

1.2.4. 重复

使用 * 运算符，您可以定义元素输出的次数：

ul>li*5

生成：

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

1.2.5. 分组

使用圆括号可以对复杂的缩写进行分组：

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>

1.3. 属性

1.3.1. Id 以及 Class

使用 # 和 . 符号指定 id 和 class：

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>

1.3.2. 自定义属性

使用方括号定义属性：

td[title="Hello world!" colspan=3]

生成：

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

• 可以在方括号内放置任意数量的属性；
• 可以不用指定属性值，例如 td[colspan title] 将生成 <td colspan="" title="">，并在每个空属性的地方进行 “tabstop”（如果编辑器支持）；
• 可以使用单引号或双引号将属性值包裹起来；
• 如果值不包含空格，则可以不用包裹它们，例如 td[title=hello colspan=3] 也不会有问题；

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

可以在一行中使用多个 $（高位将使用 0 进行补齐）：

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>

1.3.3.1. 修改起始编号和方向

使用 @ 修饰符，可以修改编号方向（升序或降序）和基数（起始值）。

例如使用 @- 进行逆序：

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>

1.4. 文本

可以使用花括号将文本添加到元素：

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>

2. 使用 Lorem Ipsum 生成随机文本

Emmet 内置了 Lorem Ipsum，我们可以通过 loremN 或者 lipsumN（N 表示生成的单词数，正整数，可以不填）来生成随机文本：

<!-- lorem -->
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam sint, sit officiis obcaecati numquam eligendi itaque asperiores earum non blanditiis nostrum, exercitationem facilis harum quas officia praesentium fugiat nemo laborum?

<!-- p>lorem4 -->
<p>Lorem ipsum dolor sit.</p>

<!-- (p>lorem4)*3 -->
<p>Lorem ipsum dolor sit.</p>
<p>Iure ad ea facere?</p>
<p>Adipisci sint at ex?</p>