title與alt的區別
html中的title屬性和alt屬性讓人有些混淆。
以前不知道有title這個屬性,第一次用到它時,就和alt產生了混淆。
一位朋友告訴我說,alt是圖片img標簽里用的,title是超鏈接里用的, 當時想可能是這樣的吧,
后來知道這是很不嚴謹的,alt是圖片img標簽里用的沒錯,可是你在img標簽里使用title屬性,結果一樣可以出現效果。
在記事本中分別寫三條語句,保存成html進行測試:
<img src="D:\Documents\我的文檔\圖片收藏\2-02.gif" alt="這是我校的logo" />
<img src="D:\Documents\我的文檔\圖片收藏\2-02.gif" alt="這是我校的logo" title="大家好" />
<img src="#" alt="這是我校的logo" title="大家好" />
結果:
第一條語句在ie中輸出圖像,鼠標放到圖像上,會出現“這是我校的logo”,即圖像正常顯示時,沒有title的情況下,顯示alt內容。
第二條語句在ie中輸出圖像,鼠標放到圖像上,只出現“大家好”,即有alt和title,只會顯示title。
第三條語句在ie中輸出圖像,ie找不到圖像,但是“這是我校的logo”幾個字出現在了圖像位置。同時,鼠標放到圖像位置區,會出現title內容“大家好”的提示。
為了表述得更明白,我從網上找到了一些有用的資料,摘其精要:
alt屬性的功能是不能顯示圖像信息時候的替換文字(即在圖片顯示的位置上顯示文字,說明這個圖片的要顯示的內容)。Alt屬性值的長度必須少於100個英文字符。
title屬性可以用在除了base,basefont,head,html,meta,param,script和title之外的所有標簽。
title屬性的功能是提示。額外的說明信息和非本質的信息請使用title屬性。title屬性值可以比alt屬性值設置的更長。
title屬性有一個很好的用途,即為鏈接添加描述性文字,特別是當連接本身並不是十分清楚的表達了鏈接的目的。
這樣就使得訪問者知道那些鏈接將會帶他們 到什么地方,他們就不會加載一個可能完全不感興趣的頁面。
另外一個潛在的應用就是為圖像提供額外的說明信息,比如日期或者其他非本質的信息。