figure标签用于包裹独立内容块如图片、图表或代码，提供语义化结构；figcaption则为其添加标题说明，二者结合提升可读性、SEO与无障碍支持。
在HTML中，figure 和 figcaption 标签常用于图文内容的语义化组织。它们帮助开发者更清晰地表达图片、图表、代码段等内容与其说明文字之间的关系，提升网页可读性和可访问性。
figure标签的基本作用
figure 是一个语义化标签，用来包裹独立的内容块，比如图片、插图、图表、代码示例等。这个内容通常可以脱离主文流动而存在，且常常配有标题或说明。
它本身不改变样式，但为内容提供了明确的语义结构，便于搜索引擎和屏幕阅读器理解。
常见用法包括：
- 单张图片及其说明
- 一组相关图片
- 图表或数据可视化
- 代码片段及描述
figcaption：为figure添加标题
figcaption 必须嵌套在 figure 内部，用于为其中的内容提供标题或说明文字。它可以放在 figure 的开头或结尾，分别表示标题在前或图注在后。
立即学习“前端免费学习笔记（深入）”；
示例：单个图片配说明
<figure><br> <img src="chart.png" alt="销售趋势图"><br> <figcaption>2024年各季度销售额增长趋势</figcaption><br></figure>
在这个例子中，图片是主体内容，figcaption 提供了上下文解释，辅助用户理解图像含义。
多个图片使用一个说明
当需要展示多张相关图片时，也可以将它们放入同一个 figure 中，并配以统一的说明。
<figure><br> <img src="photo1.jpg" alt="北京故宫外景"><br> <img src="photo2.jpg" alt="故宫内部庭院"><br> <figcaption>作者于2023年拍摄的北京故宫系列照片</figcaption><br></figure>
这种方式避免了重复标注，同时表明这些图片属于同一组内容。
用于代码示例的图文组合
figure 不仅限于图片，也适用于代码块等非图像内容。
<figure><br> <pre><code><br>function hello() {<br> console.log("Hello, world!");<br>}<br> </code></pre><br> <figcaption>一个简单的JavaScript函数示例</figcaption><br></figure>
这样处理后，代码与说明形成逻辑整体，结构更清晰。
基本上就这些。合理使用 figure 和 figcaption 能让页面结构更有层次，对SEO和无障碍支持都有好处。不复杂但容易忽略。