caption标签是HTML5中专为表格设计的语义化标题容器，必须作为table的第一个子元素，用于描述整张表格内容，提升可访问性、SEO和可维护性。
caption 标签是 HTML5 中专为表格设计的语义化标题容器，它必须作为 <table> 的**第一个子元素**，用于描述整张表格的内容或用途，对可访问性（如屏幕阅读器）、SEO 和代码可维护性都有实际价值。<h3>caption 的基本用法与位置要求</h3>
<p>caption 只能直接嵌套在 table 开始标签之后、其他任何表格内容（如 thead、tbody、tr）之前。位置错误会导致 HTML 结构无效，部分浏览器可能忽略或错误渲染。</p>
<ul>
<li>✅ 正确写法：<code><table>
<caption>2024年各季度销售数据</caption>
<thead>...</thead>
</table>
<table>
<thead>...</thead>
<caption>...</caption>
</table>（被解析为普通文本，失去语义）提升可访问性与用户体验
屏幕阅读器会自动将 caption 内容作为表格的“名称”播报，用户无需额外查找说明文字。例如，当焦点进入表格时，会读出：“2024年各季度销售数据，表格，共4行5列”。这比靠 CSS 隐藏的标题或独立段落更可靠。
- 避免使用纯视觉方式（如
<p class="table-title"></p>）替代 caption - caption 文本应简洁明确，避免模糊表述（如“数据表”），推荐包含时间、对象、维度等关键信息
样式控制与默认行为
caption 默认居中显示在表格上方，但可通过 CSS 精确控制其外观和位置（包括移到表格下方）：
立即学习“前端免费学习笔记（深入）”；
- 设置
caption-side: bottom;可让标题出现在表格底部 - 支持常用文本样式：font-size、color、text-align、padding 等
- 注意：不要用
display: block;或浮动破坏其固有表格上下文，否则可能影响可访问性支持
与 aria-labelledby 的配合使用（进阶场景）
当表格结构复杂、或 caption 需要复用已有标题（如页面中已有 <h2></h2>），可用 aria-labelledby 指向对应元素 ID，此时 caption 可省略或留空（但仍需保留标签以维持结构）：
<h2 id="sales-summary">2024年度销售汇总分析</h2><br><table aria-labelledby="sales-summary"><br> <caption></caption> <!-- 空 caption 保持结构合法 --><br> <tr><th>区域</th><th>Q1</th><th>Q2</th></tr><br> <!-- ... --><br></table>
