输入 ! 后按 Tab 可在 HTML 文件中快速生成含 DOCTYPE、html、head、body 的完整结构，需确保语言模式为 HTML、编码为 UTF-8 且 emmet.triggerExpansionOnTab 为 true。
用 ! + Tab 触发 Emmet 快速生成
Emmet 是 VSCode 内置的代码补全引擎，默认启用，! 是 HTML 骨架最简触发符。输入 ! 后按 Tab（不是 Enter），立刻生成带 <!DOCTYPE html>、<html lang="en">、<head> 和 <body> 的完整结构。
- 必须在
.html文件中操作，纯文本或.txt文件里不生效 - 如果没反应，检查右下角语言模式是否为
HTML（点击后可手动切换） - 某些插件（如 Auto Rename Tag）可能劫持
Tab，冲突时临时禁用测试
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <p></body> </html>
修改默认 lang 属性和 title 内容
VSCode 不会自动填你项目的真实语言或标题，lang 默认是 en，<title> 固定为 Document。想改得持久，得动用户片段或设置。
- 修改方式：打开命令面板（
Ctrl+Shift+P/Cmd+Shift+P），搜Preferences: Configure User Snippets→ 选html.json - 替换默认
html片段中的"lang": "en"和"<title>Document</title>即可 - 注意：别删掉
$1和$2占位符，它们控制光标初始位置
遇到 Emmet 不生效的三个常见原因
不是所有 HTML 文件都“认” Emmet，尤其从其他编辑器粘贴过来或编码异常时。
- 文件未保存，后缀名为空 → 保存为
index.html再试 - 文件编码不是 UTF-8 → 右下角点击编码（如
UTF-8或GBK），选Reopen with Encoding→UTF-8 - 设置里关了 Emmet → 检查
emmet.triggerExpansionOnTab是否为true（在设置搜索该配置项）
不用 Emmet 的备用方案：自定义代码片段
如果团队强制统一骨架（比如加 CDN、特定 meta、注释头），Emmet 就不够用了。这时直接写用户片段更可控。
立即学习“前端免费学习笔记（深入）”；
- 路径：命令面板 →
Preferences: Configure User Snippets→html.json - 添加一个新片段，
prefix设为myhtml，body填你要的结构 - 输入
myhtml+Tab就能插入，比记!更贴合实际需求
真正卡住人的，往往不是“怎么生成”，而是生成后发现 lang 错了、charset 缺了、或者光标没跳到 <title> 里——这些细节 VSCode 不帮你猜，得自己设清楚。
