figure仅在图文可独立抽离且figcaption提供不可替代上下文时使用；figcaption必须是figure的首或尾直接子元素；alt描述图像内容，figcaption说明上下文；纯装饰图禁用figcaption。
figure 不是用来“给图片加个说明”的快捷排版工具，它只在图文内容能独立抽离、且 figcaption 提供不可替代的上下文时才该用——用错位置或结构不合规，读屏器会跳过说明，SEO 也收不到图文关联信号。
figcaption 必须是 figure 的第一个或最后一个子元素
这是 W3C 强制规范，不是样式建议。浏览器和屏幕阅读器靠 DOM 位置判断归属关系，中间插一个 <p>、<div> 或按钮，语义就断了。
- ✅ 正确写法只有两种：
<figure><figcaption>图1：后台界面布局</figcaption><img src="admin.png" alt="左侧导航含用户管理菜单，主区为表格"></figure> - ✅ 另一种正确：
<figure><img src="admin.png" alt="左侧导航含用户管理菜单，主区为表格"><figcaption>图1：后台界面布局</figcaption></figure> - ❌ 错误：
<figure><img><div class="wrapper"><figcaption>...</figcaption></div></figure>（figcaption不是直接子元素） - ❌ 错误：
<figure><img><p>说明文字</p></figure>（<p>不是figcaption，无法被识别为图注）
alt 和 figcaption 分工必须明确
alt 是图像内容的替代文本，供盲人理解“图里有什么”；figcaption 是上下文解释，说明“为什么放这里、意味着什么”。两者信息维度不同，重复或空洞都会削弱可访问性。
- ❌ 错误：
<img alt="后台管理界面"><figcaption>图1：后台管理界面布局</figcaption>（alt没讲清内容，figcaption又没补充新信息） - ✅ 推荐：
<img alt="左侧导航栏含‘用户管理’‘角色配置’等菜单项，主区域显示带搜索框的用户列表表格"><figcaption>图1：后台管理界面布局（v2.4.0 版本）</figcaption> - ⚠️ 注意：
alt=""表示纯装饰图，此时绝不应加figcaption——语义矛盾
带边框的说明文字怎么加才不破坏语义
边框是视觉层的事，别动 HTML 结构。直接给 figcaption 加样式即可，但要注意默认渲染细节：
立即学习“前端免费学习笔记（深入）”；
- 浏览器对
figcaption默认设为块级、居中、字体略小，但不会自动清除<img>的基线对齐间隙——常导致图下多出空白，加img { display: block; }能解决 - 加边框示例：
figcaption { border: 1px solid #e0e0e0; padding: 6px 10px; background: #fafafa; margin-top: 8px; } - 如需左图右文，用
figure { display: flex; align-items: flex-start; gap: 16px; }，再控制img宽高和figcaption最小宽度 - 小屏响应式建议切回垂直流：
@media (max-width: 768px) { figure { flex-direction: column; } }
哪些情况根本不该用 figure/figcaption
滥用反而污染语义结构，让机器和人都更难理解内容。
- 纯装饰图（如分隔线、背景花纹）→ 改用 CSS
background-image - 轮播图单帧、产品图库、头像旁昵称 → 每张图应各自独立用一个
figure，不能一个包一堆 - 正文内配图解释某句话（如“点击保存按钮，如图所示”）→ 直接用
<img alt="保存按钮位于右上角">就够，删掉图后正文仍通顺，就不满足“自包含”前提 - 图注需 JS 动态插入 → 确保插入后 DOM 位置仍在
figure首位或末位，且不破坏原有子元素顺序
最容易被忽略的是：figcaption 的位置决定读屏器播报顺序，而 CSS 渲染顺序可以独立调整。别为了视觉把 HTML 结构写歪——语义合规才是底线。
