figcaption必须是figure的第一个或最后一个子元素，这是w3c强制规范；中间插入其他元素会破坏语义，导致屏幕阅读器无法正确关联图与说明。
figcaption必须是figure的第一个或最后一个子元素
这是W3C强制规范，不是“建议”。浏览器和屏幕阅读器靠这个位置判断图与说明的归属关系。中间插一个<p></p>、<div>或<code><button></button>，语义就断了，读屏器可能直接跳过figcaption。
只允许两种写法：
<figure><figcaption>图2:API响应结构示例</figcaption><img src="api.png" alt="JSON响应体截图"></figure><figure><img src="api.png" alt="JSON响应体截图"><figcaption>图2:API响应结构示例</figcaption></figure>
别为了视觉顺序硬改HTML结构——比如设计稿要求标题在上、图在下，但语义上说明更重要？用CSS的flex-direction: column-reverse控制渲染流，DOM顺序保持合规。
figure不是“给图片加说明”的快捷div
它只适用于内容可独立抽离、删掉不影响正文主干逻辑的场景。比如技术文档里的<pre class="brush:php;toolbar:false;"><code></code>截图、学术论文中的折线图、带出处的历史照片。</pre>
以下情况不该用figure：
- 纯装饰图（应改用CSS
background-image） - 轮播图单帧（每张图需各自套一个
figure） - 正文内配图解释某句话（如“点击保存按钮，如图所示”→直接用
<img>+alt就够了） - 产品页主图+“点击查看大图”文字（属于交互层，非语义单元）
判断标准就一条：删掉整个<figure></figure>块，正文是否依然通顺？不通顺，说明它本就不该存在。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
alt和figcaption分工不同，不能照抄或省略
alt是图像的替代文本，面向无图环境与无障碍；figcaption是上下文说明，面向文档逻辑与SEO。二者信息维度不同，重复写等于放弃一半语义价值。
常见错误写法：
-
<img alt="后台管理界面"><figcaption>图1:后台管理界面布局</figcaption>（alt没描述内容，figcaption没提供额外上下文） -
<img alt=""><figcaption>图1:装饰性分割线</figcaption>（alt=""表示纯装饰，再加figcaption语义矛盾）
正确做法：
-
alt描述“图上有什么”：alt="左侧导航栏含‘用户管理’‘角色配置’等菜单项，主区域显示表格与搜索框" -
figcaption解释“为什么放这里”：<figcaption>图1:权限配置模块布局（v2.4新增功能）</figcaption>
图片下方有空白间隙？别怪figcaption，怪img默认对齐方式
这不是figcaption的问题，而是<img>默认vertical-align: baseline导致的基线留白——哪怕你没写字母，也会为g、j预留下降空间。
最简单解法：
- 给
img加display: block（推荐，一劳永逸） - 或设
vertical-align: top/middle（需注意父容器行高）
另外，figure本身无默认padding/margin，看起来像普通<div>，容易误以为没生效。如果需要统一间距，建议显式设置<code>figure { margin: 1em 0; }。
