img 标签 title 和 alt 的区别

了解 img 标签中 title 和 alt 属性的不同用途

问题

img 标签的 title 和 alt 属性有什么区别？

解答

alt 属性

alt 是图片的替代文本，在图片无法显示时展示。

<!-- 图片加载失败时，显示 alt 文本 -->
<img src="cat.jpg" alt="一只橘色的猫" />

<!-- 装饰性图片，alt 留空 -->
<img src="decoration.png" alt="" />

主要用途：

图片加载失败时显示替代文字
屏幕阅读器会朗读 alt 内容，帮助视障用户理解图片
搜索引擎通过 alt 理解图片内容，有助于 SEO

title 属性

title 是图片的提示信息，鼠标悬停时显示。

<!-- 鼠标悬停时显示 title 内容 -->
<img src="cat.jpg" alt="一只橘色的猫" title="这是我家的猫咪小橘" />

主要用途：

提供额外的说明信息
鼠标悬停时以 tooltip 形式展示

完整示例

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>img alt 和 title 示例</title>
</head>
<body>
  <!-- 正常图片 -->
  <img 
    src="https://via.placeholder.com/200" 
    alt="示例图片" 
    title="鼠标悬停看到这段文字"
  />

  <!-- 图片路径错误，会显示 alt 文本 -->
  <img 
    src="not-exist.jpg" 
    alt="图片加载失败时显示这段文字" 
    title="这段文字不会显示"
  />
</body>
</html>

关键点

alt 是必要属性，图片无法显示时作为替代文本
title 是可选属性，鼠标悬停时显示提示信息
alt 对无障碍访问和 SEO 很重要，屏幕阅读器会读取
title 不仅限于 img，几乎所有 HTML 元素都可以使用
装饰性图片应设置 alt=""，避免干扰屏幕阅读器