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