HTML文档必须严格遵循5个核心标签的顺序：、、（含在前）、；缺一不可，否则导致解析异常、SEO失败或无障碍访问失效。

HTML文档结构不是“写个包起来就完事”，而是浏览器解析、SEO抓取、无障碍访问和后续JS操作的共同前提——错一处，document.body可能为空，DOMContentLoaded事件延迟，甚至搜索引擎直接跳过你的页面。

必须存在的5个标签及其顺序不能乱

浏览器对内子元素的顺序有隐式校验：缺或，它会自动补全，但补全逻辑不可控（比如把脚本塞进里执行）；必须在之前，否则标题显示乱码是常态。

• —— 必须顶格首行，无空格无注释，否则触发怪异模式（document.compatMode === "BackCompat"）
• —— lang属性不是可选，屏幕阅读器靠它切语音引擎
• 内： → → 其他元信息（也建议紧随其后）
• 必须存在，哪怕空着；不要用自闭合写法（XHTML遗留习惯，HTML5不认）

里哪些标签能删，哪些删了就出事

看着自由，实则每行都在影响加载链路。删错一个，可能让CSS阻塞渲染、JS无法获取DOM、甚至HTTPS证书校验失败。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

• 可删但不推荐：（SEO弱相关，不影响运行）
• 能删但要换位置： —— 放里会阻塞渲染；想异步加载得加media="print" onload="this.media='all'"或改用
• 绝不能删：（乱码）、（所有浏览器标签页显示依赖它）、（如果页面用了相对URL且部署在子路径）
• 容易被忽略的坑：在现代项目中已无必要，但若保留，必须放在前，否则IE11可能无视

为什么<script></script>放底部不是银弹

老教程总说“脚本放底部防阻塞”，但现代开发中这反而引发新问题：服务端渲染（SSR）生成的HTML里，<script></script>在前，而JS逻辑依赖document.getElementById查的DOM却还没挂载（比如

在脚本之后）——结果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，而是理解每个标签在加载时序、解析上下文、辅助技术栈里的实际权重。比如缺失，Chrome DevTools 的Elements面板里会高亮报错，但页面照样渲染——直到你发现百度搜索结果里标题变成“Untitled Document”。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！