HTML文档结构是浏览器解析渲染的前提，<head>和<body>必须为<html>的强制直系子元素；<meta charset>须置于<head>最前，否则中文乱码；<script>放<head>中未加defer或async会导致DOM未就绪而报错。
HTML 文档结构不是可选的装饰，而是浏览器解析和渲染页面的前提。跳过或误用 <head>、<body>、<html> 会导致样式失效、脚本不执行、SEO 降权，甚至部分浏览器直接拒绝渲染。
为什么 <head> 里放 <script> 有时会失效
浏览器按顺序解析 HTML：遇到 <script> 就暂停 DOM 构建，立即下载并执行。如果脚本在 <head> 中且没加 defer 或 async，它会在 <body> 内容还没生成时就运行——此时 document.getElementById('main') 必然返回 null。
- ✅ 正确做法：脚本放在
<body>底部；或加defer（保证执行顺序，且等 DOM 解析完）；或加async（适合独立模块，不保证顺序） - ⚠️ 常见错误：
<script src="app.js"></script>直接写在<head>里，又没处理 DOM 就绪逻辑 - ? 验证方式：打开开发者工具 → Elements 标签页，看
<body>是否已加载完成，再检查脚本是否访问了尚未存在的节点
<meta charset="UTF-8"> 必须放在 <head> 最前面
字符编码声明必须是 <head> 中第一个非空、非注释的标签。如果它被 <title> 或其他 <meta> 挡在后面，浏览器可能已用默认编码（如 ISO-8859-1）解析了前几行，导致中文乱码无法挽回。
- ✅ 正确顺序：
<meta charset="UTF-8">紧跟<head>开始，前面不能有空格、换行或注释 - ❌ 错误示例：
<head><title>页面</title><meta charset="UTF-8"></head>—— 此时 title 的中文已乱码 - ? 补救无效：后续再设
document.charset = 'UTF-8'也改不回已错解的文本
<html lang="zh-CN"> 不只是给 SEO 看的
这个属性直接影响屏幕阅读器的发音、拼写检查器的语言切换、浏览器内置翻译的识别准确率，甚至影响某些 CSS 伪元素（如 ::before 中的引号样式）的本地化表现。
立即学习“前端免费学习笔记（深入）”；
- ✅ 推荐写法：
<html lang="zh-CN">（简体中文）、<html lang="zh-TW">（繁体中文），避免只写lang="zh" - ⚠️ 注意点：不要动态修改
document.documentElement.lang—— 多数辅助技术只读取初始值，改了也不生效 - ? 检查方法：右键 → “检查” → 查看
<html>标签是否带正确lang属性；用 VoiceOver 或 NVDA 测试朗读效果
真正卡住人的从来不是标签名记不住，而是结构层级错位后引发的连锁反应：一个漏写的 </body> 可能让整个 CSS 重排失效；一个错放的 <meta> 会让整页中文变成方块。结构不是模板，是约束条件——它定义了浏览器“能做什么”和“必须怎么做”。
