figure 与 figcaption
将图像包裹在带有说明文字的语义化 figure 容器中。
figure 与 figcaption 是 CoddyKit 上的免费 HTML Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。
什么是图示元素
<figure> 元素用于标记从主要文本中引用的自包含内容：
- 带说明文字的图像
- 代码列表
- 图表、数据图和插图
- 引文
其关键特征是：如果将它从主要内容流中移除，周围的文本仍然具有完整意义。
图示元素 with 图注
<figcaption> 为图示元素提供说明文字：
<figure>
<img src="chart.png" alt="Bar chart showing Q1-Q4 revenue">
<figcaption>Figure 1: Quarterly revenue growth, 2024.</figcaption>
</figure>
<!-- figcaption can be first or last child of figure -->
<!-- It is visible text that supplements the alt text -->图注位置
<figcaption> 可以放在主要内容之前或之后：
<figure>
<figcaption>Listing 1: Hello World in HTML</figcaption>
<pre><code><!DOCTYPE html>
<html>
<body>Hello, World!</body>
</html></code></pre>
</figure>无障碍：替代文本与图注
请了解二者的区别：
alt——为屏幕阅读器和加载失败的图像描述图像内容figcaption——提供背景、来源或解释的可见说明文字
二者用途不同，不应相互重复。
<figure>
<img src="chart.png" alt="Line chart showing 45% growth from January to December">
<figcaption>Source: 2024 Annual Report, Finance Department.</figcaption>
</figure>图示元素中的代码列表
使用 <figure> 包含带标签的代码示例：
<figure>
<pre><code>function greet(name) {
return `Hello, ${name}!`;
}</code></pre>
<figcaption>Example 1: A simple greeting function in JavaScript.</figcaption>
</figure>图示元素中的引文
<figure> 与 <blockquote> 搭配使用非常合适：
<figure>
<blockquote>
<p>The web is for everyone.</p>
</blockquote>
<figcaption>— Tim Berners-Lee, inventor of the World Wide Web</figcaption>
</figure>图示元素中的多个图像
一个图示元素可以包含多个相关图像：
<figure>
<img src="before.jpg" alt="Garden before renovation">
<img src="after.jpg" alt="Garden after renovation">
<figcaption>Before and after the 2024 renovation project.</figcaption>
</figure>图示元素与分区容器的比较
何时使用 <figure>，何时使用 <div>：
- 当内容可以移到附录中时，使用
<figure> - 当需要可见说明文字时，使用
<figure> - 对于布局容器或非自包含的图像组，使用
<div>
在文本中链接图示元素
从主要文本中引用图示元素：
<p>The growth trend is illustrated in <a href="#fig1">Figure 1</a>.</p>
<figure id="fig1">
<img src="growth.png" alt="Revenue growth chart 2020-2024">
<figcaption>Figure 1: Annual revenue growth 2020-2024.</figcaption>
</figure>图像不一定需要图示元素
您不需要将每个图像都包裹在 <figure> 中：
<!-- Decorative or simple content image: just img -->
<img src="avatar.jpg" alt="Profile photo of Jane Doe" class="avatar">
<!-- Image with a caption OR self-contained reference: use figure -->
<figure>
<img src="diagram.svg" alt="System architecture diagram">
<figcaption>Figure 3: The three-tier architecture.</figcaption>
</figure>设置图示元素和图注的样式
图示元素的常用 CSS：
figure {
margin: 2rem auto;
max-width: 100%;
text-align: center;
}
figcaption {
font-size: 0.875rem;
color: #666;
margin-top: 0.5rem;
font-style: italic;
}快速检查
替代文本和图注之间的关键区别是什么？
回顾：图示元素和图注
图示元素要点：
<figure>——从主要文本中引用的自包含内容<figcaption>——可见说明文字，可以是图示元素的第一个或最后一个子元素alt——供屏幕阅读器使用的不可见描述figcaption——面向所有用户的可见背景说明- 适用于图像、代码、引文和图表
常见问题解答
「figure 与 figcaption」课时是免费的吗？
是的 — 「figure 与 figcaption」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。
「figure 与 figcaption」这节课中我会学到什么？
将图像包裹在带有说明文字的语义化 figure 容器中。 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 HTML Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。
「figure 与 figcaption」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 HTML Academy 课中编写并运行代码吗？
能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- img 元素：src、alt、width 与 height
- 使用 srcset 和 sizes 实现响应式图像
- 用于艺术指导的 picture 元素
- figure 与 figcaption