CAPTION标签专用于为整个表格添加唯一标题，必须作为table的第一个子元素且位于顶部，默认居中；表头文字必须用thead中的th定义，二者语义不同、作用不可互换。
CAPTION 标签不是用来定义表头文字描述的，它专用于给整个 <table> 添加一个标题（caption），位置默认在表格上方居中，语义上属于表格的一部分，而非 <thead> 或列标题。
为什么不能用 CAPTION 替代表头文字？
CAPTION 描述的是表格整体用途或上下文（比如“2024年Q1销售汇总”），而表头（如“产品名称”“单价”“数量”）必须由 <th> 元素放在 <thead> 中定义。两者语义和作用完全不同：
-
CAPTION只能出现一次，且必须是<table>的第一个子元素 -
<th>是单元格级标签，控制每列/每行的头部含义，影响可访问性（屏幕阅读器会读出<th>与对应<td>的关系） - 用
CAPTION写“姓名”“年龄”会导致结构错误：辅助技术无法将其与具体列关联，表格数据语义断裂
CAPTION 的正确写法和位置限制
必须紧贴 <table> 开始标签之后，且不能嵌套其他块级元素。常见错误包括：
- 放在
<thead>里面 —— 浏览器会自动将其移出，DOM 结构不可靠 - 用多个
<caption>—— 只有第一个生效，其余被忽略 - 用
style="text-align: left"覆盖默认居中时，未同时设置caption-side: top/bottom导致样式失效（部分旧浏览器）
正确示例：
立即学习“前端免费学习笔记（深入）”；
<table>
<caption>用户注册信息统计（2024年6月）</caption>
<thead>
<tr>
<th>用户名</th>
<th>邮箱</th>
<th>注册时间</th>
</tr>
</thead>
<tbody>
<tr><td>alice</td><td>a@example.com</td><td>2024-06-01</td></tr>
</tbody>
</table>
想让标题出现在表格下方？改用 caption-side
默认 CAPTION 在顶部，但可通过 CSS 控制位置。注意：caption-side: bottom 在所有现代浏览器中可用，但 IE8 及更早版本不支持：
- 只对
<caption>生效，不能用margin-top或position模拟 - 若需兼容 IE8，只能靠 JS 动态移动节点，但会破坏语义顺序
- 响应式场景下，
caption-side不会随屏幕尺寸切换，需配合媒体查询手动重置
示例：
table caption {
caption-side: bottom;
font-style: italic;
color: #666;
}
真正需要“表头文字描述”的地方，始终用 <th>；CAPTION 是表格的说明书，不是目录条目。混淆这两者，会让表格既难维护，又对键盘用户和屏幕阅读器不友好。
