HTML文档结构必须严格包含、、、四要素，缺一即触发怪异模式，导致解析异常、SEO失效、乱码或白屏；须置于最前，lang属性推荐显式声明，虽非强制但关乎可用性与可访问性。
HTML 文档结构不是“写完标签就行”，而是浏览器解析和渲染的起点。没写对 、漏掉 <code> 或把 里内容塞进 ，轻则 SEO 失效、字符乱码，重则整页白屏或样式错乱。
必须写的四件套：、<code>、
这四个不是可选“建议”，是 HTML5 的强制骨架。缺任何一个，浏览器会降级到怪异模式（Quirks Mode），导致盒模型、字体渲染、Flex 布局行为全乱。
必须放在第一行，且不能带任何空格或注释前置；写成 <code> 或 <code> 都合法，但大小写混用容易在团队协作中引发 lint 报错-
推荐带上lang属性，屏幕阅读器、搜索引擎、甚至某些 CSS 伪类（如:lang()）都依赖它；不写默认为und（未定义），不是自动识别 -
里至少要有<meta charset="UTF-8">，否则中文、emoji、特殊符号大概率显示为 ；<title></title>虽不强制，但没它，浏览器标签页就是空白，用户无法区分多个打开的页面 -
是唯一能放可见内容的地方；把<script></script>或<link>直接丢在开头，可能阻塞渲染；放在末尾又可能因 DOM 未就绪而报document.getElementById is not a function
<meta charset> 和 <meta viewport> 为什么不能省
这两个 <meta> 不只是“移动端适配”或“编码声明”，它们直接影响页面能否被正确加载和交互。
-
<meta charset="UTF-8">必须出现在最前面（最好第二行），因为浏览器在读取到第一个非 ASCII 字符前就决定编码方式；如果它后面还有别的<meta>或<title></title>，且含中文，就可能已按错误编码解析过一次，再改也来不及 -
<meta name="viewport" content="width=device-width, initial-scale=1.0">不是只给手机用——现代桌面浏览器（尤其是 Chrome 新版）也会根据这个值调整缩放逻辑；漏掉它，页面在高 DPI 屏幕上可能文字极小、按钮难点，且rem、vh等单位计算失准 - 别写
<meta http-equiv="X-UA-Compatible" content="IE=edge">：IE 已淘汰，该标签在 Edge Chromium 中无作用，还占字节、干扰 Lighthouse 评分
常见结构误用：把脚本/样式塞错位置
<script></script> 和 <link rel="stylesheet"> 放错地方，不会报语法错，但会引发真实运行时问题。
立即学习“前端免费学习笔记（深入）”；
- 内联
<script></script>写在里，又没加defer或async，会同步阻塞 HTML 解析，DOM 尚未构建完成就执行document.querySelector，结果返回null - CSS 文件通过
<link>引入时，如果路径写成css/style.css但实际文件在./assets/css/style.css，404 错误不会中断页面，但样式丢失且控制台静默——得靠 Network 面板查 - 把
<style></style>标签放在里虽合法，但部分旧版 Safari 会忽略；更严重的是，它会触发浏览器重排（reflow），影响首屏性能 - 不要在
里用<script src="..."></script>加载第三方统计代码——应改用async并确保它不依赖 DOM，否则极易造成竞态
真正容易被忽略的，不是“要不要写 <title></title>”，而是 <meta charset> 的位置、lang 属性的值是否匹配实际内容语言、以及 <script></script> 是否无意中把 DOM 操作提前到了节点创建之前——这些错误不会红屏，但会让调试变成猜谜。
