圖片Alt和Title屬性有什么不同

申請(qǐng)免費(fèi)試用、咨詢電話：400-8352-114

    網(wǎng)站上的圖片有兩種屬性，一種是alt屬性，另一種是title屬性，這兩種屬性有什么不同呢？景德鎮(zhèn)網(wǎng)站建設(shè)顧問(wèn)來(lái)告訴您。

    在ie6下面，我們會(huì)看到圖片沒(méi)有title屬性，只有alt屬性，設(shè)置了之后，鼠標(biāo)放到圖片上，還是會(huì)有顯示的。如果沒(méi)有alt屬性，而有title屬性，在ie6下面也可以看到提示信息。而在火狐瀏覽器下面，就不是這樣的效果了，alt屬性是不顯示的。為什么會(huì)這樣呢？因?yàn)镮E不符合網(wǎng)頁(yè)標(biāo)準(zhǔn)。

    在標(biāo)準(zhǔn)瀏覽器下圖片設(shè)置了title屬性不管圖片是否存在，鼠標(biāo)經(jīng)過(guò)都會(huì)有提示。若圖片不存在時(shí)候，只設(shè)置了alt屬性，那么圖片上會(huì)顯示alt屬性里的描述內(nèi)容，并且鼠標(biāo)放上去沒(méi)有提示信息（非ie6以下瀏覽器）。

更清楚的看alt屬性和title的不同：
//*這些圖片不顯示
<img src="http://www.hqzl.net/../images/web-design.jpg" width="70" height="60"alt="網(wǎng)站建設(shè)">
<img src="http://www.hqzl.net/../images/web-design.jpg" width="70" height="60" title="網(wǎng)站建設(shè)" />
//*這些圖片顯示
<img src="http://www.hqzl.net/../images/web-design.jpg" title="網(wǎng)站建設(shè)" />
<img src="http://www.hqzl.net/../images/web-design.jpg" alt="網(wǎng)站建設(shè)" />

在IE瀏覽器中都會(huì)出現(xiàn)文字提示。

    而在火狐瀏覽器中，前三句代碼，鼠標(biāo)經(jīng)過(guò)圖片時(shí)，都會(huì)出現(xiàn)文字提示，最后一句代碼，鼠標(biāo)經(jīng)過(guò)圖片不會(huì)顯示文字提示。通過(guò)這些可以知道在顯示時(shí)候alt屬性和title的不同地方。

    圖片alt屬性用于指定圖片的替換文字，title屬性用于設(shè)置當(dāng)前對(duì)象提供建議性的信息。優(yōu)化網(wǎng)站圖片的時(shí)候，適合將alt屬性設(shè)置為圖片本來(lái)的含義，而將title設(shè)置成指示性信息，示例如下: 其作用是：alt屬性，當(dāng)圖片不能正常顯示時(shí)，則顯示alt中的文字，表達(dá)要傳遞的信息，將title屬性設(shè)置為“返回網(wǎng)站主頁(yè)”，作用是當(dāng)用戶將鼠標(biāo)指向圖片時(shí)，提示給用戶的信息。

    title屬性有一個(gè)很好的用途，即為鏈接添加描述性文字，特別是當(dāng)鏈接本身并不是十分清楚的表達(dá)了鏈接的目的。這樣就使得訪問(wèn)者知道那些鏈接將會(huì)帶他們到什么地方，他們就不會(huì)加載一個(gè)可能完全不感興趣的頁(yè)面。另外一個(gè)潛在的應(yīng)用就是為圖像提供額外的說(shuō)明信息，比如日期或者其他非本質(zhì)的信息。title屬性值可以比alt屬性值設(shè)置的更長(zhǎng)。