HTML文档必须严格遵循5个核心标签的顺序：、、（含在前）、；缺一不可，否则导致解析异常、SEO失败或无障碍访问失效。
HTML文档结构不是“写个包起来就完事”，而是浏览器解析、SEO抓取、无障碍访问和后续JS操作的共同前提——错一处，document.body可能为空，DOMContentLoaded事件延迟，甚至搜索引擎直接跳过你的页面。
必须存在的5个标签及其顺序不能乱
浏览器对内子元素的顺序有隐式校验：缺或，它会自动补全，但补全逻辑不可控（比如把脚本塞进里执行）；<meta charset>必须在<title></title>之前，否则标题显示乱码是常态。
—— 必须顶格首行，无空格无注释，否则触发怪异模式（<code>document.compatMode === "BackCompat"）-
——lang属性不是可选，屏幕阅读器靠它切语音引擎 -
内：<meta charset="UTF-8">→<title></title>→ 其他元信息（<meta name="viewport">也建议紧随其后） -
必须存在，哪怕空着；不要用自闭合写法（XHTML遗留习惯，HTML5不认）
看着自由，实则每行都在影响加载链路。删错一个，可能让CSS阻塞渲染、JS无法获取DOM、甚至HTTPS证书校验失败。
- 可删但不推荐：
<meta name="description">（SEO弱相关，不影响运行） - 能删但要换位置：
<link rel="stylesheet">—— 放里会阻塞渲染；想异步加载得加media="print" onload="this.media='all'"或改用<link rel="preload"> - 绝不能删：
<meta charset>（乱码）、<title></title>（所有浏览器标签页显示依赖它）、<base href>（如果页面用了相对URL且部署在子路径） - 容易被忽略的坑：
<meta http-equiv="X-UA-Compatible" content="IE=edge">在现代项目中已无必要，但若保留，必须放在<title></title>前，否则IE11可能无视
为什么<script></script>放
老教程总说“脚本放底部防阻塞”，但现代开发中这反而引发新问题：服务端渲染（SSR）生成的HTML里，<script></script>在前，而JS逻辑依赖document.getElementById查的DOM却还没挂载（比如<div id="app">在脚本之后）——结果<code>getElementById返回null。
立即学习“前端免费学习笔记（深入）”；
- 更稳的写法：
<script defer src="main.js"></script>（放里也安全） -
async适合分析统计类脚本（不依赖DOM），但会乱序执行，不能保证utils.js一定比app.js先加载 - 如果必须内联脚本且依赖DOM，用
DOMContentLoaded包装，别信“放底部就一定OK” - Vite / Webpack 打包产物默认带
defer，但手动引入第三方SDK（如微信JS-SDK）仍需检查其文档是否要求async或特定位置
真正难的不是写出合法HTML，而是理解每个标签在加载时序、解析上下文、辅助技术栈里的实际权重。比如<title></title>缺失，Chrome DevTools 的Elements面板里会高亮报错，但页面照样渲染——直到你发现百度搜索结果里标题变成“Untitled Document”。
