談談HTML標籤元素中alt和title屬性的差別

這篇文章跟大家介紹HTML標籤元素中alt和title屬性的差別。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

概述

這題大概還可以加個限定詞，我們暫且把 <title></title> 標籤排除在本次討論之外。

元素的 alt 和 title 屬性 有什麼不同？

（推薦教學：html教學）

ALT 屬性

最常見用在<img src="/static/imghwm/default1.png" data-src="image.gif" class="lazy" alt="談談HTML標籤元素中alt和title屬性的差別" >標籤上，那我們先來看看<img src="/static/imghwm/default1.png" data-src="image.gif" class="lazy" alt="談談HTML標籤元素中alt和title屬性的差別" > 標籤的alt 屬性。

alt 屬性是一個必要的屬性，它規定在圖像無法顯示時的替代文字。

假設由於下列原因使用者無法查看圖像，alt 屬性可以提供圖像替代的資訊：

• 網速太慢
• #src 屬性中的錯誤
• 瀏覽器停用圖片
• 使用者使用的是螢幕閱讀器

<img src="/static/imghwm/default1.png" data-src="image.gif" class="lazy" alt="談談HTML標籤元素中alt和title屬性的差別" > 標籤的alt 屬性指定了替代文本，用於在圖像無法顯示或使用者停用圖像顯示時，取代圖像顯示在瀏覽器中的內容。

強烈建議您在文件的每個圖像中都使用這​​個屬性。這樣即使圖像無法顯示，使用者還是可以看到一些關於丟失了什麼東西的資訊。而且對於殘疾人來說，alt 屬性通常是他們了解圖像內容的唯一方式。

註解與提示：

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

註解：當使用者把滑鼠移到 img 元素上時，Internet Explorer 會顯示出 alt 屬性的值。這種行為並不正確。所有其他的瀏覽器正在向規範靠攏，只要當圖像無法顯示時，才會顯示出替代文字。

提示：如果需要為映像建立工具提示，請使用 title 屬性。

用法與文法：

用法：alt 屬性只能用在img、area 和input 元素中（包含applet 元素）。對於 input 元素，alt 屬性意在用來替換提交按鈕的圖片。例如：

<input>

語法：
規定圖像的替代文字

alt 文字的使用原則：

• 如果圖像包含訊息- 使用alt 描述圖像
• 如果圖像在a 元素中- 使用alt 描述目標連結
• 如果圖像僅供裝飾- 使用alt=""

TITLE 屬性

#定義和用法：

##title 屬性規定關於元素的額外資訊。

這些資訊通常會在滑鼠移到元素上時顯示一段工具提示文字（tooltip text）。

提示：

title 屬性常與 form 以及 a 元素一同使用，以提供輸入格式和連結目標的資訊。同時它也是 abbr 和 acronym 元素的必要屬性。當然title 屬性是比較廣泛使用的，可以用在除了base，basefont，head，html ，meta，param，script 和title 以外的所有標籤。但是並不是必須的。

title 屬性有一個很好的用途，即為連結添加描述性文字，特別是當連接本身並不是十分清楚的表達了連結的目的。這樣就使得訪客知道那些連結將會帶他們到什麼地方，他們就不會載入一個可能完全不感興趣的頁面。另外一個潛在的應用是為圖像提供額外的說明訊息，例如日期或其他非本質的資訊。

TITLE 標籤

看時間還早，我們繼續看

以上是談談HTML標籤元素中alt和title屬性的差別的詳細內容。更多資訊請關注PHP中文網其他相關文章！