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