输入!或html:5按Tab可快速生成HTML5模板,Emmet支持简写扩展为完整代码,如div.container生成带类的div,ul>li*5创建五个列表项,结合Sublime多光标功能提升开发效率。

在使用 Sublime Text 编辑器编写 HTML 时,借助 Emmet 插件可以快速生成标准的 HTML 模板结构,大幅提升编码效率。Emmet 是一个强大的工具,支持通过简写语法快速扩展为完整代码。
启用 Emmet 插件
Sublime Text 默认已集成 Emmet,无需额外安装。如果发现无法使用,可通过 Package Control 安装 Emmet:
- 按下 Ctrl+Shift+P(Mac 上为 Cmd+Shift+P)打开命令面板
- 输入 "Install Package" 并选择对应选项
- 搜索 "Emmet" 并安装
快速生成 HTML 模板结构
在新建的 .html 文件中,输入以下简写并按下 Tab 键即可自动生成标准 HTML5 结构:
! 或 html:5按下 Tab 后,Emmet 会自动扩展为完整的 HTML5 页面模板,包含 doctype、html、head、meta 标签、title 和 body 等基础结构。
立即学习“前端免费学习笔记(深入)”;
常用 HTML 快速生成语法
除了完整页面结构,Emmet 还支持多种常用标签的快速输入:
- html:4t — 生成 HTML 4 Transitional 模板
- html:4s — 生成 HTML 4 Strict 模板
- html:xt — 生成 XHTML 1.0 Transitional
- div.container → 生成带有 class="container" 的 div
- ul>li*5 → 生成包含 5 个 li 的 ul 列表
提高效率的小技巧
结合 Emmet 与 Sublime Text 的多光标编辑、快捷键等功能,能进一步提升开发速度:
- 输入完 ! 后按 Tab,光标会自动定位到 title 标签内,方便立即填写页面标题
- 可在 body 中输入 main>article*3 快速创建主内容区和三篇文章区块
- 配合 Sublime 的实时预览插件(如 LiveReload),可实现边写边看效果
基本上就这些,熟练掌握 Emmet 简写后,新建 HTML 页面只需几秒,结构清晰又标准,日常开发非常实用。











