VS Code 通过 Emmet 输入 ! 或 html:5 后按 Tab 即可生成 HTML5 基础结构，前提是文件已保存为 .html 且语言模式设为 HTML；若未响应，需检查并手动切换语言模式为 HTML。
VS Code 本身不内置“一键生成完整 HTML 页面结构”的独立命令，但通过 Emmet + 快捷键组合，3 秒内就能输出符合现代标准的 html5 基础骨架——前提是文件已保存为 .html 后缀且语言模式设为 HTML。
输入 ! 再按 Tab 或 Enter 就能生成基础结构
这是 Emmet 的默认缩写，VS Code 开箱即用。光标需在空文件或新行开头，输入 ! 后触发补全提示，按 Tab 或 Enter 即可展开：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
- 如果没反应，检查右下角语言模式是否为
HTML（不是Plain Text） -
lang属性默认是en，要改成zh-CN需手动修改，或配置 Emmet 用户片段 - 部分旧版 VS Code 需开启
"emerald.enableEmmetForHtml": true（实际是"emerald"拼写错误，正确配置项为"emerald.enableEmmetForHtml"已废弃；当前版本只需确保html语言支持开启）
想自定义 title 或添加 meta 描述？用 html:5 + Tab 更灵活
html:5 是 Emmet 的显式语法，和 ! 等价，但更明确、兼容性更好。输入后可直接编辑 <title> 内容，再按 Tab 跳到 <body>：
- 输入
html:5→Tab→ 光标落在<title>Document</title>中 → 输入项目名 →Tab→ 进入<body> - 想加
<meta name="description">？在<head>里输入meta[name="description"][content=""]→Tab - Emmet 不会自动补全
charset和viewport外的其他 meta，需手写或另配片段
如果总是生成老式 XHTML 结构（<html xmlns>），说明语言模式错了
常见于新建文件未保存就写代码，VS Code 默认识别为 Plain Text，此时 Emmet 会回退到老旧模板。解决方式很简单：
立即学习“前端免费学习笔记（深入）”；
- 按下
Ctrl+Shift+P（Win/Linux）或Cmd+Shift+P（Mac）→ 输入Change Language Mode→ 回车 → 选HTML - 或点击右下角显示的
Plain Text→ 选择HTML - 保存文件为
index.html后，语言模式通常自动切换，Emmet 即刻启用 HTML5 模板
真正容易被忽略的是：Emmet 的行为高度依赖文件扩展名和语言模式，而不是你有没有装插件。哪怕关掉所有扩展，只要文件是 .html 且语言设对，! 就能工作。
