HTMLfigure和figcaption标签的图文格式组合规范-html教程-PHP中文网

HTMLfigure和figcaption标签的图文格式组合规范

絕刀狂花

发布： 2025-09-26 12:02:01

原创

368人浏览过

figure标签用于语义化包裹独立内容如图片、图表等，figcaption为其提供标题说明，二者结合提升可访问性与结构清晰度，推荐在图文组合中使用并确保alt属性与语义正确。

htmlfigure和figcaption标签的图文格式组合规范

在HTML中，figure 和 figcaption 标签用于语义化地组织独立的插图内容及其标题，比如图片、图表、代码片段等。它们的组合使用有助于提升页面可访问性和结构清晰度。

公文宝

AI公文写作神器，一键生成合规材料

403

figure 是一个语义容器，用来包裹文档中独立的内容块，这些内容可以被移动到文档其他位置（如侧边栏或附录）而不影响主文理解。常见用途包括：

它不局限于图像，只要是自包含且可脱离上下文理解的内容都适用。

figcaption 为 figure 中的内容提供标题或说明，是可选但推荐使用的标签。它必须作为 figure 的直接子元素，并且只能出现一次（也可省略），通常放在开头或末尾。

例如，给一张产品图添加说明：“图：新款智能手表设计细节”。

以下是一个符合规范的图文组合结构：

<figure>
  <img src="chart-sales.png" alt="2023年季度销售趋势图">
  <figcaption>图1：2023年各季度销售额变化趋势</figcaption>
</figure>

登录后复制

其中 img 提供视觉内容，alt 文本确保无障碍访问，figcaption 补充语义标题。这种写法既满足语义化要求，也利于屏幕阅读器识别。

正确使用 figure 和 figcaption 需注意以下几点：

基本上就这些。合理运用这对标签能让网页内容更清晰、更易读，尤其对辅助技术用户更友好。

以上就是HTMLfigure和figcaption标签的图文格式组合规范的详细内容，更多请关注php中文网其它相关文章！

大家都在看：