caption标签仅用于table元素，不可用于图片说明；正确方案是figure+figcaption，二者语义归属不同、DOM结构要求不同、CSS控制方式也不同。
caption 标签不能直接用于“图片说明”，它只属于 table 元素的语义子元素，专为表格服务。如果你看到某处用 caption 给图片加说明，那基本是误用或混淆。
caption 必须嵌套在 table 里，且只能有一个
这是硬性规范，不是建议。caption 的 DOM 父节点必须是 table，浏览器解析时会严格校验。放在 img 外、div 里，甚至 figure 中，都会导致：HTML 验证失败、屏幕阅读器忽略、CSS caption-side 失效。
- ✅ 正确结构：
<table><caption>销售数据汇总</caption><tr><td>...</td></tr></table> - ❌ 常见错误：
<div><caption>这张图展示用户增长</caption><img src="..."></div>—— 这个caption标签根本不会被识别为标题，只是普通未定义标签 - ⚠️ 注意：一个
table只能有一个caption；重复写两个，第二个会被浏览器静默丢弃
给图片加说明，该用 figure + figcaption
真正语义正确、无障碍友好的图片说明方案是 figure + figcaption。它和 caption 功能相似（都是描述性标题），但归属不同：前者归 figure，后者归 table。
-
figcaption必须是figure的第一个或最后一个子元素，位置灵活（上/下均可） - 屏幕阅读器会把
figcaption作为图片的“名称”播报，例如：“图像：2026年Q2用户地域分布图” - 示例：
<figure> <img src="map.png" alt="中国各省份活跃用户热力图"> <figcaption>2026年Q2用户地域分布（单位：万人）</figcaption> </figure>
- 别用
div+p模拟 —— 即使样式一样，辅助技术无法关联图片与文字
caption 和 figcaption 的样式控制差异
两者都支持 CSS，但关键属性不同：
立即学习“前端免费学习笔记（深入）”；
-
caption用caption-side: top | bottom控制上下位置；figcaption没有这个属性，靠text-align或 flex 布局控制对齐 -
caption默认居中、加粗；figcaption默认无特殊样式，需手动设置font-weight、margin等 - 想让
figcaption显示在图片下方？确保它放在figure末尾，并加text-align: center - 想让
caption显示在表格下方？写caption { caption-side: bottom; }，不是margin-top
表格里插了图片，caption 还管不管整张表？
管。只要 caption 在 table 最开头，它描述的就是整张表的用途，不管表里有没有图片、有多少图片、图片在哪个单元格。
- 比如表格用
img显示图标或缩略图，caption仍应概括整表内容，如：<caption>各产品线最新版本发布状态（含图标标识）</caption> - 不要写成“带图的表格”——这没信息量；也不要试图在
caption里描述某张图，那是alt属性或figcaption的职责 - 如果表格本身结构复杂（比如含多张图+文字混合），
caption更要精准：说明范围（时间/地域）、单位、数据来源等，方便视障用户快速建立上下文
真正容易被忽略的是语义边界：caption 不是“通用标题标签”，它是表格契约的一部分；一旦脱离 table，就失去所有语义价值。别为了省事把它挪去配图片，该用 figure 就用 figure。
