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