如何在 HTML 中利用和标签组合展示图片及说明-java教程-PHP中文网

推荐使用+组合展示图片及说明，因其语义化强、可访问性高、结构清晰；表示自包含内容，为其唯一标题或说明，须嵌套其中且不可省略alt属性。

如何在 html 中利用 <figure> 和 <figcaption> 标签组合展示图片及说明

在 HTML 中，用

和组合展示图片及说明，是语义化、可访问性高且结构清晰的标准做法。它比单纯用

 包裹  + 文字更规范，浏览器和屏幕阅读器能自动识别这是“一个独立的图表内容及其标题”。为什么推荐用  + 

这两个标签专为图文关联内容设计：
 表示一段自包含的流内容（如图片、图表、代码块等）， 是它的标题或说明，必须作为  的第一个或最后一个子元素出现。这种结构对 SEO 友好，也便于未来添加 CSS 样式或 JavaScript 交互。
基础写法与必需结构
正确写法如下，注意顺序和嵌套关系：


  

  图1：午后暖光中的日常



 必须在  内部，且只能出现一次
  
alt 属性不能省略——它是图片内容的核心文字描述， 是补充性说明，两者作用不同
  不支持自闭合写法， 和  都必须有明确的开始与结束标签

多图并排时的实用处理
若要横向排列多个 
，直接让它们并排即可，无需额外包裹容器（除非需要整体控制）：

											
												
												
													HTML Text Extract
													从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。
												
												下载
												
											
										


  

  远山如黛



  

  清泉石上


用 display: inline-block 或现代布局（如 display: flex）控制并排效果
  建议统一设置 max-width 和 height: auto 防止图片撑破容器
  
 默认是块级元素，会自然换行到图片下方，无需额外定位

常见误区提醒
避免以下写法：

把  放在  外面——结构失效，语义丢失
  用  包裹纯装饰性图片（如背景分割线）——它只适用于有意义的独立内容
  省略 alt，只靠  交代信息——屏幕阅读器可能跳过 ，且 alt 是图片加载失败时唯一可见文本
  误写成 
…—— 不再属于该 ，失去关联性