<caption>必须紧贴<table>开始标签，因为HTML规范要求其为表格第一个子元素，否则浏览器会移出结构导致显示异常或无障碍失效；每个表格仅允许一个<caption>，需用CSS控制样式，不可嵌套或滥用。
为什么 <caption> 必须紧贴 <table> 开始标签？
因为 HTML 规范强制要求 <caption> 是 <table> 的第一个子元素，否则浏览器会自动将其移出表格结构——你写的标题可能突然出现在表格上方空白处，或干脆被忽略。实际开发中常见错误是把 <caption> 放在 <thead> 里、或者用 CSS 模拟标题却没写语义化标签，这会让屏幕阅读器无法识别表意，也影响 SEO。
正确位置只有一种：<table> 后立即跟 <caption>，再跟 <thead> 或 <tbody>：
<table>
<caption>2024 年各季度销售额（单位：万元）</caption>
<thead>
<tr><th>季度</th><th>金额</th></tr>
</thead>
<tbody>
<tr><td>Q1</td><td>128</td></tr>
</tbody>
</table>
<caption> 的对齐和定位靠 CSS，不是属性
老式写法如 <caption align="right"> 已被废弃，现代浏览器不支持。必须用 CSS 控制位置与样式：
-
caption-side控制上下位置：top（默认）或bottom - 水平居中用
text-align: center，左对齐用text-align: left - 若需右对齐且保持语义，别用
float或margin-left: auto，而用text-align: right+caption-side: top - 注意：某些旧版 Safari 对
caption-side: bottom渲染不稳定，建议加display: table-caption显式声明
当表格有多个逻辑分组时，别滥用 <caption>
<caption> 每个 <table> 只能有一个，这是硬性限制。如果你看到“主标题+副标题”需求，常见错误是嵌套两个 <caption> —— 浏览器只会渲染第一个，其余被丢弃。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
替代方案更实用：
- 用
<thead>中的<th colspan="N">做分组说明（适合简单场景） - 用
<div role="region" aria-labelledby="cap-id">包裹表格并配<h2 id="cap-id">（适合复杂报表） - 真要语义化多层标题，应拆分为多个独立
<table>，各自配<caption>
无障碍访问下，<caption> 不是可选装饰
对使用读屏软件的用户来说，<caption> 是表格的唯一官方“名字”。没有它，用户听到的只是“表格，3 行 2 列”，完全不知内容主题。测试时可用 VoiceOver 或 NVDA 打开页面，听它如何播报表格——如果跳过文字或只读“表格”，大概率是 <caption> 缺失、位置错误，或被 aria-hidden="true" 错误遮蔽。
容易被忽略的一点：<caption> 文字必须具体。写“数据表”不如写“2024 年用户地域分布统计”，后者才真正起说明作用。
