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

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

概述

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

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

（推薦教學：html教學）

ALT 屬性

最常見用在<img>標籤上，那我們先來看看<img> 標籤的alt 屬性。

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

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

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

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

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

註解與提示：

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

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

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

用法與文法：

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

<input type="image" src="image.gif" alt="Submit" />

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

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 標籤

看時間還早，我們繼續看

<title> 標籤吧。

<title> 元素可定義文件的標題。

瀏覽器會以特殊的方式來使用標題，並且通常會把它放置在瀏覽器視窗的標題列或狀態列上。同樣，當把文件加入使用者的連結清單或收藏夾或書籤清單時，標題將成為該文件連結的預設名稱。

提示：

<title> 標籤是 標籤中唯一要求包含的東西。

延伸閱讀： 標題裡是什麼？

一定要選擇一個正確的標題，這對於定義文件並確保它能夠在 Web 上有效利用來說是十分重要的。

請記住，使用者可以用任何順序、獨立地存取文件集中的每一個文件。所以，文檔的標題不僅應根據其他文檔的上下文定義，還要顯示其本身的特點。

含有文件引用排序的標題通常不是好標題。舉個例子，像「第十六章」或「第五部分」這樣的標題，對讀者理解其內容方面毫無用處。描述性更強的標題，像“第十六章：HTML 標題”，或“第五部分：如何使用標題”，這樣的標題不僅表達了它在一個大型文檔集中的位置，還說明了文檔的具體內容，吸引讀者更有興趣閱讀。

自我引用的標題也沒有什麼用處。像「首頁」這樣的標題和內容毫無關係，類似的還有「回饋頁」或「常用連結」等。你應該設計一個能夠傳達一定內容和目的的標題，讓讀者憑這個標題就可以判斷是否有必要造訪這個頁面。 “元素的 alt 和 title 有什麼區別 - Issue”，這就是一個描述性的標題。

人們常常會花很多時間去創建 Web 文檔，但常常只是因為一個不吸引人或無意義的標題，而把這些努力全都浪費掉了。當自動為使用者蒐集連結的特殊軟體在 Web 上越來越流行時，只有網頁的標題才會作為與頁面相關的描述性詞語，被插入到龐大的連結資料庫中。因此，我們怎麼強調這一點都不過分：請為自己的每個文件認真地選擇一個描述性的、實用的並與上下文獨立的標題。

END.

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