关于标题/alt属性

Question

我理解title和alt属性的用途，但我不确定它们最好的使用方式，或者是否可以多次使用相同的title/alt。

举个例子，假设有一个关于狗的网站：

根据我的理解，所有的img标签都需要一个alt属性：

<img src="Husky.png" alt="Husky" />
<img src="Rottweiler.png" alt="Rottweiler" />

在同一主题下的多张图片中使用相同的alt属性是一种好的做法吗？

<img src="Husky2.png" alt="Husky" />
<img src="Husky3.png" alt="Husky" />
<img src="Husky4.png" alt="Husky" />

在每个标签中使用title/alt属性是一个好习惯吗？如果要多次使用同一属性会怎样呢？

例如：

<ol title="This Dog">
  <li title="This Dog"> Dogs </li>
  <li title="This Dog"> Dogs </li>
  <li title="This Dog"> Dogs </li>
  <li title="This Dog"> Dogs </li>
  <li title="This Dog"> Dogs </li>
</ol>

<div id="body">
  <p title="This Dog"> </p> 
  <p title="This Dog"> </p> 
  <p title="This Dog"> </p> 
  <p title="This Dog"> </p> 
</div>

我的理解是title属性作为一个提示工具出现在文本悬停时。这种事情必须在更新的浏览器中完成，但在旧版本的浏览器中alt和title也可以实现同样的效果。这些属性也用作搜索引擎识别您的网站的一种方法。

- Vex Silver

---

W3学校是这种事情的好来源。例如，这个页面描述了“alt”属性。 - David

Answer 1

我的理解是，标题标签在新的浏览器中充当工具提示/悬停信息的作用，而旧浏览器中的alt标签也起到同样的作用。不，title和alt属性具有不同的含义/目的（不是旧方法与新方法之分）。

---

标题

title属性是一个全局属性，这意味着您可以在所有元素上使用它。通常情况下（请注意，在某些元素（例如abbr元素）中，它具有特殊含义），它被定义为：

title属性表示该元素的咨询信息[…]。

您应该阅读属性的定义，它解释了如何（不）使用它。

alt

alt属性只能用于area，input（用于图像按钮）和img元素。对于img，它有这个meaning：

alt属性的值是元素的备用内容，为无法处理图像或禁用图像加载的用户和用户代理提供等效内容。

有许多规则关于如何（不）使用此属性。

---

所以，alt属性是图片的替代文本：你要么看到图片，要么阅读替代文本。alt值不应作为图片的附加信息呈现。 title属性提供了额外的信息，将提供给看到图片和阅读替代文本的用户。然而，您不应仅使用title属性来传达重要信息，因为...

- 典型的演示通常在工具提示后面“隐藏”（用户并不一定知道是否存在工具提示，因为他们不会悬停在所有元素上） - 键盘或触摸屏用户通常无法看到工具提示，因为他们无法悬停 - 屏幕阅读器通常不会读取/宣布title值（在默认设置中）

- unor

Answer 2

ALT: "Alt text" 是为那些选择禁用浏览器中的图像以及那些无法“看到”图像的用户代理提供的替代信息来源。它应描述图像的内容并吸引访客去查看它。 如果没有alt文本，图像将显示为空白图标：without alt

在 Internet Explorer 中，当您悬停在图像上时，Alt 文本也会弹出。此外，Google 正式确认主要依靠 alt 文本来了解图像的内容。

带有 alt 但不显示图像的图像。

<img src="a.png" alt="Ann Smarty">

另一张没有alt属性的图片无法显示。

<img src="a.png">

标题： 图片标题应该提供额外的信息并遵循常规标题的规则：它应该是相关、简短、引人注目和简洁的（标题“为设置了它的元素提供咨询信息”）。在FireFox和Opera中，当您悬停在图像上时，它会弹出：带有标题和显示图像的图像。

<img src="a.png" title="Optimize Images For Search Engines, Social Media">

阅读更多：http://www.searchenginejournal.com/image-alt-text-vs-image-title-whats-the-difference/

- Kabir Hossain

---

很好的答案，附有视觉解释。 - Tayab Hussain