caption标签必须作为table的第一个子元素，否则语义失效；summary属性已废弃；caption支持CSS样式但不可脱离table流；复杂表格需配合aria-describedby增强可访问性。
caption 标签必须直接放在 table 开头，否则语义失效
浏览器和读屏软件只认 <caption> 作为表格标题的唯一合法位置——它得是 <table> 的第一个子元素。放错位置（比如塞在 <thead> 里、或者写在 <table> 外面）会导致标题不被识别，aria-label 也救不回来。
常见错误现象：
– 表格在屏幕阅读器中读不出标题
– DevTools 里看到 caption 渲染了，但辅助技术完全忽略
– CSS 设置 caption-side: bottom 后样式生效，但语义仍丢失（因为位置错了）
- 正确写法：
<table><caption>用户登录统计</caption><thead>...</thead></table> - 错误写法：
<table><thead><caption>...</caption></thead></table>（嵌套在<thead>内） - 错误写法：
<caption>...</caption><table>...</table>（在 table 外）
summary 属性已废弃，别再用
summary 是 HTML4 的属性，2014 年起就被 W3C 明确标记为“obsolete”，现代 HTML5 文档里写它毫无作用，Chrome/Firefox/Edge 全部忽略，且会触发控制台警告 The 'summary' attribute on the 'table' element is obsolete.。
使用场景其实很窄：它原本想给辅助技术提供“表格结构说明”，比如“三列数据，按日期倒序排列”。但实践发现，这种纯描述性文本远不如用 <caption> + <th scope="col"> + ARIA 配合来得可靠。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 绝对不要写：
<table summary="用户注册时间、邮箱、状态三列数据"> - 替代方案：把关键结构信息融入
<caption>，例如<caption>用户注册信息（按注册时间倒序）</caption> - 更进一步：用
<th scope="col">明确列含义，比 summary 更精准、更可交互
caption 支持 CSS 控制位置和样式，但默认居上
<caption> 默认渲染在表格上方居中，这是浏览器 UA 样式决定的。你可以用 caption-side 拉到下方，用 text-align 或 margin 调整对齐，但它始终是表格的逻辑一部分，不能脱离 <table> 流式布局单独定位。
性能影响几乎为零，兼容性极好（IE8+ 都支持），但注意两个坑：
-
caption-side: bottom在某些旧版 Safari 中可能触发重排异常，建议加display: table-caption双保险 - 如果用 Flex/Grid 把整个
<table>包起来，<caption>会脱离表格流，语义断裂——别这么干 - 示例：
<table style="caption-side: bottom;"> <caption>数据来源：2024年Q2后台日志</caption> <tr><td>1</td></tr> </table>
复杂表格需要 caption + aria-describedby 组合增强可访问性
当表格有分组、合并单元格、多级表头或动态筛选时，单靠 <caption> 不足以说明全部上下文。这时候得补一个隐藏的描述块，用 aria-describedby 关联。
容易踩的坑是：描述文本写得太笼统（比如“详见说明”），或者 ID 拼写错误导致关联失败。读屏软件不会报错，只会静默跳过。
- 正确做法：
<table aria-describedby="tbl-desc-1"> <caption>各地区销售额（2024年）</caption> <tbody>...</tbody> </table> <p id="tbl-desc-1" class="visually-hidden">本表含4个地区列，行按季度分组；灰色行表示数据未确认</p>
-
class="visually-hidden"是必备的 CSS 类（用clip+position实现），不能只靠display: none或visibility: hidden，否则读屏器也读不到 - 别用
aria-label替代<caption>——它会覆盖 caption，且无法被翻译工具或 CSS 选中
