是语义容器而非排版工具，仅用于可独立引用的图文内容； 必须为直接子元素且唯一，推荐前置以提升无障碍体验；alt 描述图像内容，figcaption 解释其意义；样式需用 css 控制。
必须满足“可独立引用”这个前提
只有当图片、图表、代码块等内容能从正文中抽出来，放进附录、侧栏或单独页面，且不破坏主文逻辑时，才该用
- 学术文章里的“图3.2：用户行为转化漏斗”
- 技术文档中一段 JSON 示例，配说明“响应结构说明”
- 博客里一张信息图，注明“数据来源：2024年公开调研报告”
纯装饰图、轮播图、头像、按钮图标、文章内仅作示意的配图，都不属于这个范畴，直接用 <img alt=""> 就够了。
figcaption 必须是 figure 的直接子元素，且只能有一个
它得紧挨着 <figure></figure> 开始或结束，中间不能插其他标签（如 <p></p>、<button></button>）。常见正确结构只有两种：
-
<figure><figcaption>标题</figcaption><img></figure>（说明前置） -
<figure><img><figcaption>说明</figcaption></figure>（说明后置）
浏览器默认渲染时，figcaption 通常显示在底部，但屏幕阅读器按 HTML 顺序读取——先读 figcaption 再读图，理解更连贯。所以推荐始终放在开头。
alt 和 figcaption 各司其职，别混用
-
alt描述图像“是什么”：例如<img alt="柱状图：Q4 各区域营收对比"> -
figcaption解释图像“为什么重要”：例如<figcaption>Q4 营收跃升 42%，主要来自新市场拓展</figcaption>
写成“如图所示”“截图”“这张图”这类空洞文字，等于没写；把 alt 和 figcaption 写成一样内容，会降低无障碍体验和 SEO 效果。
样式控制靠 CSS，不依赖默认表现<figure></figure> 默认只有上下外边距，<figcaption></figcaption> 默认左对齐、无 padding。需要居中图+居下标题？得加 CSS：
figure {
text-align: center;
}
figcaption {
display: block;
margin-top: 0.5em;
font-size: 0.9em;
color: #666;
}
要做左图右文或响应式切换？用 Flex 或 Grid：
figure {
display: flex;
align-items: flex-start;
gap: 1rem;
}
figure img {
flex-shrink: 0;
max-width: 200px;
}
@media (max-width: 600px) {
figure { flex-direction: column; }
}
不复杂但容易忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
