当前位置:首页 > 文章列表 > 文章 > 前端 > HTML 中 figure 标签的作用是用于包裹独立的内容,比如图片、图表、代码块、视频等,这些内容通常与主文内容相关,但可以独立存在。它常用于将媒体内容与周围的文本区分开来,增强语义化。figure 标签的使用场景包括:图片与图注 当你有一张图片,并且希望为其添加一个描述性标题时,可以使用

包裹图片和
标签。

HTML 中 figure 标签的作用是用于包裹独立的内容,比如图片、图表、代码块、视频等,这些内容通常与主文内容相关,但可以独立存在。它常用于将媒体内容与周围的文本区分开来,增强语义化。figure 标签的使用场景包括:图片与图注 当你有一张图片,并且希望为其添加一个描述性标题时,可以使用
包裹图片和
标签。
2025-08-04 17:27:36 0浏览 收藏

HTML中的`

`标签,是网页内容中独立单元的语义化容器,用于包裹图片、代码块、图表、视频等独立内容及其标题(`
`),它提升了网页的可访问性和SEO表现。`
`与仅表示视觉元素的`HTML 中 figure 标签的作用是用于包裹独立的内容,比如图片、图表、代码块、视频等,这些内容通常与主文内容相关,但可以独立存在。它常用于将媒体内容与周围的文本区分开来,增强语义化。figure 标签的使用场景包括:图片与图注
当你有一张图片,并且希望为其添加一个描述性标题时,可以使用 <figure> 包裹图片和 <figcaption> 标签。<figure>
  <img src=`标签不同,它在语义上明确关联内容与说明,利于屏幕阅读器识别。在响应式设计中,`
`作为结构化容器便于统一控制样式,使内容单元适配不同屏幕。`
`除了图片外,还可包裹代码块、音视频、SVG图表、`
`引用等需标题说明的独立内容,为网页构建健壮、可维护、对所有用户友好的结构。

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

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

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

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

解决方案

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

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

html 中 figure 标签作用 html 中 figure 标签的使用场景
<figure>
  <img src="example.jpg" alt="描述图片内容" width="600" height="400">
  <figcaption>图1: 这是一个示例图片,展示了某项技术成果。</figcaption>
</figure>

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

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

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

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

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

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

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

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

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

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

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

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

当我们在做响应式设计时,通常会给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来控制imgfigcaption的排列方式,使其在不同设备上呈现出最佳效果。它提供了一个非常便利的钩子(hook),让你的CSS样式能够更精准、更语义化地作用于这些独立的媒体内容块。

除了图片,figure 标签还能包含哪些内容?

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

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

  1. 代码片段或代码块(

    <code></code>)</strong>
    当你在技术文章中展示一段代码时,这段代码通常需要一个说明,比如它是什么语言、解决了什么问题。</p><pre class="brush:html;toolbar:false;"><figure>
      <pre><code>
        function greet(name) {
          console.log(`Hello, ${name}!`);
        }
        greet('World');
      </code>
    代码示例1: 一个简单的JavaScript函数。
  2. 视频()或音频( 如果你嵌入一个视频教程或者一段背景音乐,通常也会给它一个标题。

    <figure>
      <video controls src="tutorial.mp4" width="640" height="360">
        您的浏览器不支持视频播放。
      </video>
      <figcaption>视频1: 如何使用HTML5的figure标签。</figcaption>
    </figure>
  3. 图表或示意图(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>
  4. 引用的文本块(

    虽然
    本身就是引用,但如果你想给这个引用加上一个明确的出处或说明,figurefigcaption也能派上用场。

    <figure>
      <blockquote>
        <p>设计不是你看到和感觉到的东西。设计是它如何工作。</p>
      </blockquote>
      <figcaption>—— 史蒂夫·乔布斯</figcaption>
    </figure>

关键在于,这些内容块在语义上是独立的,它们是主文本的补充,但即使脱离主文本,它们自身的信息完整性也不会受到影响。使用figure,就是给这些“小故事”一个专属的、结构化的家。

本篇关于《HTML 中 figure 标签的作用是用于包裹独立的内容,比如图片、图表、代码块、视频等,这些内容通常与主文内容相关,但可以独立存在。它常用于将媒体内容与周围的文本区分开来,增强语义化。figure 标签的使用场景包括:图片与图注 当你有一张图片,并且希望为其添加一个描述性标题时,可以使用

包裹图片和
标签。
示例图片
这是图片的说明文字。
代码块或表格 如果页面中有代码段或表格,并希望将其作为一个独立的块进行展示,可以用 figure 包裹。
<code>console.log("Hello, world!");</code>
这是一个 JavaScript 示例代码。
嵌入的视频或音频 在嵌入视频或音频时,也可以用 figure 来组织内容。

Java异常处理原则与实用技巧Java异常处理原则与实用技巧
上一篇
Java异常处理原则与实用技巧
VSCode配置PHP环境指南新手必备
下一篇
VSCode配置PHP环境指南新手必备
查看更多
最新文章
查看更多
课程推荐
  • 前端进阶之JavaScript设计模式
    前端进阶之JavaScript设计模式
    设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
    542次学习
  • GO语言核心编程课程
    GO语言核心编程课程
    本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
    511次学习
  • 简单聊聊mysql8与网络通信
    简单聊聊mysql8与网络通信
    如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
    498次学习
  • JavaScript正则表达式基础与实战
    JavaScript正则表达式基础与实战
    在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
    487次学习
  • 从零制作响应式网站—Grid布局
    从零制作响应式网站—Grid布局
    本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
    484次学习
查看更多
AI推荐
  • 千音漫语:智能声音创作助手,AI配音、音视频翻译一站搞定!
    千音漫语
    千音漫语,北京熠声科技倾力打造的智能声音创作助手,提供AI配音、音视频翻译、语音识别、声音克隆等强大功能,助力有声书制作、视频创作、教育培训等领域,官网:https://qianyin123.com
    105次使用
  • MiniWork:智能高效AI工具平台,一站式工作学习效率解决方案
    MiniWork
    MiniWork是一款智能高效的AI工具平台,专为提升工作与学习效率而设计。整合文本处理、图像生成、营销策划及运营管理等多元AI工具,提供精准智能解决方案,让复杂工作简单高效。
    98次使用
  • NoCode (nocode.cn):零代码构建应用、网站、管理系统,降低开发门槛
    NoCode
    NoCode (nocode.cn)是领先的无代码开发平台,通过拖放、AI对话等简单操作,助您快速创建各类应用、网站与管理系统。无需编程知识,轻松实现个人生活、商业经营、企业管理多场景需求,大幅降低开发门槛,高效低成本。
    117次使用
  • 达医智影:阿里巴巴达摩院医疗AI影像早筛平台,CT一扫多筛癌症急慢病
    达医智影
    达医智影,阿里巴巴达摩院医疗AI创新力作。全球率先利用平扫CT实现“一扫多筛”,仅一次CT扫描即可高效识别多种癌症、急症及慢病,为疾病早期发现提供智能、精准的AI影像早筛解决方案。
    108次使用
  • 智慧芽Eureka:更懂技术创新的AI Agent平台,助力研发效率飞跃
    智慧芽Eureka
    智慧芽Eureka,专为技术创新打造的AI Agent平台。深度理解专利、研发、生物医药、材料、科创等复杂场景,通过专家级AI Agent精准执行任务,智能化工作流解放70%生产力,让您专注核心创新。
    112次使用
微信登录更方便
  • 密码登录
  • 注册账号
登录即同意 用户协议隐私政策
返回登录
  • 重置密码