figure 是艺术指导内容的语义包装层，用于将一组按条件切换的图片及figcaption组织为独立图元；它不处理分辨率切换或加载逻辑，仅提供语义容器功能。

figure 标签本身不处理图片的分辨率切换或艺术指导（art direction），它也不参与图片加载逻辑——这些由 <img>、<picture></picture> 和 CSS 共同完成。它的角色是语义容器：把一张或多张经过艺术指导处理的图片，连同其上下文说明，组织成一个可独立引用、可抽离、可编号的内容单元。

figure 是艺术指导内容的语义包装层

当你要为不同屏幕尺寸展示完全不同的构图（比如桌面端用横幅全景图，移动端裁剪为突出主体的特写），你会用 <picture></picture> + <source media="..." srcset="..."></source> 实现艺术指导。而这个整套方案，应包裹在 <figure></figure> 中，以表明“这组按条件切换的图片共同构成一个独立图元”。

• ✅ 正确：用 <figure></figure> 包裹整个 <picture></picture>，再配 <figcaption></figcaption> 说明该图元的用途或来源
• ❌ 错误：只把最终渲染出的 <img> 单独套 <figure></figure>，而把 <source></source> 放在外面——破坏了语义完整性，也使屏幕阅读器无法关联说明与全部备选资源

figcaption 要反映艺术指导的意图，而非仅描述某一张图

因为艺术指导下的多张图本质是同一信息的不同视觉表达，<figcaption></figcaption> 应聚焦于这个图元的整体意义，而不是某张具体图片的细节。

• 推荐写法：<figcaption>图4：首页主视觉在不同设备上的构图适配（桌面：全场景；移动端：聚焦用户操作按钮）</figcaption>
• 避免写法：<figcaption>一张横幅图</figcaption> 或 <figcaption>一张裁剪后的手机图</figcaption> —— 割裂了统一语义

响应式排版中，figure 容器便于统一控制图文关系

借助 CSS 的 display: grid 或 flex，你可以让 <figure></figure> 在小屏时垂直堆叠（图在上、说明在下），大屏时水平并置（图左、说明右），且不影响 DOM 语义顺序。

• <figure></figure> 作为块级容器，天然支持宽度自适应和媒体查询控制
• figcaption 位置（顶部/底部）由 DOM 顺序决定，不依赖 CSS 排列；视觉布局则交由 CSS 管理，两者解耦清晰
• 例如：用 grid-template-areas 在不同断点定义 "image caption" 或 "caption image"，语义不变，呈现灵活

多图艺术指导场景下，慎用多个 figure

如果一组图片并非“不可拆分”的整体（比如同一产品在三种尺寸下的三种不同裁切），它们各自代表独立图元，应分别用单独的 <figure></figure>；但如果这组图共同服务于一个说明目标（如“响应式头图的三种构图策略”），且删除其中任意一张都会削弱说明完整性，则可用一个 <figure></figure> 包裹所有 <picture></picture>，并在 <figcaption></figcaption> 中统一对齐说明。

• 关键判断标准：是否共用同一编号、同一标题、同一数据来源或分析结论
• 注意：<figcaption></figcaption> 仍只能出现一次，且必须是 <figure></figure> 的直接子元素（首或尾）