caption必须是table的第一个子元素且仅出现一次，位置错、多写或外移均导致屏幕阅读器不读、table.caption返回null、dompdf忽略；必须紧贴table开始标签后、首个tr前。
caption 必须是 table 的第一个子元素，且只能出现一次；位置错、多写、外移，标题就“不算数”——屏幕阅读器不读、table.caption 返回 null、dompdf 直接忽略。
caption 必须紧贴 table 开始标签后、首个 tr 前
浏览器和辅助技术靠 DOM 顺序识别归属。一旦 caption 出现在 thead、tbody 或任意 tr 后面，它就脱离表格语义上下文。
- ✅ 正确：
<table> <caption>2024年Q3销售数据</caption> <thead>...</thead> </table> - ❌ 错误：
<table><thead><caption>...</caption></thead></table>（caption不是thead的合法子元素） - ❌ 更隐蔽的错误：
<h2>销售数据</h2> <table>...</table>（视觉像标题，但 JS 和屏幕阅读器完全无法关联）
caption-side 控制上下位置，但 left/right 兼容性差
caption-side: top 是默认值，所有浏览器都支持；bottom 在现代浏览器和主流 PDF 渲染器（如 dompdf）中基本可用，但旧版 IE 完全不支持，某些 dompdf 版本对 bottom 渲染有偏移。
- 稳妥写法（推荐）：
caption { caption-side: top; text-align: left; } - 若必须底部显示：优先考虑用
tfoot+<th scope="row"> 模拟摘要行（语义不同但兼容性更好） <li>避免 <code>caption-side: left或right—— Safari 和 Firefox 对其支持不稳定，且 WCAG 不推荐横向标题布局 - ✅ 正确：
<caption lang="en">Q3 Financial Summary</caption> - ❌ 错误：
<caption>Q3 Financial Summary</caption>（依赖页面默认lang，不可靠） - ⚠️ 注意：
lang值必须是 BCP 47 标准格式，如zh-Hans、en-US，不能写chinese或english - ❌ 危险操作：
caption { display: block; width: 100%; }或position: absolute; top: -20px; - ✅ 安全调整：
caption { text-align: left; padding: 0.5em 0; font-weight: bold; } - 关键点：所有样式应围绕文本内容本身，而非重定义其容器行为
多语言标题必须显式声明 lang 属性
屏幕阅读器按 lang 值切换语音引擎。如果表格主体是中文，而 caption 写的是英文 “Q3 Financial Summary”，不加 lang="en"，就会用中文音调生硬朗读英文词。
立即学习“前端免费学习笔记（深入）”；
不要给 caption 设 display: block 或 position: absolute
caption 是表格专有内建元素，它的布局上下文由表格渲染引擎管理。一旦用 CSS 强行脱离，不仅可能破坏居中逻辑，还会让部分辅助技术丢失其与表格的绑定关系。
最常被忽略的不是怎么写样式，而是 caption 的存在本身决定了表格能否被程序化访问——table.caption 属性只认第一个位置合法的节点，其余全作废。写完记得检查 DOM 结构是否真如规范所求。
