返回首頁
當前位置: 主頁 > 網絡編程 > Asp實例教程 >

alt和title屬性的區別及應用

時間:2018-12-28 13:30來源:知行網www.aotfjk.live 編輯:麥田守望者

很多朋友對alt屬性和title屬性的概念和應用不是十分了解,常常會出現亂用的情況,下面就此寫了篇文章,描述下兩者的區別,希望對大家能有所幫助。

alt屬性的語義

Alt屬性(注意是“屬性”而不是“標簽”,很多朋友習慣說是“標簽”,這是不正確的一種說法)包括替換說明,對于圖像和圖像熱點是必須的。它只能用在img、area和input元素中(包括applet元素)。對于input元素,alt屬性意在用來替換提交按鈕的圖片。比如:<input type=”image” src=”image.gif” mce_src=”image.gif” alt=”Submit” />.

使用alt屬性是為了給那些不能看到你文檔中圖像的瀏覽者提供文字說明的。這包括那些使用本來就不支持圖像顯示或者圖像顯示被關閉的瀏覽器的用戶,視覺障礙的用戶和使用屏幕閱讀器的用戶等。

在寫替換文字前仔細想想,保證那些文字確實為那些看不到圖像的人提供了說明信息,并且在上下文中有意義。對于那些裝飾性的圖片可以使用空的值(alt=””,引號中間沒有空格),而不是使用不相關的替換文字比如“blue bullet”或者“spacer.gif”。不要忽略它,如果你忽略了,那么一些屏幕閱讀器會直接閱讀圖像文件的文件名,那些文字瀏覽器,比如Lynx會顯示圖像文件的文件名,而那對于你的瀏覽者就沒什么用了。

Alt屬性值得長度必須少于100個英文字符或者用戶必須保證替換文字盡可能的短。我們可把它理解為“盡可能短,盡需要長”。

如果你想使用額外的說明信息或者非本質的信息請使用title屬性。

title屬性的語義

title屬性為設置該屬性的元素提供建議性的信息。

title屬性可以用在除了base,basefont,head,html,meta,param,script和title之外的所有標簽。但是并不是必須的。可能這正是為什么很多人不明白何時使用它。

使用title屬性提供非本質的額外信息。大部分的可視化瀏覽器在鼠標懸浮在特定元素上時顯示title文字為提示信息,然而這又由制造商來決定如何渲染title文字。一些瀏覽器會將title文字顯示在狀態欄里。比如早期版本的Safari瀏覽器。

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

title屬性值可以比alt屬性值設置的更長。不過要注意的是,有些瀏覽器會截斷過長的文字(比如工具提示或其他)。比如Mozilla核心的瀏覽器只能顯示最先的60個字符。這被認為是一個Mozilla bug,這是你要注意的。

alt屬性和title屬性的應用范圍

我的建議是保證替換文字(alt text)精要。在大多數的應用里,都應該被留白,alt=””(注意兩引號中沒有空格)。 想想那些圖像,為那些瀏覽者提供了什么樣的信息,你應該用什么文字去描述它,或者你該為看不到圖像的人提供什么信息? 將替換文字寫成“這是一張照片:可愛的小狗在奔跑”對于看不到圖像的人真的有幫助?如果你覺得是,那么你就寫吧。在很多情況下,我覺得讓替換文字留白比較好。

對于title屬性,比較難于給出嚴格的使用說明。我大部分用在那些不能自我釋意的鏈接上,比如同一頁面上的相同的鏈接文字,不同的鏈接頁面。有時候也為一些按鈕或者表單元素提供更多的說明文字。

------分隔線----------------------------
標簽(Tag):alt和title屬性
------分隔線----------------------------
推薦內容
猜你感興趣
湖南刘雪龙黑彩