VS Code 中输入 ! 后按 Tab 即可生成 HTML5 骨架，无需插件；需确保文件为 .html/.htm、语言模式为 HTML、光标在空行或行首，且 emerald.emmetTriggerExpansionOnTab 为 true。
输入 ! 后按 Tab 键就能生成完整 HTML5 骨架
VS Code 默认支持 Emmet，不需要装插件、不用改设置，只要光标在空的 .html 文件里，敲 ! 再按 Tab（不是 Enter），立刻出来带 <html>、<head>、<body> 的标准结构。
常见错误是：在已有内容的行里输 !，或者按了 Enter —— Emmet 只响应 Tab 触发；还有人误以为要先输 html 再 Tab，其实 ! 是快捷别名，更直接。
- 必须在
.html或.htm文件中，且语言模式设为HTML（右下角看得到） - 光标得在空行或行首，否则 Emmet 可能只补全局部标签
- 如果没反应，检查设置里
emerald.emmetTriggerExpansionOnTab是否为true（默认就是）
想自定义骨架内容？改 html.suggest.html5 配置就行
VS Code 的默认骨架是写死的，但你可以用用户代码片段（User Snippets）覆盖它。不是改源码，而是新建一个 html.json 片段文件，把 ! 绑定到你自己的模板上。
使用场景：团队统一加 <meta name="viewport">、预设 lang 属性、插入常用 CSS/JS 引入逻辑——这些都比每次手动补全靠谱。
立即学习“前端免费学习笔记（深入）”；
- 打开命令面板（
Ctrl+Shift+P/Cmd+Shift+P），搜Configure User Snippets→ 选html - 替换默认内容为：
{ "HTML5 with viewport": { "prefix": "!", "body": [ "<!DOCTYPE html>", "<html lang=\"zh-CN\">", "<head>", " <meta charset=\"UTF-8\">", " <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">", " <title>$1</title>", "</head>", "<body>", " $2", "</body>", "</html>" ], "description": "Custom HTML5 skeleton" } } - 保存后，再按
!+Tab就走你自己的模板，$1和$2是可跳转编辑位置
为什么不用扩展或自定义命令来生成骨架
有人试过装 Auto Close Tag 或写 shell 脚本自动写文件，纯属绕远。VS Code 原生 Emmet 已覆盖 99% 的日常需求，加扩展反而可能冲突（比如某些格式化插件会重排你刚生成的骨架，删掉空行或缩进）。
性能上没差别，但兼容性风险明确：VS Code 更新后，非官方扩展可能失效；而 ! + Tab 是核心功能，十年没变过。
- 扩展如
HTML Boilerplate多数只是包装了一层 Emmet，还多占一个快捷键位 - 用任务（Tasks）或脚本生成，适合批量建项目，单个文件毫无必要
- 如果你在远程开发（SSH/Dev Container）里发现
!不生效，大概率是语言服务器没加载 HTML 支持，不是 Emmet 问题
注意 lang 属性和字符编码的实际影响
很多人照抄模板，但漏掉 lang 或写错值，比如用 zh 而不是 zh-CN。这不只是语义问题：屏幕阅读器靠它切换语音引擎，搜索引擎也用它判断页面目标区域。
<meta charset="UTF-8"> 看似固定，但如果你的文件实际存为 GBK 编码（比如从旧系统复制过来），浏览器会按 UTF-8 解析，出现乱码——这时候骨架再标准也没用。
- 新建文件后，右下角点编码（如
UTF-8），选Save with Encoding确认一次 -
lang值建议查 IANA 语言子标签库，别凭感觉写 - 如果项目要支持多语言，骨架里别硬编码
lang，留成<html lang="$1">更灵活
