html5文档最小合法结构是、根元素、以及至少一个和开始标签；三者缺一将导致怪异模式或解析不可靠。
HTML5 文档必须包含的最小结构是啥
一个合法的 HTML5 文档，浏览器能正确识别为 HTML5，核心就三样：、<code> 根元素、以及至少一个 和 。缺任何一项，要么触发怪异模式（Quirks Mode），要么解析行为不可靠。
常见错误现象：
— 页面样式错乱，但开发者工具里看不出明显问题
— document.querySelector('html') 能取到，但 document.documentElement.lang 是空字符串或 undefined
— 某些现代 API（比如 localStorage 或 fetch）在旧版 Safari 上意外失效（实际是文档类型没声明导致降级）
必须顶格写在第一行，前面不能有任何字符（包括空格、BOM、注释）-
必须有，且建议加上lang属性，例如；否则屏幕阅读器和搜索引擎可能无法准确判断语言 -
和可以省略闭合标签（HTML5 允许），但不能省略开始标签——否则解析器会自动补全，位置可能出人意料
为什么 <meta charset="UTF-8"> 要放在
这个 <meta> 不只是“告诉浏览器用 UTF-8”，它本质是**解码指令的起点**。如果它出现在 <title></title> 或其他标签后面，浏览器已经按默认编码（比如 ISO-8859-1）读了一段内容，再切编码也来不及了——中文就会变成乱码，而且无法回退。
使用场景：
— 本地双击打开 .html 文件（没有服务器响应头）
— 静态站点生成器输出未配置 charset 响应头时
— 某些老旧编辑器保存文件时悄悄加了 BOM，更需要靠这个 meta 强制覆盖
立即学习“前端免费学习笔记（深入）”；
- 必须写在
内尽可能靠前的位置，理想情况是第二行（第一行是 DOCTYPE） - 不要写成
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">—— 这是 HTML4 写法，HTML5 明确不推荐 - 如果用了
<script></script>内联脚本在<meta charset>前面，脚本里的字符串字面量也可能被错误解码
HTML5 中哪些标签可以完全省略
HTML5 规范明确允许某些标签在特定条件下省略，不是“随便删”，而是“解析器能无歧义推断出来”。滥用省略反而会让代码难维护，尤其团队协作时。
参数差异：
— 、、 的开始/结束标签都可省略，但前提是结构清晰（比如 里只有 <title></title> 和 <meta>）
— <tbody> 在表格中永远可省略，浏览器必自动补上<br>— <code><colgroup></colgroup>、<thead>、<code><tfoot> 则不能随意省，否则列宽、排序逻辑可能错乱
<ul><li>省略 <code> 或 安全；但省略 开始标签后，紧接着写 <div>，浏览器会把它塞进隐式 <code>，而非报错
document.body 初始为 null，直到第一个节点插入验证一个 HTML5 文档是否真的合规
别信浏览器渲染正常就等于合规。很多错误是静默容忍的，比如多一个 、 里放 <div>、或者 <code><script></script> 放在 里却没加 defer 或 async——它们不会报错，但会影响资源加载顺序、SEO、甚至 PWA 安装条件。
性能影响：
— 缺 <meta name="viewport"> 导致移动端强制缩放，Lighthouse 直接扣分
— <link rel="icon"> 缺失会让浏览器发多次 404 请求找 favicon.ico
— <title></title> 缺失不仅影响 SEO，部分浏览器会把 URL 当标题，复制链接时容易出错
- 用 W3C 官方验证器（validator.w3.org/nu/）最靠谱，它跑的是真实 HTML5 解析器，不是模拟
- VS Code 装 “HTMLHint” 插件，能实时标出
<meta charset>位置不对、缺少lang等问题 - 注意：服务端返回的 Content-Type 响应头（如
text/html;charset=gbk）会覆盖<meta charset>，验证时得看网络面板里的实际响应头
最容易被忽略的是：文档编码声明和实际文件保存编码不一致。比如文件用 UTF-8-BOM 保存，但写了 <meta charset="UTF-8">，BOM 本身就会干扰解析——这种细节，验证器能抓到，人眼几乎看不出来。
