emmet语法

最新推荐文章于 2025-11-17 15:24:48 发布

原创最新推荐文章于 2025-11-17 15:24:48 发布 · 3.2k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#emmet

本文详细介绍了Emmet语法，包括生成html初始文档、创建带有id和class的HTML标签、生成后代和兄弟元素、上级元素操作、重复生成、分组、自定义属性以及内容编号的使用方法，帮助开发者提升HTML编写效率。

1.1 生成html初始文档

!+tab或者html:5   生成html5文档的初始结构
html:xt           生成html4过渡型
html:4s           生成html4严格型）

生成的文档如下：

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

</body>
</html>

1.2 生成带有id,class的HTML标签

#aaa  生成一个ID为aaa的div

生成结构如下：

<div id="aaa"></div>

ul#ccc.ddd   生成一个ID为ccc,class为ddd的ul

生成结构如下：

<ul id="ccc" class="ddd"></ul>

1.3 生成后代 “>”

div.aaa>ul>li   生成一个无序列表，而且被class为aaa的div包裹

生成结构如下：

<div class="aaa">
     <ul>
         <li></li>
     </ul>
</div>

1.4 生成兄弟

div+p+dp

<div></div>
<p></p>
<dp></dp>

1.5 生成上级元素 “^”

上级（Climb-up）元素是什么意思呢？前面咱们说过了生成下级元素的符号“>”，当使用 div>ul>li 的指令之后，再继续写下去，那么后续内容都是在 li 下级的。如果我想编写一个跟 ul 平级的 span 标签，那么我需要先用 “^” 提升一下层次。例如：

div>ul>li^span

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

如果我想生成一个与div平级的span，那么就再上升一个层级，多用一个^

div>ul>li^^span

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

1.6重复生成多份*

ul>li*5

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

1.7生成分组()

div>(header>ul>li*2>a)+footer>p

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

分组还可以结合上面的*符号生成重复结构

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

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

1.8生成自定义属性[attr]

a 标签中往往需要附带 href 属性和 title 属性，如果我们想生成一个 href 为 “http://google.com” ，title 为“我爱水煮鱼”的 a 标签，可以这样写：

a[href="www.google.com" title="我爱水煮鱼"]

<a href="www.google.com" title="我爱水煮鱼"></a>

1.9生成内容编号$

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>

$就表示一位数字，只出现一个的话，就从1开始。如果出现多个，就从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>

只能这样单调的生成序号？对于强大的 Emmet 来说，肯定不会会了，我们也可以在 $ 后面增加 @- 来实现倒序排列：

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>

2.0生成文本内容{}

a[href="www.google.com"]{click me}
或者
a[href="www.google.com"]>{click me}

<a href="www.google.com">click me</a>

emmet语法

1.1 生成html初始文档

1.2 生成带有id,class的HTML标签

1.3 生成后代 “>”

1.4 生成兄弟

1.5 生成上级元素 “^”

1.6重复生成多份*

1.7生成分组()

1.8生成自定义属性[attr]

1.9生成内容编号$

2.0生成文本内容{}

注意不能有空格