VS Code 中输入 ! 后按 Tab 即可快速生成标准 HTML5 骨架，无需插件；需确保文件为 .html、语言模式为 HTML、光标在空行或行首，且 emmet.triggerExpansionOnTab 为 true。
用 VS Code 快捷键生成 HTML5 骨架最省事
VS Code 默认支持 html:5 或 ! 片段，输入后按 Tab 即可生成标准 HTML5 结构。这个片段由内置的 Emmet 提供，无需额外插件。
常见错误是输成 html5（少冒号）或 !html（多前缀），结果没反应。注意必须在 .html 文件中、且光标位于空行才生效。
- 确保文件后缀是
.html，不是.txt或未保存的临时文件 - 不要在已有标签内部输入，比如
里敲!会出错 - 如果失效，检查设置里是否禁用了 Emmet：
emmet.triggerExpansionOnTab必须为true
手动写时别漏掉 <meta charset="utf-8"> 和 <meta name="viewport">
很多新手复制旧模板，用 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 这种 HTML4 写法，虽然能用，但不符合 HTML5 规范，且可能影响移动端渲染。
<meta name="viewport"> 缺失会导致页面在手机上缩放异常——这是线上环境最常被忽略的兼容性问题。
立即学习“前端免费学习笔记（深入）”；
-
<meta charset="utf-8">必须放在最前面（越早越好，避免解析歧义） -
<meta name="viewport" content="width=device-width,initial-scale=1.0">建议紧跟其后 - 不要写
<meta http-equiv="X-UA-Compatible" content="IE=edge">—— 现代项目已无必要，反而可能干扰 Edge 浏览器的默认行为
用脚手架或 CLI 生成适合多页项目的骨架
单个 index.html 用 Emmet 足够；但如果项目含 about.html、contact.html 等多页，重复手敲容易不一致。这时推荐用 npx html-skeleton 或 npm init vite@latest（选 vanilla 模板）快速拉起基础结构。
这类工具生成的骨架通常带 <title></title> 占位符、语义化 <main></main> 包裹和基础 CSS 重置逻辑，比纯空白模板更贴近实际开发起点。
-
npx html-skeleton --minimal输出极简版（仅必需标签） -
npx html-skeleton --full加入<header></header>、<nav></nav>、<footer></footer>占位 - Vite 生成的
index.html默认含<div id="app">，若不用框架需手动删掉，否则控制台报 <code>TypeError: Cannot set property 'innerHTML' of null检查生成结果是否真合规：用 W3C 验证器扫一眼
Emmet 和脚手架一般不会出大错，但自定义修改后容易引入小问题：比如把
写成（缺引号）、<script></script>标签没闭合、或<meta>放到了里。这些错误浏览器大多能容错，但会影响 SEO 和无障碍访问，上线前花 10 秒粘贴到 W3C Nu Html Checker 就能暴露出来。
- 验证器报
Bad value X for attribute X多半是拼写或格式问题（如charaset打错） - 报
Element X not allowed as child of element X说明标签嵌套非法（比如<p></p>里放<div>） <li>验证通过 ≠ 页面可用，但它能守住 HTML 结构底线</li> 实际项目里，骨架只是起点。真正容易被忽略的是后续对 <code><title></title>、<meta name="description">的及时填充，以及首次加载时是否触发了非预期的 JS 错误——这些不会在骨架阶段暴露，但会在用户打开页面那一刻立刻显现。
- 验证器报
