Emmet 语法速查手册

Emmet 是一款强大的前端开发工具集，其核心在于通过简洁的缩写语法快速生成复杂的 HTML 和 CSS 代码。本手册系统梳理了其核心语法与常用缩写：HTML 部分涵盖文档结构、语义化标签、表单控件等元素的快速生成；CSS 部分则汇总了布局、盒模型、文本样式及 Flexbox 等属性的快捷写法。掌握 Emmet 能极大提升编码效率，开发者只需记住类似 ul>li.item$*5 这样的简短字符串，即可展开为完整的代码片段，是现代化工作流中不可或缺的利器。

博主博客

• https://blog.uso6.com
• https://blog.csdn.net/dxk539687357

📖 语法

子元素（Child）

语法： >
示例：

nav>ul>li

展开为：

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

兄弟元素（Sibling）

语法： +
示例：

div+p+bq

展开为：

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

向上跳转（Climb-up）

语法： ^
示例1：

div+div>p>span+em^bq

展开为：

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

示例2：

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

展开为：

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

分组（Grouping）

语法： ()
示例1：

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>

示例2：

(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>

乘法（Multiplication）

语法： *
示例：

ul>li*5

展开为：

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

项目编号（Item Numbering）

语法： $
示例1：

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>

示例2：

h$[title=item$]{Header $}*3

展开为：

<h1 title="item1">Header 1</h1>
<h2 title="item2">Header 2</h2>
<h3 title="item3">Header 3</h3>

示例3：

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>

示例4： 逆序

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>

示例5： 指定起始编号

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>

ID 和 CLASS 属性

语法：

• #id
• .class

示例：

#header

展开为：

<div id="header"></div>

.title

展开为：

<div class="title"></div>

form#search.wide

展开为：

<form id="search" class="wide"></form>

p.class1.class2.class3

展开为：

<p class="class1 class2 class3"></p>

自定义属性

语法： [attr=value]
示例1：

p[title="Hello world"]

展开为：

<p title="Hello world"></p>

示例2：

td[rowspan=2 colspan=3 title]

展开为：

<td rowspan="2" colspan="3" title=""></td>

示例3：

[a='value1' b="value2"]

展开为：

<div a="value1" b="value2"></div>

文本内容

语法： {}
示例1：

a{Click me}

展开为：

<a href="">Click me</a>

示例2：

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

展开为：

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

隐式标签名

示例1：

.class

展开为：

<div class="class"></div>

示例2：

em>.class

展开为：

<em><span class="class"></span></em>

示例3：

ul>.class

展开为：

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

示例4：

table>.row>.col

展开为：

<table>
    <tr class="row">
        <td class="col"></td>
    </tr>
</table>

🌐 HTML 缩写

所有未知的缩写都会被转换为标签，例如 foo → <foo></foo>

文档结构

常用元素

表单元素

媒体元素

语义化元素

列表元素

表格元素

注释

🎨 CSS 缩写

CSS 模块使用模糊搜索来查找未知缩写，例如 ov:h == ov-h == ovh == oh

视觉格式化

边距和填充

尺寸

字体

文本

背景

边框

定位

Flexbox

动画和过渡

其他

📊 XSL 缩写

模板

流程控制

变量和参数

输出

文档结构

💡 使用技巧

1. 组合使用：可以将多个缩写组合使用，例如：

   .container>ul.list>li.item$*3>a{Link $}
   

2. 快速生成结构：使用 ! 或 html:5 快速生成 HTML5 文档结构

3. 响应式图片：使用 picture 相关缩写生成响应式图片代码

4. CSS 前缀：在 CSS 属性前加 - 可以生成带供应商前缀的属性

5. 隐式标签：根据上下文自动推断标签类型，提高编写效率

注意：此手册基于 Emmet 官方文档整理，不同编辑器中的 Emmet 插件可能会有细微差异，请以实际编辑器支持为准。

参考文献

• Cheat Sheet