caption标签必须紧随开始标签后、首个前，不可嵌套在或中；其位置由caption-side控制，语义上用于说明整表用途而非列名，对可访问性至关重要。
CAPTION 标签必须直接放在 <table> 开头内部
<p>它不是表格的任意子元素，而是必须紧随 <code><table> 开始标签之后、第一个 <code><tr> 之前。放错位置（比如塞进 <code><thead> 或套在 <code><div> 里）会导致无效，浏览器可能忽略或将其渲染为普通文本。
<p>正确写法示例：</p>
<pre class="brush:php;toolbar:false;"></pre>
<table>
<caption>2024 年销售数据汇总</caption>
<thead><tr>
<th>月份</th>
<th>销售额（万元）</th>
</tr></thead>
<tbody><tr>
<td>1月</td>
<td>120</td>
</tr></tbody>
</table>
<h3>用 CSS 控制 <code><caption></caption> 位置和样式很常见但有坑
caption-side 决定标题上下左右，默认是 top；但注意：IE 不支持 bottom 以外的值（除非用现代模式），且部分旧版 Safari 对 left/right 支持不稳定。
- 居中标题：默认已居中，无需额外设置
text-align: center - 靠左/右对齐：需配合
caption-side: left或right，再加text-align: left或right - 字体大小单独设：
<caption></caption>不继承表格字体，常需显式定义font-size
语义重要：屏幕阅读器依赖 <caption></caption> 理解表格用途
它不只是视觉装饰，是 WAI-ARIA 可访问性链条的关键一环。省略 <caption></caption> 或用 <div> 模拟标题，会让视障用户失去上下文。
<p>如果表格本身已有明确上下文（如页面标题已说明“订单列表”），可省略；但若表格独立存在、嵌入复杂布局，或含多张表，<code><caption></caption> 就不可替代。
避免写空内容或纯符号，例如：<caption></caption> 或 <caption>---</caption>，这会被读作“空白”或“破折号”，造成困惑。
不要用 <caption></caption> 替代表头行（<th>）
<p>常见误解：把列名写进 <code><caption></caption>，比如 <caption>姓名 | 年龄 | 城市</caption>。这是错的——<caption></caption> 描述整张表，不是列定义。
列名必须用 <th> 放在 <code><thead> 或首行 <code><tr> 中；<code><caption></caption> 是更高层级的说明，比如“员工基本信息表”或“各城市平均气温（2024 Q1）”。
如果真需要多行标题说明，可用 <caption></caption> 包裹多个 <p></p>，但需确保语义清晰，不宜过长。
复杂表格的可访问性边界往往就卡在这儿：标题太简略，或混用结构，导致机器无法区分“这是什么表”和“这列叫什么”。
