caption是语义化表格标题标签，必须为table首个子元素；应简洁点明趋势方向、关键数值及时间/条件，避免空泛，配合th与scope属性提升可访问性。
Caption 元素本身没有“属性”，它是一个语义化标签（<caption>），用于为表格提供简明、有意义的标题或说明。它对视觉障碍者非常重要，因为屏幕阅读器会自动将 <caption> 的内容作为表格的“名称”读出，帮助用户快速理解表格的用途和核心信息——包括关键趋势。
用 caption 准确传达趋势，而非仅复述表名
避免写成“销售数据表”这类空泛描述。应点明趋势本质，例如：
- “2023年各季度线上销售额持续上升，Q4达全年峰值（+27% 环比）”
- “用户留存率在首周后明显下滑，第7日留存仅为32%，较第1日下降58%”
- “A/B测试结果显示：按钮改为绿色后，点击率提升19%，转化率提高6.3%”
保持简洁，控制在1–2句话内
屏幕阅读器用户依赖听觉扫描，过长的 caption 容易造成认知负担。优先包含：趋势方向（上升/下降/持平）、关键数值（增幅/降幅/极值）、时间范围或对比条件。省略细节数据（这些应保留在表格单元格中），caption 只负责“结论先行”。
确保 caption 是 table 的第一个子元素
HTML5 规范要求 <caption> 必须紧接在 <table> 开始标签之后，且只能有一个。错误结构（如放在 <thead> 内或多个 caption）会导致屏幕阅读器无法正确识别或跳过。
立即学习“前端免费学习笔记（深入）”；
<table> <caption>2024年上半年客户投诉量同比下降41%，其中物流类投诉减少最显著（-53%）</caption> <thead>…</thead> <tbody>…</tbody> </table>
配合表头（th）与 scope 属性强化可访问性
caption 描述整体趋势，而具体数据关系需靠结构支撑。为每列/行 <th> 设置 scope="col" 或 scope="row"，让屏幕阅读器能准确关联数据单元格与其含义。这样，用户听到 caption 得知“投诉量大幅下降”，再浏览表格时就能明确哪一列代表“投诉类型”，哪一行对应“2024年Q2”，实现趋势与细节的无缝衔接。
