Emmet插件通过缩写提升HTML编码效率，输入如html:5、div.header、ul>li*3等缩写后按Tab键即可生成完整代码，支持类名、ID、属性、嵌套、重复及文本插入，熟练使用可极大加快结构编写速度。
在 Sublime Text 中快速生成 HTML 标签，主要依赖于 Emmet 插件。它能将简短的缩写语法转换为完整的 HTML 结构，极大提升编码效率。Sublime Text 默认已集成 Emmet（原名为 Zen Coding），只需掌握常用语法即可高效编写代码。
基础标签生成
输入缩写后按 Tab 键即可展开为完整标签：
- html:5 → 生成 HTML5 文档结构
- div →
- p →
- ul>li*3 → 生成包含 3 个列表项的无序列表
添加类名、ID 和属性
使用 .、# 和 [] 快速添加 class、id 和自定义属性：
立即学习“前端免费学习笔记（深入）”；
- div.header →
- nav#main-menu →
- a[href="#"][title="链接"] → 带多个属性的链接标签
- input.text#name[type="text"][placeholder="姓名"] → 复合结构输入框
嵌套与重复结构
用 >、+、* 构建复杂结构：
- div>p → div 包含 p 标签
- h1+p+ul → 三个同级元素依次排列
- ul>li.item*3 → 生成 3 个带 class 的列表项
- section>article.post*2>h2.title+p → 多层嵌套结构
文本与自动编号
使用 {} 插入文本，$ 实现自动编号：
-
p{这是段落} →
这是段落
- li.item$*3 → 生成 item1、item2、item3 的 class 名
- h2{章节 $}*3 → 生成“章节 1”到“章节 3”
常用快捷缩写示例
- ! 或 html:5 → 完整 HTML5 模板
- link:css → 引入 CSS 文件
- script:src → 带 src 的 script 标签
- img[src alt] → 图片标签（自动补全常用属性）
- table>tr*2>td*3 → 2 行 3 列表格结构
熟练使用 Emmet 缩写，能让你在 Sublime 中几秒写出原本需要几分钟的 HTML 结构。基本上就这些常用规则，多练几次就能形成肌肉记忆。
