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