figcaption必须是figure的第一个或最后一个直接子元素，dom位置决定读屏器播报顺序和搜索引擎识别；错误插入其他元素会破坏语义，正确写法仅两种：figcaption在img前或后。
figcaption 必须是 figure 的第一个或最后一个直接子元素
这是 W3C 强制规范，不是样式建议。DOM 位置决定读屏器播报顺序和搜索引擎识别逻辑——中间插一个 <div>、<code><p></p> 或按钮，语义就断了，figcaption 会被忽略。
常见错误包括：
- 把
figcaption套在<div class="caption"></div>里再塞进figure - 在
img和figcaption之间加空行或注释（HTML 解析会生成文本节点，破坏“直接子元素”关系） - 用 JS 动态插入
figcaption时没校验父节点是否为figure直接子级
正确写法只有两种：<figure><figcaption>...</figcaption><img></figure> 或 <figure><img><figcaption>...</figcaption></figure>。视觉上想标题在上？用 CSS flex-direction: column-reverse 控制渲染流，别动 DOM 顺序。
alt 和 figcaption 分工必须明确，不能互相替代
alt 是图像内容的替代文本，面向无图环境与屏幕阅读器；figcaption 是上下文说明，面向文档逻辑、编号、结论或数据来源。两者信息维度不同，照抄或省略任一者都会削弱可访问性。
典型问题：
-
alt写成“后台界面”，figcaption写成“图1: 后台界面”——二者都没提供有效信息 - 图是代码截图，
alt却写“截图”，没提语言、错误类型或关键行；figcaption没注明触发条件或环境版本 -
alt=""（纯装饰图）却配了figcaption，造成语义矛盾
实操建议：
-
alt描述“图里有什么”：例如alt="折线图：横轴为月份，纵轴为活跃用户数，Q1至Q3上升，Q4回落" -
figcaption回答“为什么放这张图”：例如<figcaption>图4：2024年用户增长拐点出现在7月，与暑期营销活动启动时间吻合</figcaption>
哪些图真该用 figure + figcaption？
figure 不是“给图加说明”的快捷容器，而是标记「可抽离 + 可独立引用」的内容单元。判断标准只有一条：删掉它，正文主干逻辑是否依然通顺？
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
✅ 该用：
- 代码块截图 + “清单 2: JWT 认证响应结构”
- SVG 架构图 + “图3: 用户登录流程（含 OAuth2.0 授权路径）”
- 带出处的历史照片 + “来源：NASA 公开影像库，拍摄于 2023 年火星车任务期间”
❌ 不该用：
- 轮播图单帧（应每帧各自套一个
figure） - 文章内随文小图，如“点击右上角保存按钮”旁的图标
- banner 图、头像、按钮图标、纯装饰分隔线
特别注意：轮播图不能共用一个 figcaption，哪怕设计稿要求统一标题。外层可用 <section></section> 或 <h2></h2> 标注总览，内部每个图必须独立 figure。
默认样式坑与基础修复
浏览器对 figure 几乎无默认边距，figcaption 默认居中、字体略小，但 img 下方常有空白间隙——那是 img 默认内联对齐基线导致的，不是 margin 或 padding。
快速修复方式：
- 给
img加display: block，立刻消除底部空白 - 避免全局重置
figure { margin: 0 }，它的上下 margin 是为“独立单元”预留的语义呼吸空间 - 图文左图右文布局：用
display: flex+align-items: flex-start，小屏下切回flex-direction: column
复杂点在于：figcaption 放顶部还是底部，不只影响样式，更决定读屏器先听标题还是先听图——而这个顺序无法靠 CSS 逆转，只能靠 DOM 位置保证。
