<caption>必须是<table>的首个且唯一子元素，紧贴其开始标签后；嵌套于<thead>等内部或用<div><h2>模拟均破坏语义与可访问性。
anything-to-html
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
下载
caption 必须是
的第一个子元素
不是“放在表格上方就行”，而是 DOM 位置必须严格满足：紧贴 <table> 开始标签之后、且是它的直接子节点。浏览器和屏幕阅读器靠这个结构识别语义归属，放错位置等于没写。
- ✅ 正确：
<table><caption>销售汇总</caption><thead>...
- ❌ 错误：
<table><thead><caption>销售汇总</caption></thead>（<caption> 不是 <thead> 的合法子元素）
- ❌ 更隐蔽错误：
<div class="title">销售汇总</div><table>...（视觉像标题，但语义为零）
caption 不能嵌套在任何表格内部容器里
<caption> 只能挂载在 <table> 上，不能塞进 <thead>、<tbody>、<tfoot> 或任意 <tr> 里。一旦嵌套，DOM 结构断裂，table.caption 属性返回 null，PDF 渲染工具（如 dompdf）直接跳过。
- 辅助技术（JAWS/NVDA）只读取位置合法的
<caption>，其他位置的会被忽略
- 多个
<caption> 写在同一 <table> 中，只有第一个生效，其余被静默丢弃
- 用
<th colspan="N"> 模拟标题？那是表头单元格，不是表格标题，语义完全不同
caption-side 控制位置，但 top/bottom 才真正可靠
caption-side: top 和 caption-side: bottom 是唯一全兼容的值；left/right 在旧版 Safari、Firefox 早期版本中支持极差，IE 完全不支持（除非强制现代文档模式）。
- 默认就是
caption-side: top，无需额外声明
- 想置底？写
caption { caption-side: bottom; } 即可，但注意部分辅助技术仍按“上方标题”逻辑播报，需实测
- 避免同时设
float 或 position: absolute——会切断语义绑定，打印/PDF 时标题可能消失或错位
-
text-align: center 对 caption 默认有效，但旧版 Safari 下可能失效，稳妥做法是搭配 caption-side: top 使用
别用 div 或 h2 替代 caption
这是最常被忽略的可访问性硬伤：用 <h2> 或 <div> 加 CSS 定位到表格上方，视觉上没问题，但对屏幕阅读器来说，它和表格毫无关系。
立即学习“前端免费学习笔记（深入）”；
-
<caption> 是唯一被 HTML 标准明确定义为“表格标题”的元素，辅助技术只认这个
- 重复加
<h2> + <caption>？会造成语义冗余，部分读屏软件会重复播报
- 图片说明？别用
<caption>——那是 <figure><figcaption> 的职责，混用会导致验证失败
实际项目里最容易被绕开的是 DOM 位置校验——开发者看到“标题显示出来了”就以为 OK，但一接入无障碍测试或生成 PDF 就暴露问题。真正起效的不是“看起来像标题”，而是浏览器解析出的父子关系是否严格匹配规范。
