Emmet 中输入 html 后按 Tab 可生成最小合法 HTML 骨架；html:5 或 ! 生成含 charset、viewport 和 title 的完整 HTML5 结构；需确保小写、HTML 语法模式及正确触发方式。
用 html 命令触发 Emmet 快速生成骨架
Sublime Text 默认不带完整 HTML 模板，但装了 Emmet（绝大多数新装版本已预置）后，html 是最短、最稳的入口。敲完直接按 Tab，它会自动展开成带 <!DOCTYPE html>、<html lang="en">、<head> 和 <body> 的最小合法结构。
常见错误是输成 HTML（大写）或 Html——Emmet 只认小写的 html；另外如果没触发，先确认是否在 HTML 语法模式下（右下角应显示 HTML，不是 Plain Text）。
- 确保文件后缀为
.html或已手动切换语法：菜单View → Syntax → HTML - 输入
html后必须按Tab，回车或空格都不行 - 若展开内容缺失
<meta charset="UTF-8">，说明 Emmet 配置被改过，可重置用户片段或手动补上
自定义 html:5 或 ! 生成更全的结构
html:5 和 ! 是 Emmet 的两个等效缩写，功能完全一样，都会生成含 <meta charset="UTF-8">、<meta name="viewport"> 和基础 <title> 的现代 HTML5 骨架。比纯 html 多两行关键 meta，适合大多数网页起步。
注意：有些老教程说 ! 是“唯一快捷方式”，其实只是习惯问题；html:5 更直白，也更容易被团队新人理解。
立即学习“前端免费学习笔记（深入）”；
-
!更快，但容易误按成其他符号（比如键盘切换后按出中文感叹号） -
html:5稍长，但拼写明确，容错高 - 两者生成的
<title>默认为空，别忘了手动填内容，否则 SEO 和标签页显示异常
删掉默认 <title> 再补？不如直接改 Emmet 配置
很多人每次都要删 <title> 标签再重写，其实 Emmet 支持自定义骨架。修改 Preferences → Package Settings → Emmet → Settings – User，加一行：
{
"snippets": {
"html": {
"abbreviations": {
"html:5": "!!!"
}
}
}
}
这样 html:5 就和 ! 完全一致，且你还能进一步定制 !!! 对应的内容（比如预置常用 CSS/JS 引入）。但要注意：配置改错会导致 Emmet 失效，建议只改 snippet 映射，别碰底层语法定义。
- 修改后无需重启 Sublime，保存即生效
- 如果
html:5不响应，检查 JSON 格式是否多逗号或缺引号——Sublime 不报错，但 Emmet 会静默忽略整个配置块 - 不推荐直接覆盖
emmet/snippets.json文件，升级包时会被重置
为什么不用插件做“一键新建 HTML 文件”？
确实有插件（如 SideBarEnhancements）支持右键新建 .html 文件并自动填充内容，但这类行为不可控：模板固定、难调试、更新后可能覆盖自定义内容。而 Emmet 是编辑时触发，粒度细、可组合（比如 html:5>head>meta[charset=UTF-8]+title{My Site}+body>h1{Hello}），更适合真实开发节奏。
真正容易被忽略的是：Emmet 的骨架只是起点。很多新手以为生成完就“结构齐了”，结果发现 <script> 放 <head> 里导致执行失败，或者漏了 lang 属性影响屏幕阅读器——这些不在骨架里，得自己补，而且得补对位置。
