caption 必须作为 table 的第一个子元素，否则语义失效、屏幕阅读器读不到、table.caption 返回 null，PDF 渲染引擎（如 dompdf）直接跳过。
caption 必须作为 table 的第一个子元素，否则语义失效、屏幕阅读器读不到、table.caption 返回 null，PDF 渲染引擎（如 dompdf）直接跳过。
caption 位置错就等于没写
浏览器和辅助技术靠 DOM 顺序识别标题归属。一旦 caption 出现在 thead、tbody 或任意 tr 之后，它就不再是该表格的标题。
- ✅ 正确：
<table><caption>销售汇总</caption><thead> - ❌ 错误：
<table><thead></thead><caption>销售汇总</caption>（被当普通文本渲染） - ❌ 更隐蔽错误：
<div class="table-title">销售汇总</div>+ CSS 定位到表格上方（视觉像，语义为零）
caption-side: bottom 在生产环境容易翻车
虽然 caption-side: bottom 看似能快速把标题挪到底部，但兼容性有硬伤：
- 旧版 IE 完全不支持
bottom值 - dompdf 的 R&OS CPDF 后端虽支持
top/bottom，但某些版本对bottom渲染偏移异常 -
left/right在多数现代浏览器中支持有限，且可能破坏表格流式布局
稳妥做法是：用 tfoot + <th colspan="n"> 模拟底部摘要行——语义不同，但 dompdf 兼容性更好、打印稳定。
立即学习“前端免费学习笔记（深入）”；
别给 caption 加 display: block 或 position: absolute
caption 的默认 display 是 table-caption，这是内建的表格布局上下文。强行覆盖会切断它与表格的语义绑定：
-
display: block→ 屏幕阅读器可能跳过，table.caption失效 -
position: absolute→ 标题脱离表格流，PDF 或打印时易错位 -
display: none或visibility: hidden→ 等于删除语义，不是“隐藏”，是“抹除”
需要视觉强化？用 font-weight: bold、background-color: #f5f5f5、padding: 8px 这类安全样式即可。
多语言 caption 必须显式声明 lang 属性
当表格主体是中文，而 caption 是英文（如 "Q3 Financial Summary"），不加 lang 会导致语音合成器按页面默认语言发音，语义混淆。
- ✅ 正确：
<caption lang="en">Q3 Financial Summary</caption> - ❌ 错误：
<caption>Q3 Financial Summary</caption>（读屏软件可能用中文音调读英文） -
lang值必须是有效 BCP 47 标签（如zh-Hans、en-US），不能写chinese或english
最常被忽略的一点：caption 不是装饰，它的存在直接影响表格的「可编程访问性」——JavaScript 通过 table.caption 读取时，只返回第一个且位置合法的节点；DOM 里有两个或位置非法，这个属性就是 null。
