figure 和 figcaption 是语义标签而非样式工具，figcaption 必须为 figure 的首个或末个直接子元素，一个 figure 仅容一个非空 figcaption，且需与 alt 分工协作以保障无障碍与 SEO。
figure 和 figcaption 不是“给图片加个说明”的样式工具，而是语义契约——用错位置、多写一个、或塞进无关元素，就会让屏幕阅读器读错、搜索引擎忽略图文关联。
figcaption 必须是 figure 的第一个或最后一个直接子元素
浏览器和辅助技术（AT）靠 DOM 位置判断归属关系。中间插个 <p></p>、<div> 或按钮，语义就断了。
<ul>
<li>✅ 正确：<code><figure><figcaption>图2：用户登录流程</figcaption><img src="login.png" alt="登录界面包含邮箱输入框、密码框与‘登录’按钮"></figure>
<figure><img src="login.png" alt="..."><figcaption>图2：用户登录流程</figcaption></figure>
<figure><img alt="HTML中figure和figcaption标签标注图片说明的规范" ><div class="meta"><figcaption>...</figcaption></div></figure>（figcaption 不是直接子元素）<figure><img alt="HTML中figure和figcaption标签标注图片说明的规范" ><p>说明文字</p></figure>（p 不是 figcaption，无法被识别为图注）一个 figure 只能有一个 figcaption，且不能为空
W3C 规范明确限定：重复写 figcaption，第二个会被浏览器忽略；留空或只含空格，读屏器可能跳过或报错。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 多段说明？拆成多个
figure，比如分步截图 → 每张图一个figure+ 独立figcaption - 轮播图每帧都要单独包裹：
<div class="carousel"> <figure>...</figure><figure>...</figure> </div>，不能共用一个figcaption - 统一编号（如“图1–4”）应放在外层
<section></section>或<h2></h2>里，而非强塞进某个figcaption
alt 和 figcaption 分工不同，不能互相替代
alt 是图像的替代文本，面向无图环境与无障碍；figcaption 是上下文说明，面向文档逻辑与 SEO。二者信息维度不同，重复写等于放弃一半语义价值。
-
alt描述“是什么”：alt="折线图：2024年Q1至Q3用户留存率变化" -
figcaption解释“为什么放这里”：<figcaption>图3：Q2留存率回升27%，源于新用户引导流程优化</figcaption> - 删掉
figure块，正文仍通顺 → 适合用figure；只是配图解释某句话 → 直接用<img alt="HTML中figure和figcaption标签标注图片说明的规范" >加alt就够了
响应式布局中别用 float 或 absolute 把 figcaption 移出文档流
视觉上想左图右文、标题在上说明在下？可以，但必须用 display: flex 或 grid 控制，保持 DOM 顺序合规。否则读屏器可能完全跳过 figcaption。
- 小屏切上下结构：
@media (max-width: 768px) { figure { flex-direction: column; } } - 标题视觉置顶但语义在后？用
flex-direction: column-reverse，不改 HTML 顺序 - 别用
float: left包裹img、再用position: absolute定位figcaption—— 这会让 AT 丢失关联
真正难的不是怎么写标签，而是每次插入图前问一句：它能不能被抽出来放进附录、被论文引用编号、或者脱离当前段落依然说得清？答“能”，才动 figure；答“不能”，<img alt="HTML中figure和figcaption标签标注图片说明的规范" > + alt 就是最干净的选择。
