VS Code中输入!后按Tab可生成标准HTML5骨架，需满足文件为.html/.htm、语言模式设为HTML、光标位于空行开头三个条件；生成内容含<!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></body></html>。
直接用编辑器快捷键生成，比复制粘贴更稳、比手敲更少出错。
VS Code 中 ! + Tab 能生成什么
这是最轻量、最可靠的起点。VS Code 自带的 Emmet 支持输入 ! 后按 Tab，自动生成带 lang、charset、viewport 和基础语义结构的 HTML5 骨架。
- 生成内容默认是
lang="en"，中文项目需手动改成lang="zh-CN" - 不包含
<header></header>、<main></main>等语义标签，只输出内一个<div>，后续得自己补 <li>如果插件被禁用或快捷键冲突，可在设置里搜 <code>emmet确认html语法是否启用 -
<!DOCTYPE html>必须是文件第一行，前面不能有任何字符（包括 BOM、空格、注释） - Windows 记事本保存为 UTF-8 时默认带 BOM，会导致该问题；推荐用 VS Code 或 Sublime Text 保存为
UTF-8 without BOM - 检查方式：在 DevTools 的 Elements 面板顶部看是否有
Rendered in Quirks Mode提示 - 顺序错误的典型表现：移动端页面缩放异常、文字显示方块、Lighthouse 报
charset not declared -
charset只能出现一次，且必须是UTF-8（不是utf8、UTF8或utf-8） - VS Code 的 Emmet 默认顺序正确，但手动拼写时容易颠倒
- 必须成对使用：
<header>...</header>，不能只写开标签 -
<main>在整个文档中只能出现一次，且不应嵌套在<article>或<aside>内 - 用
<section>包裹逻辑区块比用<div>更利于 SEO，但别为了语义硬套——没明确主题的纯样式容器仍该用<div>
DOCTYPE 写错或前置空格会触发怪异模式
浏览器一旦进入怪异模式（Quirks Mode），box-sizing、margin: 0 auto、甚至字体继承都可能失效——这不是 CSS 写错了，而是解析引擎退回到了 IE5.5 时代。
为什么 meta charset 必须在 meta viewport 前面
浏览器从上到下解析 <head>，charset 决定后续所有字节如何解码。如果 viewport 在前且 charset 缺失，中文属性值（比如 content="宽度=device-width"）会被当成乱码处理，导致视口设置失效。
立即学习“前端免费学习笔记（深入）”；
语义化标签不是“可选装饰”，而是结构刚需
把 <div class="header"> 换成 <header> 不会多加载 1 字节，但会影响 Lighthouse 评分、屏幕阅读器朗读逻辑、以及部分爬虫对主内容的提取优先级。
真正卡住人的从来不是“会不会写”，而是某处空格、某个大小写、某次保存编码选错——这些细节不报错，却让页面在不同设备上行为不一致。
