首頁 >web前端 >html教學 >談談HTML標籤元素中alt和title屬性的差別

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

青灯夜游
青灯夜游轉載
2020-10-12 17:53:282976瀏覽

談談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 屬性只能用在imgareainput 元素中(包含applet 元素)。對於 input 元素,alt 屬性意在用來替換提交按鈕的圖片。例如:

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

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

alt 文字的使用原則:

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

TITLE 屬性

#定義和用法:

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

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

提示:

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

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

TITLE 標籤

看時間還早,我們繼續看

<title> 標籤吧。

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

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

提示:

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

延伸閱讀: 標題裡是什麼?

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

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

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

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

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

END.

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

陳述:
本文轉載於:csdn.net。如有侵權,請聯絡admin@php.cn刪除