跳转到主内容
趣航编程网 - 趣学编程，启航技术之路！
📁 网站地图

HTML5布局中figure和figcaption怎么用_图文组合内容的语义化布局【教程】

顺亿
顺亿
• 👁 0人浏览过
figure 和 figcaption 用于标识独立可引用的内容单元，非美化用途；必须满足图/媒体可脱离上下文存在且说明文字属其自身，如图表、代码截图、带来源说明的历史插图等。 figure 和
figcaption
不是用来“美化排版”的，而是告诉 浏览器 和辅助技术：“这部分图和文字是一个独立的、可被引用的内容单元”。用错地方反而会破坏语义，比如把纯装饰图、轮播图、文章配图（无说明性标题）塞进去。 什么时候必须用
figure
+
figcaption
核心判断标准：这张图/媒体是否能脱离上下文独立存在？它的说明文字是否属于它自身的一部分，而非正文叙述？ 图表（
或
生成的统计图）、流程图、示意图 代码截图 + 对应的说明性标题（如“
fetch()
请求失败时的错误处理逻辑”） 引用的第三方照片、历史文献插图，并附带来源/作者说明 产品对比图 + 标题“iOS 与 Android 端主界面布局差异” 注意：
figcaption
必须是
figure
的**第一个或最后一个子元素**，否则语义失效；且一个
figure
只能有一个
figcaption
。
figcaption
放上面还是下面？有影响吗 视觉位置不影响语义，但会影响屏幕阅读器播报顺序和 SEO 解析倾向。默认行为是：屏幕阅读器先读
figcaption
，再读图/媒体内容。 立即学习 “ 前端免费学习笔记（深入） ”； Comet AI 浏览器 下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。 下载 标题型说明（如“图3-2：用户登录流程图”）建议放顶部——符合文档阅读习惯，也利于结构化数据提取 解释型说明（如“拍摄于2023年东京展会现场，设备为 iPhone 14 Pro”）更适合放底部，避免打断正文流 CSS 可自由调整位置（
flex-direction: column-reverse
或
order
），但不要用
position: absolute
把
figcaption
移出
figure
流 常见误用和替代方案 这些场景不该用
figure
： 文章内嵌的普通配图（仅起装饰或示意作用，无独立说明）→ 直接用
+
alt
属性即可 轮播图/画廊组件 → 它们是交互容器，不是独立引用单元；用
或
更合适 带标题的广告图 → 属于商业内容，用
或带
aria-label
的
多图并列但共用一个标题 →
figure
不支持“一组图+一个标题”，应改用
包裹多个
figure
，或用
搭配
/
图4.1：Q1–Q4 营收同比增长率（单位：%）

响应式图片和
figure
怎么配合
和
可以直接放在
figure
内，语义完全兼容。关键点是：
alt
必须写在
上，不能省略；
figcaption
仍描述整个内容单元，不重复
alt
已说明的信息。 避免在
figcaption
里写“一张柱状图”，而应写“2023年华东区门店销量TOP5” 如果图本身含文字（如截图里的 UI），
alt
需描述文字内容，
figcaption
描述其用途或上下文 不要为了“适配移动端”把
figure
拆成多个，响应式靠 CSS 和
控制，不是靠语义标签数量 真正容易被忽略的是：当
figure
被 CSS 设为
display: inline
或浮动后，若内部
figcaption
用了
width: 100%
，可能意外撑宽父容器——语义正确不等于样式安全，得手动约束宽度或用
max-width: max-content
。

相关文章