HTML怎么使用figure标签_HTMLfigure和figcaption标签的图文组合应用-html教程-PHP中文网

HTML怎么使用figure标签_HTMLfigure和figcaption标签的图文组合应用

雪夜

发布： 2025-09-27 23:41:01

原创

813人浏览过

figure标签用于包裹独立内容块如图片、图表或代码，提供语义化结构；figcaption则为其添加标题说明，二者结合提升可读性、SEO与无障碍支持。

html怎么使用figure标签_htmlfigure和figcaption标签的图文组合应用

在HTML中，figure 和 figcaption 标签常用于图文内容的语义化组织。它们帮助开发者更清晰地表达图片、图表、代码段等内容与其说明文字之间的关系，提升网页可读性和可访问性。

figure标签的基本作用

figure 是一个语义化标签，用来包裹独立的内容块，比如图片、插图、图表、代码示例等。这个内容通常可以脱离主文流动而存在，且常常配有标题或说明。

它本身不改变样式，但为内容提供了明确的语义结构，便于搜索引擎和屏幕阅读器理解。

常见用法包括：

单张图片及其说明
一组相关图片
图表或数据可视化
代码片段及描述

figcaption：为figure添加标题

figcaption 必须嵌套在 figure 内部，用于为其中的内容提供标题或说明文字。它可以放在 figure 的开头或结尾，分别表示标题在前或图注在后。

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

示例：单个图片配说明

<figure><br>  <img src="chart.png" alt="销售趋势图"><br>  <figcaption>2024年各季度销售额增长趋势</figcaption><br></figure>

登录后复制

在这个例子中，图片是主体内容，figcaption 提供了上下文解释，辅助用户理解图像含义。

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

查看详情

多个图片使用一个说明

当需要展示多张相关图片时，也可以将它们放入同一个 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和无障碍支持都有好处。不复杂但容易忽略。

以上就是HTML怎么使用figure标签_HTMLfigure和figcaption标签的图文组合应用的详细内容，更多请关注php中文网其它相关文章！