caption必须是table的首个且唯一子元素，否则屏幕阅读器无法识别、W3C验证失败、导出时标题丢失；正确结构为<table><caption>标题</caption><thead>…</thead><tbody>…</tbody></table>。
caption 必须是 table 的第一个子元素
不是“可以放”，而是“必须放”——caption标签如果没紧贴<table>开头写，浏览器就当它不存在。常见错误包括塞进<thead>里、放在<tbody>后面、或者用<div>包着再丢进去。这些写法会导致：screen reader完全读不到标题，W3C 验证器报错，打印或导出时标题消失。
正确结构只有一种：
<table>
<caption>2024年用户注册统计</caption>
<thead>
<tr><th>月份</th><th>新增数</th></tr>
</thead>
<tbody>
<tr><td>1月</td><td>1,203</td></tr>
</tbody>
</table>-
caption必须直接作为<table>的**首个且唯一**子元素 - 一个
<table>里不能出现两个<caption>，第二个会被静默忽略 - 别用
<th colspan="n">假装是标题——它只是个表头单元格，没有语义权重
caption-side 只能作用于 table 元素
想把标题移到表格下方？别给caption本身加caption-side: bottom，这行不通。这个 CSS 属性必须写在table选择器上，否则无效。
示例：
立即学习“前端免费学习笔记（深入）”；
table {
caption-side: bottom;
}
/* ✅ 正确 */
caption {
text-align: center;
}
/* ❌ caption { caption-side: bottom } 是无效的 */- 支持值只有
top和bottom；left/right兼容性差，不要用 - IE8+ 仅支持
top（默认），bottom在 IE 中基本不生效 - 别用
margin或position: absolute硬拉位置——会破坏可访问性，屏幕阅读器可能跳过
别用 div 或 h 标签模拟 caption
外面套个<h3>销售数据</h3>再跟<table>，看起来一样，但语义断裂。辅助技术不会把这两者关联起来，WCAG 2.1 直接判定为可访问性缺陷。
- 视觉样式可用 CSS 调整，但语义不可替代：只有
<caption>会被识别为“该表格的标题” - 多表并存时，
caption内容要具体，避免“数据表”“表格1”这类泛称 - 空表格也建议写
<caption>暂无数据</caption>——否则 NVDA + Firefox 组合可能直接跳过整个表格
fieldset + legend 不是 caption 的替代方案
legend标签不能直接用于<table>，它只对<fieldset>有效。有人把<table>包进<fieldset>再加<legend>，这确实能通过无障碍测试，但引入了额外语义——它表示“一组表单控件”，而纯数据表格不需要这个含义。
- 仅当表格内含
<input>、<select>等可交互元素，且需要逻辑分组时，才考虑<fieldset><legend> - 普通展示型表格，
<caption>是唯一合规选择 - 同时用
<caption>和<legend>反而造成语义冗余，AT 可能重复播报
实际项目里最容易被忽略的，是导出 Excel 或生成 PDF 时caption内容根本不会自动带过去——它只活在 HTML 渲染层。如果业务要求导出文件必须含标题，得在 JS 导出逻辑里手动注入，或者用data-caption属性做冗余存储。
