html 中 figure 标签作用 html 中 figure 标签的使用场景-html教程-PHP中文网

html 中 figure 标签作用 html 中 figure 标签的使用场景

煙雲

发布： 2025-07-23 17:08:02

原创

1114人浏览过

figure标签是用于包裹图片、代码、视频等独立内容及其标题（figcaption）的语义化容器，提升可访问性和seo；2. 它与仅表示视觉元素的img标签不同，在语义上明确关联内容与说明，利于屏幕阅读器识别；3. 在响应式设计中，figure作为结构化容器便于统一控制样式，使内容单元适配不同屏幕；4. 除图片外，还可包裹代码块、音视频、svg图表、blockquote引用等需标题说明的独立内容。

html 中 figure 标签作用 html 中 figure 标签的使用场景

HTML中的figure标签，在我看来，它就是网页内容里那些“自成一体”的独立单元的语义化容器。它的核心作用，是把图片、代码块、图表、视频这类内容，和它们对应的标题或说明（figcaption）关联起来，形成一个完整的、可脱离主文本流独立存在的组件。说白了，就是告诉浏览器和辅助技术，这块内容即便被挪到文章末尾的附录，或者换个位置，它本身的意思也不会变，而且它通常需要一个标题来解释自己。

解决方案

figure标签本身并不直接改变内容的视觉呈现，它的强大之处在于赋予内容语义。当你有一张图片、一段代码、一个视频，或者任何需要配上说明的独立内容块时，将其包裹在figure中，并使用figcaption作为其标题，能极大地提升网页的可访问性和SEO表现。这就像给你的内容贴上了一个“这是个独立故事，这是它的名字”的标签。

举个最常见的例子，一张图片和它的说明：

立即学习“前端免费学习笔记（深入）”；

<figure>
  <img src="example.jpg" alt="描述图片内容" width="600" height="400">
  <figcaption>图1: 这是一个示例图片，展示了某项技术成果。</figcaption>
</figure>

登录后复制

你看，img是图片本身，figcaption是它的标题。figure把它们俩紧密地绑定在一起，形成一个语义上的整体。这样，屏幕阅读器就能清楚地知道“这张图片是关于什么”；搜索引擎也能更好地理解这块内容的上下文；甚至在未来，如果你想把所有图表都提取出来做成一个画廊，有了figure，这个操作会变得异常简单。

`figure` 标签与传统图片标签 `img` 有何不同？

说实话，很多人刚开始接触figure时，可能会觉得它和直接放一个img标签，然后下面跟一个p标签做说明，好像没多大区别。但实际上，语义上的差异是巨大的，这可不仅仅是多了一层嵌套那么简单。

img标签，它就只是一个图片，一个视觉元素。它告诉浏览器“这里有一张图片”。至于这张图片是文章的配图、一个图标、还是一个广告，img本身是不知道的。它不提供任何关于图片和其描述之间关系的语义信息。

而figure呢，它是一个语义容器。它明确地告诉浏览器、搜索引擎和辅助技术：“我里面包着的是一个独立的内容单元，它通常是媒体内容，而且它有一个专属的标题或说明（figcaption）。”这种关联性是img标签自身无法提供的。

想象一下，你写了一篇文章，里面有很多图片。如果你只是用img和p来做图片和说明，那么从代码层面看，它们就是两个独立的元素，浏览器不知道这个p就是那个img的说明。但如果用figure和figcaption，这种父子关系和语义关联就一目了然了。这对于屏幕阅读器尤其重要，它能准确地将图片内容与标题播报给视障用户，大大提升了可访问性。

慧中标AI标书

慧中标AI标书是一款AI智能辅助写标书工具。

120

查看详情

<!-- 传统方式：语义模糊 -->
<img src="old-way.jpg" alt="旧方式的图片">
<p>这是旧方式的图片说明。</p>

<!-- 使用 figure：语义清晰 -->
<figure>
  <img src="new-way.jpg" alt="新方式的图片">
  <figcaption>图2: 这是使用figure标签的图片说明，语义更明确。</figcaption>
</figure>

