HTML图片如何添加文字说明 HTML图片添加文字说明方法

在网页开发过程中，为图片添加对应的文字说明可以让用户更清晰地理解图片内容，同时也能提升页面的无障碍访问体验。常见的HTML图片文字说明实现方式有多种，不同方式的适用场景和语义化表现存在差异。

方法一：使用img标签的alt属性

alt属性是img标签的原生属性，主要用于在图片无法加载时显示替代文本，同时也可以作为图片的简要文字说明，被屏幕阅读器读取，提升无障碍访问性。

这种方式适合对图片做简短的说明，不需要在页面可视区域展示文字，仅作为辅助信息存在。

<!-- 基础alt属性用法 -->
<img src="product.jpg" alt="2023年新款无线蓝牙耳机产品展示图">

alt属性使用注意事项

• alt属性内容要简洁准确，直接描述图片的核心内容
• 如果图片是纯装饰性的，没有实际信息价值，可以设置alt为空字符串，避免屏幕阅读器读取无意义内容
• alt属性不能替代页面中需要展示的可视文字说明

方法二：使用figure和figcaption组合标签

figure和figcaption是HTML5引入的语义化标签，专门用于包裹带有说明的内容，其中figure作为内容的容器，figcaption作为对应的说明文字，是官方推荐的图片文字说明实现方式。

这种方式会在页面可视区域展示文字说明，语义化更强，适合需要明确展示图片标题或详细描述的场景。

<!-- figure和figcaption组合用法 -->
<figure>
  <img src="scenery.jpg" alt="山间溪流自然景观">
  <figcaption>图1：云南香格里拉山间溪流实拍景观</figcaption>
</figure>

语义化优势

使用figure和figcaption组合可以让浏览器和搜索引擎明确识别图片和说明文字的关联关系，对于文档结构的理解更友好，同时也方便后续通过CSS统一设置说明文字的样式。

方法三：结合CSS实现自定义样式文字说明

如果需要对文字说明的样式做更多自定义调整，比如调整位置、颜色、背景等，可以结合CSS实现更灵活的效果，通常配合容器标签和定位属性完成。

<!-- 容器包裹图片和说明文字 -->
<div class="img-wrap">
  <img src="team.jpg" alt="研发团队合影">
  <div class="img-desc">2024年研发中心全体成员合影</div>
</div>

/* 自定义文字说明样式 */
.img-wrap {
  position: relative;
  width: 600px;
}
.img-wrap img {
  width: 100%;
  display: block;
}
.img-desc {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 10px;
  text-align: center;
  font-size: 14px;
}

不同方法的选择建议

在实际开发中，可以根据需求组合使用多种方式，比如同时设置alt属性和figcaption标签，既保证无障碍访问，又能在页面展示清晰的文字说明，让不同用户都能获得良好的浏览体验。

HTML图片文字说明figure标签figcaption标签alt属性修改时间：2026-06-22 01:06:19