html表格中thead、tbody、tfoot必须按thead→tfoot→tbody顺序书写，这是html规范强制要求，关乎渲染逻辑、打印分页、可访问性及js dom一致性，顺序错误将导致语义失效、打印错乱、读屏错乱。
HTML标签在里才渲染内容
浏览器只把 里的标签当可视内容处理。写在 里的 <p></p>、<div> 或 <code><h1></h1> 不会显示，也不会触发样式或脚本执行（除非是 <script></script> 或 <style></style> 这类元数据标签）。
常见错误现象：
- 把导航栏代码错放在
，页面空白，检查元素才发现 DOM 树里根本没挂载 - 用
<script></script>动态插入 HTML，但插入目标是document.head，结果内容不可见
正确做法：所有用户可见结构必须包裹在 内； 只放元信息、资源链接、内联脚本/样式（且需明确用途）。
<div> 和语义化标签在嵌套层级中的行为差异
<p><code><div> 是纯容器，不带任何语义；<code><header></header>、<main></main>、<section></section> 等 HTML5 标签则自带文档角色。它们在 DOM 树中层级相同，但对辅助技术、SEO 和开发者理解影响巨大。
使用场景：
- 布局调试时，
<div> 套 <code><div> 没问题，但上线前应逐步替换为语义化标签 <li> <code><main></main>必须有且仅有一个，不能嵌套在<article></article>或<aside></aside>内 -
<section></section>要有明确主题，不能只为加 margin 而存在；空的<section></section>会被屏幕阅读器跳过 -
lang="zh"：泛指中文，兼容性最广 -
lang="zh-CN"：明确简体中文，适合大陆用户为主站点 -
lang="zh-TW"：繁体中文，影响字体渲染和词典匹配 - 滚动长表格时，
<thead> 可配合 CSS <code>position: sticky实现表头悬浮，但前提是它必须是第一组<tr> 的父容器 <li>IE11 及更旧版本不支持 <code><tfoot> 置顶渲染，若依赖该特性需降级 fallback <li>服务端渲染（SSR）中，若 <code><tbody> 内容为空，某些框架会跳过整个 <code><table> 渲染，需确保至少含一个 <code><tr><p>复杂点在于：这些标签本身不接受 <code>style属性，样式必须通过<tr> 或 <code><th>/</th> <td> 控制，否则容易误以为加了 class 就能直接生效。</td>
容易踩的坑：用 <div class="header"> 代替 <code><header></header>，导致搜索引擎无法识别页首区域，也增加无障碍测试失败风险。
不是装饰项。缺失时，屏幕阅读器可能按默认语言（通常是英语）朗读中文，声调错乱；Google 搜索结果页可能把页面归类为“未指定语言”，降低中文搜索曝光。
参数差异：
注意：<meta http-equiv="Content-Language" content="zh-CN"> 已被废弃，不起作用；只有 是有效且被广泛支持的方案。
表格结构标签 <thead>、<code><tbody>、<code><tfoot> 的实际约束
<p>这三个标签不是可选装饰，而是浏览器解析表格逻辑的硬性分区。没有 <code><tbody>，浏览器会自动补上；但手动写错顺序（比如 <code><tbody> 在 <code><thead> 前），会导致渲染异常或 JS 获取 <code>rows 时顺序错乱。
性能与兼容性影响：
