figcaption必须是figure的第一个或最后一个子元素，否则语义断裂；alt描述图像“是什么”，figcaption说明“为什么放这里”，二者不可互换或省略，且figure仅适用于可抽离的独立内容。
直接用 <figure> 包裹图片 + <figcaption>，但必须确保结构合规、语义准确，否则读屏器可能跳过说明，SEO 也收不到图文关联信号。
figcaption 必须是 figure 的第一个或最后一个子元素
这是 W3C 强制规范，不是“建议”。浏览器和读屏器靠这个位置判断归属关系。中间插一个 <p>、<button> 或其他标签，语义就断了。
- 正确写法只有两种：
<figure><figcaption>...</figcaption><img></figure>或<figure><img><figcaption>...</figcaption></figure> - 别为了视觉顺序硬改 HTML 结构——比如设计要求标题在上、说明在下，但语义上说明更重要？用 CSS 的
flex-direction: column-reverse控制渲染流，保持 DOM 合规 -
<figcaption>单独出现（没包在<figure>里）会被浏览器忽略，甚至解析到 DOM 外部
alt 和 figcaption 功能不同，不能互相替代
alt 描述图像「内容本身」（盲人靠它知道图里有什么），<figcaption> 解释图像「为什么放这里」（上下文、结论、来源等）。两者信息维度不同，重复写反而降低可访问性。
- 错：
<img alt="后台管理界面"><figcaption>图1:后台管理界面布局</figcaption>（alt没讲清内容，figcaption又没提供额外上下文） - 对：
<img alt="左侧导航栏含‘用户管理’‘角色配置’等菜单项,主区域显示表格与搜索框"><figcaption>图1:后台管理界面布局</figcaption> -
alt=""表示图是纯装饰，此时不该加<figcaption>——否则语义矛盾
什么时候不该用 figure/figcaption？
<figure> 不是“给图加个说明文字”的样式工具，而是标记「自包含 + 可脱离上下文存在」的语义单元。滥用反而破坏结构。
- 纯装饰图（如背景花纹、分隔线）→ 改用 CSS
background-image，不进 HTML 流 - 轮播图、产品图库 → 每张图应各自独立用一个
<figure>，不能一个<figure>包一堆图 - 正文内配图解释某句话（如“如图所示，点击保存按钮”）→ 直接用
<img>+alt就够了，删掉图后正文仍通顺才适合用<figure> - 图注需要动态插入（如 JS 渲染后补说明）→ 确保插入时 DOM 位置合规（首或尾），且不破坏原有子元素顺序
默认样式简单，但几个细节容易踩坑
浏览器对 <figure> 几乎没默认边框或间距，看起来像普通 <div>；<figcaption> 默认居中、字体略小，但图片下方常有空白间隙——那是 <img> 默认内联对齐基线导致的。
- 必加样式：
figure img { display: block; }，否则图片下方多出几像素空白 - 居中图+图注推荐用
text-align: center或 Flex，别用margin: auto配块级设置，窄屏易溢出 - 响应式中别用
float或position: absolute把<figcaption>移出文档流，否则读屏器可能完全跳过 -
<figcaption>内容为空格或空字符串，会被浏览器忽略——W3C 要求它必须有有效内容
最常被忽略的是：figure 不是排版容器，它是语义开关。开错了，辅助技术收不到信号，搜索引擎也抓不准图文关系；开对了，不用 JS 就能获得可访问性红利。
