caption标签必须作为table的第一个子元素，不可置于thead内或table外，且每个table都需独立非空caption；其display属性不可改为非table-caption值，样式调整仅限text-align、caption-side等安全属性。
caption 标签必须直接放在 table 开始标签后
HTML 表格的 caption 标签不是可选装饰，而是语义化必需结构——它必须作为 <table> 的第一个子元素出现，否则屏幕阅读器可能忽略，CSS 定位也会失效。
常见错误是把它写在 <thead> 里、或放在 <table> 外面，甚至用 <h2> 模拟标题。这些写法都不符合 W3C 规范，也破坏表格的可访问性。
正确写法示例：
<table>
<caption>2024 年各季度销售额（单位：万元）</caption>
<thead>
<tr><th>季度</th><th>销售额</th></tr>
</thead>
<tbody>
<tr><td>Q1</td><td>128</td></tr>
</tbody>
</table>
caption 文字默认居中且加粗，但不能靠 CSS 强行覆盖 display
caption 是一个特殊流内元素，浏览器默认渲染为块级、居中、加粗，但它不是 <div> 或 <p>，所以对它的 display 属性做非 table-caption 的修改（比如设成 flex 或 inline）会破坏其语义和读屏行为。
立即学习“前端免费学习笔记（深入）”；
若需调整样式，只推荐以下安全操作：
- 用
text-align控制水平对齐（left/center/right） - 用
caption-side控制位置（top/bottom；注意 IE 不支持bottom） - 用
font-weight、color、padding等常规属性微调外观 - 避免给
caption设置width或float
多表共存时，每个 table 都要独立 caption
一个页面里有多个 <table>，就一定要为每个都配一个 <caption>。不能复用、不能省略、也不能用空标签占位（如 <caption></caption>）——空 caption 仍会被读屏器朗读为“空白标题”，反而造成干扰。
如果某张表确实没有自然标题（比如纯布局用表，但应尽量避免），优先考虑改用 <div> + CSS Grid/Flex 布局；若无法重构，至少用 <caption>此表格仅用于视觉布局，无数据含义</caption> 明确声明语义意图。
用 aria-labelledby 替代 caption 的场景很有限
极少数情况下（比如标题文字需复用其他元素内容、或动态生成不便插入 DOM），可用 aria-labelledby 关联外部元素 ID 来替代 caption。但这只是降级方案，不推荐日常使用。
必须同时满足以下条件才考虑：
– 表格本身无法插入 caption（如第三方组件封装死）
– 外部标题元素存在且可见（不能是 display: none 或 aria-hidden="true"）
– 同时保留 role="table" 和正确的表头结构（scope 或 id/headers）
示例（不推荐，仅作说明）：
<h3 id="sales-title">2024 年各季度销售额</h3> <table role="table" aria-labelledby="sales-title"> <thead role="rowgroup">...</thead> </table>
caption 的缺失会让自动化测试工具报错，也增加维护成本——能用原生 caption 就别绕路。
