標籤的 alt 屬性

HTML <img> 標籤的 alt 屬性

實例

<img src="/i/eg_tulip.jpg"  alt="上海鮮花港 - 鬱金香" />

親自試一試

如果無法顯示圖像,瀏覽器將顯示替代文本,就像這樣:

上海鮮花港 - 鬱金香

此外,當用戶把鼠標移到圖像上方,最新的瀏覽器會在一個文本框中顯示描述性文本。下面的代碼在 alt 屬性中爲圖像添加了描述性文本:

您可以把鼠標移動到下面的照片上,看看相應的效果:

上海鮮花港 - 鬱金香

紅圈中的文本框是用戶把鼠標移動到圖像上時,IE7 瀏覽器所顯示的效果:

上海鮮花港 - 鬱金香

定義和用法

alt 屬性是一個必需的屬性,它規定在圖像無法顯示時的替代文本。

假設由於下列原因用戶無法查看圖像,alt 屬性可以爲圖像提供替代的信息:

  • 網速太慢
  • src 屬性中的錯誤
  • 瀏覽器禁用圖像
  • 用戶使用的是屏幕閱讀器

<img> 標籤的 alt 屬性指定了替代文本,用於在圖像無法顯示或者用戶禁用圖像顯示時,代替圖像顯示在瀏覽器中的內容。

我們強烈推薦您在文檔的每個圖像中都使用這個屬性。這樣即使圖像無法顯示,用戶還是可以看到關於丟失了什麼東西的一些信息。而且對於殘疾人來說,alt 屬性通常是他們瞭解圖像內容的唯一方式。

提示和註釋:

註釋:alt 屬性的值是一個最多可以包含 1024 個字符的字符串,其中包括空格和標點。這個字符串必須包含在引號中。這段 alt 文本中可以包含對特殊字符的實體引用,但它不允許包含其他類別的標記,尤其是不允許有任何樣式標籤。

註釋:當用戶把鼠標移動到 img 元素上時,Internet Explorer 會顯示出 alt 屬性的值。這種行爲並不正確。所有其他的瀏覽器正在向規範靠攏,只要當圖像無法顯示時,纔會顯示出替代文本。

提示:如果需要爲圖像創建工具提示,請使用 title 屬性。

語法

<a alt="value">

屬性值

描述
text

規定圖像的替代文本

alt 文本的使用原則:

  • 如果圖像包含信息 - 使用 alt 描述圖像
  • 如果圖像在 a 元素中 - 使用 alt 描述目標鏈接
  • 如果圖像僅供裝飾 - 使用 alt=""
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章