登录后复制

这种语义的清晰度，对于构建健壮、可维护、对所有用户友好的网页来说，是不可或缺的。

`figure` 标签在响应式设计中扮演什么角色？

figure标签本身并不会直接让你的图片或视频变得响应式，它更像是一个舞台，让舞台上的演员（比如img或video）能够更好地进行响应式表演。它提供了一个语义化的容器，使得你可以更方便地对这个“内容单元”整体进行样式控制，以适应不同的屏幕尺寸。

当我们在做响应式设计时，通常会给img标签设置max-width: 100%; height: auto;这样的CSS规则，让图片能够等比例缩放。figure标签在这里的作用，就是为这些响应式媒体内容提供一个统一的包裹层。你可以给figure设置一些外边距、内边距，或者最大宽度，来控制整个图文块的布局。

比如，你可能希望图片在小屏幕上占满宽度，但在大屏幕上，它不应该无限放大，而是有一个最大宽度，并且居中显示。你可以这样操作：

<style>
  figure {
    margin: 1em auto; /* 上下外边距1em，左右自动居中 */
    max-width: 800px; /* 最大宽度 */
    padding: 0; /* 移除默认的padding */
  }
  figure img {
    max-width: 100%; /* 图片最大宽度为父容器的100% */
    height: auto; /* 高度自动调整 */
    display: block; /* 移除图片底部的小间隙 */
  }
  figcaption {
    font-style: italic;
    text-align: center;
    margin-top: 0.5em;
    color: #555;
  }
</style>

<figure>
  <img src="responsive-example.jpg" alt="响应式设计中的图片展示">
  <figcaption>图3: 这张图片在不同屏幕尺寸下都能良好展示。</figcaption>
</figure>

登录后复制

在这里，figure作为一个父容器，帮助我们统一管理了图片和标题的布局。你可以给figure设置display: flex或者grid来控制img和figcaption的排列方式，使其在不同设备上呈现出最佳效果。它提供了一个非常便利的钩子（hook），让你的CSS样式能够更精准、更语义化地作用于这些独立的媒体内容块。

除了图片，`figure` 标签还能包含哪些内容？

这正是figure标签的魅力所在，它远不止是图片的专属。只要是那些“自成一体”、可以独立于主文本流存在、且通常需要一个标题或说明来解释自身的内容，都可以放进figure里。这大大扩展了它的使用场景。

我个人觉得，最常用的除了图片，还有以下几种：

代码片段或代码块（<pre><code>） 当你在技术文章中展示一段代码时，这段代码通常需要一个说明，比如它是什么语言、解决了什么问题。

<figure>
  <pre><code>
    function greet(name) {
      console.log(`Hello, ${name}!`);
    }
    greet('World');
  </code></pre>
  <figcaption>代码示例1: 一个简单的JavaScript函数。</figcaption>
</figure>

登录后复制

视频（<video>）或音频（<audio>） 如果你嵌入一个视频教程或者一段背景音乐，通常也会给它一个标题。

<figure>
  <video controls src="tutorial.mp4" width="640" height="360">
    您的浏览器不支持视频播放。
  </video>
  <figcaption>视频1: 如何使用HTML5的figure标签。</figcaption>
</figure>

登录后复制

图表或示意图（SVG、Canvas等） 任何用SVG或Canvas绘制的图表，或者一个复杂的示意图，都可以用figure包裹。

<figure>
  <svg width="200" height="200">
    <circle cx="100" cy="100" r="80" stroke="black" stroke-width="3" fill="red" />
  </svg>
  <figcaption>图4: 一个简单的SVG圆形示例。</figcaption>
</figure>

登录后复制

引用的文本块（<blockquote>） 虽然<blockquote>本身就是引用，但如果你想给这个引用加上一个明确的出处或说明，figure和figcaption也能派上用场。
```
<figure>
  <blockquote>
    <p>设计不是你看到和感觉到的东西。设计是它如何工作。</p>
  </blockquote>
  <figcaption>—— 史蒂夫·乔布斯</figcaption>
</figure>
```
登录后复制