Emmet Documentation 是什么网站?

docs.emmet.io 是 Emmet 的官方文档站，面向使用 HTML、CSS 的前端开发者，用来查阅 Emmet 的缩写语法、可用动作、过滤器和自定义配置。它的核心价值不是介绍概念，而是提供一份可随时查的参考：当你记不清某个缩写怎么写、某个动作的用途是什么、或想改默认行为时，来这里找对应条目。如果你只是想知道 Emmet 能做什么，首页的演示已经能说明；如果你要真正用起来，需要配合支持 Emmet 的编辑器。

网站提供哪些内容

从文档的导航结构看，内容大致分为几类：

  • 缩写语法（Abbreviations Syntax）：元素类型、隐式标签名、Lorem Ipsum 生成器、CSS 缩写、厂商前缀、渐变、模糊搜索等。
  • 动作（Actions）：展开缩写、Balance、跳转到匹配对、用缩写包裹、跳转到编辑点、选择条目、切换注释、拆分/合并标签、移除标签、合并行、更新图片尺寸、计算数学表达式、数字增减、反射 CSS 值、图片编码/解码为 data:URL 等。
  • 过滤器（Filters）：如 Yandex BEM/OOCSS 相关的输出处理。
  • 自定义（Customization）：snippets.json、preferences.json、syntaxProfiles.json。
  • Cheat Sheet：速查表，适合快速回忆常用写法。

此外，页面还列出了两个关联工具：Emmet LiveStyle（CSS、LESS、SCSS 的实时双向编辑工具）和 Emmet Re:view（并排测试响应式设计）。

Emmet 解决的是什么问题

文档首页给出了一个清晰的定位：大多数编辑器允许你保存和复用代码片段（snippets），但这类实现有两个通病——必须先定义片段，且无法在运行时扩展。Emmet 的做法是让你输入类似 CSS 的表达式，由它动态解析，并根据你写的缩写生成对应输出。

首页演示用的例子是：

ul#nav>li.item$*4>a{Item $}

执行“Expand Abbreviation”（Tab 键）后，这段缩写会被展开成对应的 HTML 结构。也就是说，你写的是描述结构的短表达式，得到的是完整标记。

适合谁看

  • 正在用或准备用 Emmet 的前端开发者，需要查语法和动作细节。
  • 想自定义 Emmet 行为（改 snippets、偏好、语法配置）的人。
  • 想了解 Emmet 能覆盖哪些编辑操作，再决定是否引入工作流的人。

怎么用这份文档

建议的查阅顺序是：先用 Cheat Sheet 建立对常用缩写的印象；遇到具体写法不确定时回到“Abbreviations Syntax”；需要批量或结构性编辑时查“Actions”；想改默认输出或加自己的片段时看“Customization”。文档中的动作示例通常会标注对应的快捷键（如 Balance 为 Cmd-D、Toggle Comment 为 Cmd-/），但实际按键取决于你使用的编辑器及其 Emmet 集成方式，以编辑器为准。

docs.emmet.io