学习Emmet的笔记

最新推荐文章于 2025-08-05 15:43:49 发布

原创最新推荐文章于 2025-08-05 15:43:49 发布 · 336 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#emmet #html

杂项专栏收录该内容

3 篇文章

订阅专栏

本文介绍Emmet插件的基础及高级用法，包括嵌套、同级排列、组与批量生成标签、指定ID和Class、内容填充等功能，并提供实用示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在SublimeText3安装了Emmet插件之后除了知道html:5可以输出HTML5的基本标签之后，就一直没有了解具体该怎么使用。今天打开了Emmet的文档查看具体用法，其简便使我后悔为什么不早些来学习怎么使用Emmet。下面是个人简单的笔记。

嵌套
嵌套使用的是>符号，如div>ul>li得到如下代码：

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

而^符号可以跳到上一层标签，如div>ul>li>span^^^div得到如下代码：

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

同级排列
连续写多个同一级的标签可以使用+进行连接，如p+p+bq得到如下代码：

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

组&同时生成多个同样标签
使用()可以将括号内的标签组成一个组，如div>(header>p>span)+(footer>p)得到：

<div>
    <header>
        <p><span></span></p>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

而当需要同时生成多个相同的标签时，在标签后加上*再加上需要生成的数量即可，如div>ul>li*3得到：

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

ID和Class和属性
除了生成基本空标签，Emmet还可以指定生成标签的ID、Class和其他的属性。
指定标签的ID需要在标签名后加上#id，如div#div_id。而指定标签的Class属性则是在标签名后加上.class，如div.div_class1。其他的属性则以以下格式：element[attribute1="content" attribute2="content"]来指定其属性名字和值。
例如执行div.container>p#pid>span[style="color:blue"]得到：

<div class="container">
    <p id="pid">
        <span style="color:blue"></span>
    </p>
</div>

标签内容
指定标签属性后，我们还可以指定用{}指定标签的内容。结合上节内容div.container>p#pid>span[style="color:blue"]{Hello World!}得到：

<div class="container">
    <p id="pid">
        <span style="color:blue">Hello World!</span>
    </p>
</div>

标号符 $
在用*符号生成多个相同标签时，我们有时候还想为其Class属性或内容按顺序标上序号，这时候$标识符就能很好发挥作用。
例如我们需要为3个<li>标签的Class属性按顺序赋值，则可以执行以下语句div>ul>li.item$*3便得到：

<div>
    <ul>
        <li class="item1"></li>
        <li class="item2"></li>
        <li class="item3"></li>
    </ul>
</div>

在某些特别的时候，或许还希望序号以倒序形式，又或者序号从某个指定的值开始计算，又或者序号以多位数表示，$都能做到，以下是各种用法的例子：
序号以多位数表示：ul>li.item$$$*3：

<ul>
    <li class="item001"></li>
    <li class="item002"></li>
    <li class="item003"></li>
</ul>

倒序显示序号：ul>li.item$@-*3：

<ul>
    <li class="item3"></li>
    <li class="item2"></li>
    <li class="item1"></li>
</ul>

从特定的值开始：ul>li.item$@3*3：

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

从特定值开始倒序显示：ul>li.item$@-3*3：

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

隐式调用
当使用.和#显示ID名或Class名而不注明标签名的时候（如.class、#id，没有标签名），生成的标签默认跟上一级标签一致，而有些标签则变为内容标签，如div>#div^ul>.item会生成

<div>
    <div id="div"></div>
</div>
<ul>
    <li></li>
</ul>

默认符合特殊规则的标签如下：

ul和ol中会生成li
table、thead、tbody、和tfoot中会生成tr
tr中会生成td
select和optgroup中会生成option

乱数假文
通过使用lorem作为一个元素，可以在标签内随机生成一定的假文。如ul.list>lorem.item*4（与ul.list>.item*4>lorem等价）得到：

<ul class="list">
    <li class="item">Lorem ipsum dolor sit amet, ...</li>
    ...(略)
</ul>

还可以在lorem后加上数字指定需要输出的数量。

其他功能
在Sublime Text 3中，选择一个标签或文本按ctrl+shift+g可以带出输入框从而可以添加该选中标签的外层标签。
对此还有其他应用，如选中纯文本：

1. Home
2. News
3. Product
4. About

按ctrl+shift+G呼出输入框后输入nav>ul.nav>.navitem$*>a|t得到：

<nav>
    <ul class="nav>
        <li class="item1"><a href="">Home</a></li>
        <li class="item2"><a href="">News</a></li>
        <li class="item3"><a href="">Product</a></li>
        <li class="item4"><a href="">About</a></li>
    </ul>
</nav>

在需要匹配的标签后不加数字加入*符号即可匹配上每个分行的元素。而其中a|t的t表示trim可移除字符两端空格或其他预定义字符。
还有，同样以

Home
News
Product
About

为例，选中文本按下快捷键后输入ul>li[title=$#]*>{$#}+a[alt=$#]得到：

<ul>
    <li title="Home">Home<img src="" alt="Home"></li>
    <li title="News">News<img src="" alt="News"></li>
    <li title="Product">Product<img src="" alt="Product"></li>
    <li title="About">About<img src="" alt="About"></li>
</ul>

$#表示选中的元素的值，即可填入标签的属性或文本中。

注释快捷键
ctrl+/快捷键可以快速注释光标所在的标签。

切换标签形式
ctrl+shift+`快捷键可以快速切换标签形式（<tag></tag>或<tag />）。

删除标签
ctrl+shift+;快捷键可以删除选中的标签（<tag></tag一同删除）。

算式计算
ctrl+shift+Y可以执行简单的加减乘除运算。如输入90+56/9执行快捷键后得到结果96.22，而\作为运算符可以使结果取整。在编写CSS时能够发挥作用。

数字改变
选中数值后，ctrl+↑和ctrl+↓能够使选中的数值+1/-1，而ctrl+alt+↑和ctrl+alt+↓可以将数值+0.1/-0.1。

Jinja2快捷补全
学习Flask时候使用的是Jinja2模板引擎，发现也能使用tab键进行补全，如输入extends后执行就会出现：

{% extends "templates" %}

输入if、for执行得到：

{% if expr %}
{% endif %}
{% for item in sequence %}
{% endfor %}

以上为学习Emmet的笔记。