caption必须作为table的第一个子元素且唯一，位置错误将导致语义丢失和可访问性失效；需用caption-side控制上下位置，不可用Flex/Grid或absolute定位；非单表专属标题应使用外部语义化标签。
caption 必须直接放在 <table> 开头，不能套在 <thead> 或其他标签里
很多人把 <caption> 放在 <table> 里面但位置不对，比如塞进 <thead> 或紧贴 <tr> 前面——这样浏览器不会识别为表格标题，屏幕阅读器也读不到。<caption> 是 <table> 的**第一个子元素**，且只能有一个。正确写法只有一种：
<table>
<caption>2024年各季度销售额（单位：万元）</caption>
<thead>
<tr><th>季度</th><th>金额</th></tr>
</thead>
<tbody>
<tr><td>Q1</td><td>125</td></tr>
</tbody>
</table>
如果放错位置，比如写成：
<table>
<thead>
<caption>错误位置！</caption>
<tr><th>季度</th></tr>
</thead>
</table>
那 <caption> 就只是普通文本，失去语义和可访问性支持。
caption 默认居顶显示，用 CSS 调整位置要小心 caption-side
<caption> 默认出现在表格上方居中，这是 HTML 规范行为。想让它显示在底部？别用 text-align 或 margin 硬调，要用标准属性 caption-side：
立即学习“前端免费学习笔记（深入）”；
table caption {
caption-side: bottom;
}
这个属性只接受 top、bottom（部分浏览器还支持 left/right，但兼容性差，不建议用）。注意：caption-side 必须作用于 table 元素，不是 caption 本身——写成 caption { caption-side: bottom } 是无效的。
- IE 不支持
caption-side（IE8+ 仅支持top/bottom，且需声明 DOCTYPE） - Flex/Grid 布局对
<caption>无效，它始终是表格的专属语义容器 - 不要用
position: absolute把<caption>拉到别处——会破坏可访问性，AT（辅助技术）可能完全忽略它
caption 不是装饰性文字，它影响屏幕阅读器朗读顺序和 SEO 语义
很多开发者把它当“小标题”随便加，但 <caption> 是 WAI-ARIA 表格语义链的关键一环。屏幕阅读器会在读表格前先读 <caption>，再读列头、行数据。如果省略或写成空内容（<caption></caption>），AT 可能跳过整个表格，或报“无标题表格”警告。
- 避免用
<caption>堆砌关键词做 SEO——它不参与页面权重计算，纯属语义标记 - 多语言站点记得给
<caption>加lang属性，比如<caption lang="zh-CN"> - 动态渲染表格时，务必确保
<caption>和<table>同步插入 DOM；用 JS 插入后补<caption>，若没重排或未触发 AT 重新扫描，可能读不到
替代方案：什么时候不该用 caption？
如果你需要的是「表格上方带样式的独立标题块」，比如带图标、按钮、分隔线，或者同一区域有多个表格共用一个大标题——这时候 <caption> 反而是错的。它只能属于单个 <table>，且不能包含交互元素（<button>、<a> 等在其中是无效 HTML）。
- 多个表格共享标题？用
<section>+<h2>包裹整个区块 - 标题要加按钮或筛选控件？把标题放在
<table>外部，用<div class="table-header">管理样式和逻辑 - 需要响应式隐藏标题？
<caption>不支持aria-hidden安全隐藏——视觉隐藏但 AT 仍需读出，应改用sr-only类配合<h3>
caption 的价值不在“看起来像标题”，而在“被正确理解为标题”。位置、语义、可访问性三者缺一不可，动它之前先问一句：这个文字，是不是这张表唯一、准确、不可拆分的说明？
