Emmet缩写语法

最新推荐文章于 2024-12-04 11:16:10 发布

原创最新推荐文章于 2024-12-04 11:16:10 发布 · 234 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Emmet

Python基础同时被 2 个专栏收录

25 篇文章

订阅专栏

IDE

3 篇文章

订阅专栏

生成 HTML 文档初始结构

只需要输入一个 “!” ，然后摁下 ctrl+E 键，就会生成 HTML 文档初始结构（如下）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>

子: >

可以使用 > 运算符指定嵌套元素在另一个元素内部：
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>

分组: ()

括号用于在复杂的 Emmet 缩写中处理一组子树：
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>

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>

在 $ 后面添加 @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>

<!-- 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{here}+{ to continue}
生成：

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

作为比较，下面是不带有 > 运算符的相同缩写：
p{Click }+a{here}+{ to continue}
生成：

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