alt屬性和title屬性的相同點(diǎn)和區(qū)別

相同之處：它們都會(huì)出現(xiàn)一個(gè)小浮層，顯示圖片相關(guān)的內(nèi)容

不同之處如下所示

alt屬性的特點(diǎn)：

① 倘若圖片加載不成功未能顯示出來(lái)，就會(huì)在圖片未顯示的地方出現(xiàn)一段文字。這一作用是為了給未加載出來(lái)的圖片提供信息，方便用戶瀏覽網(wǎng)頁(yè)，同時(shí)也方便開(kāi)發(fā)人員維護(hù)網(wǎng)頁(yè)。

②搜索引擎可以通過(guò)這個(gè)屬性的文字描述獲取圖片

title屬性的特點(diǎn)：

title屬性可以用在任何元素上，當(dāng)用戶把鼠標(biāo)移動(dòng)到元素上時(shí)，就會(huì)出現(xiàn)title的內(nèi)容，起到對(duì)圖片說(shuō)明的作用，其實(shí)質(zhì)就是對(duì)圖片的一種備注或者注釋

通俗來(lái)講，alt屬性的實(shí)質(zhì)是通過(guò)文字來(lái)代替圖片的內(nèi)容，而title屬性的實(shí)質(zhì)是對(duì)圖片的描述或者注釋。

實(shí)例示范

alt屬性效果如下：

<img src="img/frui.jpg" alt="圖片未顯示出來(lái)時(shí)，提醒你這是一張圖片"/>

效果圖：

當(dāng)圖片沒(méi)有正常顯示出來(lái)時(shí)，結(jié)果如圖所示，出現(xiàn)的僅僅是alt里面設(shè)置的內(nèi)容。

title屬性效果如下：

<img src="img/fruit.jpg" title="介紹這張圖片是創(chuàng)意水果圖片"/>

效果圖：

如圖所示，這個(gè)圖片正常顯示，當(dāng)鼠標(biāo)經(jīng)過(guò)圖片時(shí)，出現(xiàn)title里面的內(nèi)容，對(duì)圖片進(jìn)行描述。

總結(jié)：無(wú)論圖片是否正常顯示，圖片僅設(shè)置title屬性，當(dāng)鼠標(biāo)懸停圖片時(shí)，可以看到圖片的文字描述。當(dāng)圖片僅設(shè)置alt屬性時(shí)，用鼠標(biāo)懸停圖片之上，可以看到該圖片alt屬性的替代文字。如果圖片同時(shí)設(shè)置了title屬性和alt屬性，鼠標(biāo)懸停時(shí)僅顯示圖片的title屬性。以上主要介紹了img標(biāo)簽中alt屬性和title屬性的區(qū)別，比較簡(jiǎn)單，希望你可以理解。

以上就是圖文詳解<img>標(biāo)簽中alt屬性和title屬性的區(qū)別的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！