必须是的首个且唯一子元素，紧贴其开始标签后；嵌套于等内部或用模拟均破坏语义与可访问性。

caption 必须是

的第一个子元素

不是“放在表格上方就行”，而是 DOM 位置必须严格满足：紧贴 <table> 开始标签之后、且是它的直接子节点。浏览器和屏幕阅读器靠这个结构识别语义归属，放错位置等于没写。 <ul><li>✅ 正确：<code><table> <caption>销售汇总</caption> <thead>... <li>❌ 错误：<code><table> <thead><caption>销售汇总</caption></thead>（<code><caption></caption> 不是 <thead> 的合法子元素） <li>❌ 更隐蔽错误：<code><div class="title">销售汇总</div> <table>...（视觉像标题，但语义为零） <h3>caption 不能嵌套在任何表格内部容器里</h3> <p><code><caption></caption> 只能挂载在 <table> 上，不能塞进 <code><thead>、<code><tbody>、<code><tfoot> 或任意 <code><tr> 里。一旦嵌套，DOM 结构断裂，<code>table.caption 属性返回 null，PDF 渲染工具（如 dompdf）直接跳过。

• 辅助技术（JAWS/NVDA）只读取位置合法的 <caption></caption>，其他位置的会被忽略
• 多个 <caption></caption> 写在同一 <table> 中，只有第一个生效，其余被静默丢弃 <li>用 <code><th colspan="N"> 模拟标题？那是表头单元格，不是表格标题，语义完全不同 <h3>caption-side 控制位置，但 top/bottom 才真正可靠</h3> <p><code>caption-side: top 和 caption-side: bottom 是唯一全兼容的值；left/right 在旧版 Safari、Firefox 早期版本中支持极差，IE 完全不支持（除非强制现代文档模式）。
  

  Article To Html

  文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

  下载
  • 默认就是 caption-side: top，无需额外声明
  • 想置底？写 caption { caption-side: bottom; } 即可，但注意部分辅助技术仍按“上方标题”逻辑播报，需实测
  • 避免同时设 float 或 position: absolute——会切断语义绑定，打印/PDF 时标题可能消失或错位
  • text-align: center 对 caption 默认有效，但旧版 Safari 下可能失效，稳妥做法是搭配 caption-side: top 使用

  别用 div 或 h2 替代 caption

  这是最常被忽略的可访问性硬伤：用 <h2></h2> 或 <div> 加 CSS 定位到表格上方，视觉上没问题，但对屏幕阅读器来说，它和表格毫无关系。 <ul> <li> <code><caption></caption> 是唯一被 HTML 标准明确定义为“表格标题”的元素，辅助技术只认这个

• 重复加 <h2></h2> + <caption></caption>？会造成语义冗余，部分读屏软件会重复播报
• 图片说明？别用 <caption></caption>——那是 <figure><figcaption></figcaption></figure> 的职责，混用会导致验证失败

实际项目里最容易被绕开的是 DOM 位置校验——开发者看到“标题显示出来了”就以为 OK，但一接入无障碍测试或生成 PDF 就暴露问题。真正起效的不是“看起来像标题”，而是浏览器解析出的父子关系是否严格匹配规范。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！