figure标签用于包裹独立且可移动的媒体内容，如图表、图片、代码片段；2. figcaption为其提供标题说明，提升可读性与无障碍访问；3. 配合使用增强语义结构，利于SEO，适用于有引用价值的内容块。
在HTML中，figure 和 figcaption 标签用于语义化地组织独立的内容块，尤其是与主内容相关但可单独存在的媒体内容，比如图片、图表、代码片段等。正确使用它们不仅提升页面结构清晰度，也有利于SEO和无障碍访问。
figure标签的基本作用
figure 是一个语义容器，表示文档中与主要内容相关、但可以被移动到文档其他位置（如侧栏或附录）而不影响整体理解的独立单元。它通常包含图像、插图、图表、照片、代码示例等内容。
关键点：
- 内容是“附属”但自包含的
- 可脱离上下文单独存在
- 常配合 img、svg、code 等使用
<figure> <img src="chart.png" alt="2024年销售趋势图"> </figure>
figcaption添加标题说明
figcaption 是 figure 的可选子元素，用于为 figure 中的内容提供标题或说明文字。它必须是 figure 的第一个或最后一个子元素。
立即学习“前端免费学习笔记（深入）”；
作用：
- 增强可读性，解释 figure 内容
- 提升屏幕阅读器用户的体验
- 符合语义化标准，便于样式控制
<figure> <img src="chart.png" alt="2024年销售趋势图"> <figcaption>图1：2024年各季度销售额增长趋势</figcaption> </figure>
适用场景与使用技巧
并不是所有图片都需要用 figure。只有当内容具备“独立性”和“可引用性”时才推荐使用。
适合使用的场景包括：
- 文章中的插图或示意图
- 数据图表或统计图
- 引用的代码段
- 摄影作品集展示
<figure>
<pre><code>function hello() {
console.log("Hello, world!");
}</code></pre>
<figcaption>示例：JavaScript基础函数写法</figcaption>
</figure>
注意：如果图片只是装饰或作为内容的一部分（如文章内嵌小图标），则不应使用 figure，直接用 img 即可。
无障碍与SEO优化建议
合理使用 figure 和 figcaption 能让辅助技术更好理解页面结构。
- 始终为 img 提供有意义的 alt 属性
- 用 figcaption 补充上下文信息，不要重复 alt 文本
- 避免在 figure 中放置多个不相关的媒体
- 可通过CSS控制 figcaption 的显示位置（如底部居中）
