⚡
Emmet 缩写速查
Emmet 缩写速查:快速展开 HTML 结构,前端提效必备。
本地处理 · 不上传
加载工具中…
相关：emmet · html · 缩写 · 前端 · 速查
Emmet 缩写速查列出用简短缩写快速生成 HTML 与 CSS 结构的语法。熟练后写结构的速度提升非常明显。
使用步骤
- 先想好目标 HTML 结构
- 用大于号表示子级、加号表示同级写出缩写
- 需要重复时用星号加数字，编号用美元符
- 按 Tab 展开后核对属性与嵌套是否符合预期
使用场景
- 快速生成 HTML 骨架
- 批量生成重复的列表结构
- 用缩写写 CSS 属性
- 提高手写标签的效率
小贴士
- 核心语法是 CSS 选择器式的：`>` 是子元素、`+` 是兄弟、`*` 是重复、`$` 是序号占位。
- `ul>li*5>a` 一行就能生成带五个链接项的列表，这类重复结构是 Emmet 收益最大的场景。
- 现代编辑器（VS Code 等）已内置 Emmet，无需安装插件，直接输入缩写按 Tab 即可展开。
常见问题
缩写按 Tab 没反应？
确认当前文件类型是否被识别为 HTML/CSS。在 JSX 或模板文件中可能需要在编辑器设置里额外开启对应的语言映射。
最常用的是哪几个？
`!` 生成 HTML5 骨架，`div.class` 生成带类名的 div，`ul>li*3` 生成列表，`$` 做序号占位。掌握这几个就能覆盖日常大部分用途。
CSS 也能用吗？
能。输入 `m10` 展开为 margin: 10px，`df` 展开为 display: flex。CSS 缩写的规律是取属性首字母，熟练后写样式也能明显提速。
Emmet 缩写速查是免费的吗？
是。本站所有工具完全免费，无需注册登录、无广告干扰，打开即用。
使用Emmet 缩写速查，我的数据安全吗？
安全。该工具在你的浏览器本地完成处理，输入内容不会上传到服务器，隐私更有保障。