前言

我们都知道<img>标签有着title 和 alt 属性，但是当面试官问到我们它们之间有什么区别时，我们该如何回答呢？下面本人将讲解一下自己所了解的相关知识。

alt 属性：

• 作用： 用于提供图片的等价描述，确保即使图像无法加载时，用户也能理解图像的内容。

• 用途： 对于纯装饰性图片以外的所有图片，都应该设置有意义的 alt 属性，以提高网站的可访问性和搜索引擎的分析。

示例：

  <img src="example.jpg" alt="一个大橙子放在桌子上">

title 属性：

• 作用： 提供了一个在用户将鼠标悬停在元素上时显示的文本。

• 用途： 提供关于图像的附加信息，用户将鼠标悬停在图像上时，会显示 title 属性中的文本。

• 示例：

<img src="example.jpg" alt="一个大橙子放在桌子上" title="拍摄于一个普通的果农家中"

结语

当鼠标滑动到元素上时显示的文本通常是 title 属性。这一属性是HTML中的全局属性，不仅可以用于 <img> 元素，还可以用于其他HTML元素，如链接、段落等。 title 属性提供了一个在用户将鼠标悬停在元素上时显示的文本。

在 <img> 元素中，alt 属性是一个特有的属性，主要用于提供图片的等价描述。它对于无法加载图像的用户和使用屏幕阅读器的用户非常重要。除了纯装饰性图片外，所有图片都应该设置有意义的 alt 属性，以确保图像的内容在各种情况下都能被理解。

总的来说，alt 属性主要用于提供替代文本，确保即使图像无法加载，用户也能理解图像的内容。 title 属性用于提供鼠标悬停时的额外信息，为用户提供更详细的描述或提示。