Emmet 语法速查表 - Emmet 常用缩写与代码展开大全
Emmet 的原理是把一条简写字符串解析成 DOM 树再展开成文本，因此它真正擅长的是结构化、可预测的重复标记：导航项、表格行、表单字段、类名与 id 的批量生成。只要目标结构本身有规律，一条 ul>li*6>a 就能省掉十几行手敲；而一旦需要不规则的交互逻辑，就应该收手去写标签，缩写只是加速手段不是替代方式。表里分四组：HTML 基础标签与属性、常用页面结构（头部导航、列表、表格、表单）、CSS 简写、以及嵌套与循环。写的时候注意两点：占位符 $ 会让光标停在待填位置，Tab 连按即可顺序跳到下一个；CSS 简写里用 - 分隔数值，m10-20 展开为 margin 的上下左右两值，比背 CSS 简写表更直接。
典型使用场景
面向还在手写标签层级的前端工程师，尤其是搭页面骨架、写重复结构、给 CSS 里塞重复属性时。Emmet 的价值在于把「描述意图」压缩成一段短缩写，编辑器在按下 Tab 时展开成完整代码。本表覆盖四类：HTML 基础（标签、ID、类、子级 >、兄弟 +、乘法 *n、$ 自增编号、属性 []）、常用结构（form:post、input:email、btn:submit、lorem 占位文本）、CSS 简写（w/h/m/p 尺寸与间距、颜色 bgc/c、字重 fz/fw、布局 d:f、flex 对齐 jc/ai、定位 pos 与 t0 r0 b0 l0、边框 bd1-s-#ccc、圆角 br8），以及嵌套与循环与文本占位。本表最该先掌握的是 > 与 + 的区别，以及 $ 与 {} 的作用位置。
HTML 基础 8
! 或 html:5div#appdiv.containerul>li*3ul>li.item$*3p>span^diva[href="#" title="link"]imgHTML 常用结构 8
form:postinput:textinput:emailbtn:submitselect>option*3table>tr^tr>td*3lorem10lorem-cnCSS 简写 18
w100w100ph50m10m10-20p10-20-30bgc#333c#ffffz16fw700d:fd:gjc:cai:cpos:at0 r0 b0 l0bd1-s-#cccbr8嵌套与循环 5
div>ul>li*5>a{Item $}div+p+bq{Hello}${Item}(#header>ul>li*2>a)+footer>p参数矩阵
| 参数 | 作用 | 示例 |
|---|---|---|
! / html:5 | 展开为 HTML5 文档骨架，含 doctype、html/head/body | ! 或 html:5 |
div#app | 同时生成标签与 ID，这是最基础的组合 | div#app |
div.container | 生成带一个 class 的元素；class 可写多个用点分隔 | div.container |
ul>li*3 | > 是子级关系，直接嵌套在上一元素内 | ul>li*3 |
ul>li.item$*3 | *n 重复 n 次；$ 让类名随次数自增（item1/item2/item3） | ul>li.item$*3 |
p>span^div | ^ 回到上一级父元素插入兄弟，是构造多分支结构的必备操作符 | p>span^div |
a[href="#" title="link"] | 方括号写属性；双引号包裹含特殊字符的值更安全 | a[href="#" title="link"] |
img | 缩写标签名 img 直接展开为 img 标签；部分标签有更短别名 | img |
form:post | 冒号后是标签类型修饰，展开成带 method="post" 的 form | form:post |
input:text / input:email | 生成带 type 的 input；这是表单里最常用的一组 | input:email |
btn:submit | 展开成 type="submit" 的 button，btn 是 button 的缩写 | btn:submit |
select>option*3 | 快速搭出下拉框骨架；带值的写法是 option$ | select>option*3 |
table>tr^tr>td*3 | 用 ^ 换行构造表格：两个 tr 三个 td，注意按 Tab 展开时机 | table>tr^tr>td*3 |
lorem10 | 插入 10 词英文占位文本，用于验证排版与溢出 | lorem10 |
lorem-cn | 插入中文占位文本，验证中文字体与换行更真实 | lorem-cn |
w100 / h50 | width / height 的缩写，单位默认 px | w100 |
w100p | 加 p 后缀表示百分比，w100p 即 width: 100% | w100p |
m10 / m10-20 | margin 缩写；连字符分隔多值对应上下左右，m10-20 即纵向 10 横向 20 | m10-20 |
p10-20-30 | padding 三值写法对应上、左右、下 | p10-20-30 |
bgc#333 / c#fff | 背景色与文字色缩写；写 # 时可省略 #，部分配置里 c 有别的含义需确认 | bgc#333 |
fz16 / fw700 | font-size 与 font-weight 缩写；fw700 是常用字重写法 | fz16 |
d:f / d:g | display 缩写：flex 与 grid，是把布局切换成本降到最低的两条 | d:f |
jc:c / ai:c | justify-content 与 align-items 的缩写，用于 flex 居中（配合 d:f） | jc:c |
pos:a | position 缩写，a 即 absolute | pos:a |
t0 r0 b0 l0 | top/right/bottom/left 简写，四条一起写是绝对定位铺满的惯用写法 | t0 r0 b0 l0 |
bd1-s-#ccc | border 缩写：宽度-样式-颜色，展开为 border: 1px solid #ccc | bd1-s-#ccc |
br8 | border-radius: 8px；写 br50% 得圆角胶囊，是标签的常见形态 | br8 |
div>ul>li*5>a{Item $} | 大括号内是文本占位，$ 自增：a 的内容依次是 Item 1 到 Item 5 | div>ul>li*5>a{Item $} |
div+p+bq | + 是兄弟关系，三个元素同层平铺 | div+p+bq |
{Hello} | 纯文本占位，展开后作为可编辑文本出现在标签内容里 | {Hello} |
${Item} | 把 $ 放进文本里，实现「标签文本带序号」的展开结果 | ${Item} |
(#header>ul>li*2>a)+footer>p | 括号把一段结构分组，避免分组内所有标签与后续串成一条链 | (#header>ul>li*2>a)+footer>p |
易错点与避坑指南
现象展开出来的结构与预期不同，多了一层或少了一层嵌套。
原因> 是子级、+ 是兄弟、^ 是回到父级；连写时三个符号混用极易读错。
处置把长缩写拆成两段展开确认；对复杂结构用括号显式分组。
现象编号没有自增，所有重复项类名或文本完全一样。
原因$ 必须放在类名、ID、属性值或文本里，纯标签名中的 $ 无效。
处置写成 li.item$*3 或 a{Item $}，$ 放在需要变化的位置。
现象按 Tab 没反应，缩写原样留在文件里。
原因光标不在行尾、当前文件语言不是 HTML/CSS，或该编辑器未启用 Emmet。
处置确认文件类型与 Tab 键行为；有些编辑器需要用 Ctrl+E 这类显式展开快捷键。
现象CSS 里 c#fff 展开成了预期之外的属性。
原因不同编辑器/插件预设的 c 可能指 color，也可能指其它属性映射。
处置展开后看一眼实际结果；不确定时直接写全属性名。
现象写完 `!` 展开出的是 XHTML 或旧版 doctype。
原因不同插件对 `!` 的默认展开版本不一致，VS Code 系通常带 html:5。
处置显式写 html:5 而不是只写 `!`。
现象在 JS/TS 文件里写 HTML 缩写，展开成了 JSX 但结构不对。
原因同一份缩写在 HTML 与 JSX 上下文里的处理规则不同（自闭合标签、属性名大小写）。
处置在 JSX 里显式写 JSX 语法，尤其是自闭合标签与 className。
现象生成的表格只有一个 td 或 tr 结构错乱。
原因table 简写需要按 Tab 时机分两步展开，一步到位会把结构压平。
处置分两次触发展开：先展开 tr 层级，再展开 td 层级。
现象展开结果里 class 属性没写上，但缩写里明明写了点号。
原因缩写被当作文本（前置转义）导致解析中断，或所在位置在注释/字符串里。
处置把缩写移到标签内容的正常位置重新输入，避免插在字符串与注释中间。
排障路径
1确认编辑器是否启用了 Emmet 展开
grep -rn "emmet" .vscode/settings.json未配置时展开键与语言绑定可能都不是预期值。
2在 CSS 里做一次最小验证
grep -rn "d:f\|jc:c" src --include="*.vue"确认简写已按预期落成 display:flex 与 justify-content:center。
3排查模板里是否有大量手写重复结构
grep -c "<div class=" pages/index.vue重复度高说明该处适合用组件或循环，而不是继续手写。
4确认项目中缩写生成的结构与既有风格一致
grep -rn "lorem" src占位文本残留在提交里是很常见的事故。
5检查 JSX 上下文里的自闭合标签写法
grep -rn "<img[^>]*/>" src非自闭合写法在 JSX 里会直接编译失败。
6确认编号类名没有与既有样式重复
grep -rn "item1\|item2\|item3" src --include="*.css"缩写生成的类名若恰好撞上已有类名，样式会互相污染。
命令示例
CSS 缩写：双属性 + 单位 + 简写值
m10-20
p10-20-30
bd1-s-#ccc
br8
d:f jc:c ai:c连字符分隔的片段按上/右/下/左展开：两个值是上下+左右，三个值是上+左右+下，四个值才是四边。单位可以省略，默认 px；# 直接跟在属性片段后作为颜色值。这是写重复样式最快的方式，但生成的 CSS 往往需要再手工整理一遍。
输出
m10-20 → margin: 10px 20px; p10-20-30 → padding: 10px 20px 30px; bd1-s-#ccc → border: 1px solid #ccc; br8 → border-radius: 8px;
HTML 结构：乘法、上溯、分组三件套
ul>li.item$*3
p>span^div
table>tr^tr>td*3
(#header>ul>li*2>a)+footer>p> 是子级、+ 是同级、^ 回到上一层，组合起来基本不用动鼠标。$ 在乘法里生成递增序号（item$*3 → item1/item2/item3），$ 单独使用则从 100 开始递增，这是唯一需要在按 Tab 前先敲号的语法——把它放在花括号里最保险：div>ul>li*5>a{Item $}。
输出
ul>li.item$*3 → <ul><li class="item1"></li>…</ul> p>span^div → <p><span></span></p><div></div>
属性与伪类片段：a[href] 与 input:text
a[href="#" title="link"]
form:post
input:email
btn:submit
img
select>option*3方括号里是键值对，冒号是元素变体：form:post 展开成带 method="post" 的 form，input:email 与 btn:submit 是内置片段，会连同必要的 type 一起补齐。片段名是内置词表，输入时编辑器会提示，记忆不下的直接看提示比背更快。
输出
a[href="#" title="link"] → <a href="#" title="link"></a> input:email → <input type="email"> btn:submit → <button type="submit"></button>
占位文本 lorem 与文档骨架
lorem10
lorem-cn
!lorem10 在一个标签内敲出 10 个词，做布局占位比手写 lorem ipsum 更省事；lorem-cn 依赖中文插件，编辑器没装时不会展开，此时请改用手头真实文案，不要留占位文本上线。! 展开 HTML5 骨架，新页面开箱即用。
输出
lorem10 → Lorem ipsum dolor sit amet consectetur adipiscing elit… ! → <!DOCTYPE html> + html/head/body 完整骨架
常见坑与注意事项
- 结构简写生成的是「能用」的 HTML，不是「正确」的 HTML：ul>li*3 不带文本，div+p 会留下空 div 容器，btn:submit 在 form 外展开也毫无意义。展开后必须补内容和语义标签，否则屏幕阅读器会读到一片空元素。
- li.item$*3 里的 $ 只在展开时替换成数字。想在正文里真的写出美元符号或 CSS 变量名时，编辑器会误判为编号标记而替换掉——CSS 里写 $primary 这类 SCSS 变量若在支持 Emmet 的区域输入，可能被提前展开。写 Sass 变量名时先在行内注释掉或换行断开缩写。
- Emmet 会把缩写当成输入流的一部分连续解析：输入 class 名如 col-md-6 里的片段可能触发意外展开，粘贴他人代码时尤其容易发生。批量粘贴外部 CSS/HTML 前先确认 Emmet 处于禁用状态，粘贴后再统一展开需要的部分。
- br8 和 .br 两个字符完全不同的目标：br 是 border-radius，而 br 开头的元素标签在 HTML 区域是 <br>。同一段文件里混排 HTML 与 CSS 缩写时，选区不同、结果不同，展开前务必确认当前光标所在区域。
- lorem10、lorem-cn 生成的占位文本是排版占位，不是可交付内容。lorem-cn 还依赖第三方插件，未安装时可能保持原样不被替换。发布前全局搜索 lorem 与 item1、item2 这类 $ 生成的序号，确认没有漏进产物。
- 缩写里的选择器是按文本匹配的，td*3 生成 3 个 td、div*3 生成 3 个 div，数字写错（td*30）就会静默展开 30 个元素，大表格里很难一眼看出。展开后用 git diff 复查行数是否与预期一致。
提示
- VSCode 默认内置 Emmet，HTML/CSS/JSX/Pug 文件里直接 Tab 即可展开。
- $ 是递增占位符，$$ 补零（01, 02），$@- 倒序。
- CSS 简写用 - 连接多个值，如 m10-20 展开为 margin: 10px 20px。
- 在 JSX/TSX 文件里展开前先在设置里确认 emmet.includeLanguages 已为对应语言启用，否则 Tab 无反应。
- 加 ! 展开为自闭合且不含默认属性，如 img! 得到 <img src="" alt="">，比逐个删属性快。
- 缩写后加 ^ 收尾可将光标直接落到该标签内容前，生成骨架后无需再移动光标手动定位。
常见问题
lorem10 和 lorem-cn 生成的占位文本有什么区别？
lorem10 生成 10 个单词的拉丁式占位文本，输出长度由后面的数字直接控制，适合撑起一段英文段落、需要精确控制占位长度的场景。lorem-cn 生成中文占位文本，词数与中文语义感更适合直接放进中文界面稿，但它依赖插件支持，不是所有编辑器默认都有。两者都只往标签内容里塞文本，用在 p、div、span 这类容器里最省事；如果结构还需要重复多次，就在外层加乘法，例如 lorem*3。
括号分组能解决什么问题，怎么用？
缩写一长就容易读错层级，括号用来显式划定范围，让每段内部独立解析。典型写法是 (#header>ul>li*2>a)+footer>p：括号里的 #header>ul>li*2>a 生成带 ID 的页头结构，括号外的 +footer>p 再把页脚接成它的兄弟节点。没有括号时你得靠记 # 到底作用到哪一段，收尾符号 ^ 也很容易数错层数。分组之后每段都能单独确认，复杂骨架的可控性明显更高。
一个标签要同时带 href 和 title，缩写该怎么连写？
用中括号把属性整体裹住，多个属性之间用空格分隔：a[href="#" title="link"] 展开后是带 href 与 title 的 a 标签。属性的值用双引号包起来最稳，尤其是值里本身带空格或特殊字符时；不带引号的写法在值含空格的情况下会解析错位。如果属性名还需要取值简写，可以和点号、井号混用，比如把 class 与 id 一起挂在标签上——但注意属性简写和文本插值里的花括号是两套机制，不要指望在一个方括号里写出 {} 表达式。
{Hello} 和 ${Item} 这两种写法会展开成什么？
{Hello} 是纯文本插值，把花括号里的内容原样放进标签的文本位置，不带任何编号逻辑。${Item} 则是在文本里加入自增编号，处在乘法或列表结构的第几个就显示成 Item 1、Item 2、Item 3——数字来自 $ 这个占位符，被包在文本插值里使用。同理还有 $@- 这种倒序形式，会生成倒着数的编号。所以要静态占位文字用 {}，要一串带序号的条目才用 ${}。
form:post、input:email、btn:submit 这几个简写各自补全了什么？
它们是给常用标签预设了默认属性，写完整标签也可以，但要多敲一串。form:post 展开出带 method="post" 的 form，省掉最容易忘的那个属性；input:email 展开成 <input type="email">，input:text 同理给出 <input type="text">，浏览器据此决定是否做邮箱格式校验与移动端键盘类型；btn:submit 展开成 <button type="submit"></button>，按钮类型默认就是 submit，写出来主要是为了在 type="button" 的文件里避免误提交。表单里需要多种输入类型时，重复利用这套简写比手写完整标签快得多。
由 巧匠 维护
公开更新于 2026年7月21日，内容持续校对官方文档。