title 属性和 alt 属性是 HTML 中经常被混淆的两个属性，尤其是在 <img> 标签中使用时。

简单来说：alt 是给搜索引擎和屏幕阅读器看的（替代内容），而 title 是给用户鼠标悬停时看的（补充说明）。

以下是详细的区别对比：

1. 定义与用途

• alt (Alternative Text - 替代文本)

  • 定义： 当图片无法显示时，用来替代图片的文字。
  • 主要用途：
    1. 可访问性 (Accessibility)： 盲人使用屏幕阅读器时，机器会朗读 alt 的内容，帮助他们理解图片是什么。
    2. 图片加载失败： 如果网速慢或图片链接失效，网页上会显示这段文字。
    3. SEO (搜索引擎优化)： 搜索引擎（如 Google、百度）无法“看”懂图片，它们通过 alt 属性来理解图片的内容，从而进行索引。
  • 适用范围： 主要用于 <img>、<area> 和 <input type="image"> 标签。

• title (Advisory Information - 咨询信息)

  • 定义： 提供关于元素的额外补充信息。
  • 主要用途：
    1. 用户体验 (UX)： 当用户将鼠标悬停（Hover）在元素上时，浏览器会显示一个黄色的工具提示 (Tooltip) 浮层。
    2. 补充说明： 用于解释链接的目的、提供额外的上下文，或者在图片本身已经很清晰的情况下提供非必要的补充细节。
  • 适用范围： 全局属性，几乎可以用在任何 HTML 标签上（如 <div>, <a>, <img>, <span> 等）。

---

2. 核心区别对比表

---

3. 最佳实践与常见误区

什么时候用 alt？

• 所有 <img> 标签都应该有 alt 属性。
• 有意义的图片： 描述图片内容。例如：alt="一只正在奔跑的金毛犬"。
• 装饰性图片： 如果图片只是为了好看（如背景花纹、分割线），应设置为空属性 alt=""。这样屏幕阅读器会直接跳过它，不会打扰用户。

什么时候用 title？

• 谨慎使用。 因为移动端用户看不到 title，所以千万不要把关键信息放在 title 里。
• 可以用在 <a> 标签上，告诉用户点击后会发生什么（例如：“点击查看大图”）。
• 可以用在被截断的文本上（例如文本太长显示省略号，悬停显示全称）。

常见错误

• 错误 1：内容重复。
  • 不要写 <img src="dog.jpg" alt="狗" title="狗">。
  • 后果：部分屏幕阅读器会朗读两次“狗 狗”，造成糟糕的体验。
• 错误 2：用 title 代替 alt。
  • 不要只写 title 而不写 alt。如果图片挂了，用户什么都看不到；搜索引擎也无法索引该图片。

总结

• alt 是为了“替代”：没有它，内容就不完整。
• title 是为了“修饰”：锦上添花，但不是雪中送炭。