首頁  >  文章  >  web前端  >  圖文詳解標籤中alt屬性和title屬性的區別

圖文詳解標籤中alt屬性和title屬性的區別

yulia
yulia原創
2018-09-21 17:18:4311762瀏覽

在頁面佈局時,必然會用到圖片,說到圖片,大家對於img標籤的alt屬性和title屬性應該不陌生,那你知道兩者在什麼情況下使用嗎?這篇文章就跟大家講講img標籤中alt屬性和title屬性的差別。有興趣的朋友繼續往下看吧。

alt屬性和title屬性的相同點和區別

相同之處:它們都會出現一個小浮層,顯示圖片相關的內容

不同之處如下所顯示

alt屬性的特點:

① 倘若圖片載入不成功未能顯示出來,就會在圖片未顯示的地方出現一段文字。這一作用是為了給未加載出來的圖片提供信息,方便用戶瀏覽網頁,同時也方便開發人員維護網頁。

②搜尋引擎可以透過這個屬性的文字描述來取得圖片

title屬性的特點:

title屬性可以用在任何元素上,當使用者把滑鼠移到當元素上時,就會出現title的內容,起到對圖片說明的作用,其實質就是對圖片的一種備註或者註釋

通俗來講,alt屬性的實質是透過文字來代替圖片的內容,而title屬性的實質是對圖片的描述或註解。

實例示範

alt屬性效果如下:

<img src="img/frui.jpg" alt="图片未显示出来时,提醒你这是一张图片"/>

效果圖:

圖文詳解<img>標籤中alt屬性和title屬性的區別

當圖片沒有正常顯示出來時,結果如圖所示,出現的只是alt裡面設定的內容。

title屬性效果如下:

<img  src="img/fruit.jpg" title="介绍这张图片是创意水果图片"/ alt="圖文詳解<img>標籤中alt屬性和title屬性的區別" >

效果圖:

圖文詳解<img>標籤中alt屬性和title屬性的區別

#如圖所示,這個圖片正常顯示,當滑鼠經過圖片時,出現title裡面的內容,描述圖片。

總結:無論圖片是否正常顯示,圖片僅設定title屬性,當滑鼠懸停圖片時,可以看到圖片的文字描述。當圖片僅設定alt屬性時,用滑鼠懸停圖片之上,可以看到該圖片alt屬性的替代文字。如果圖片同時設定了title屬性和alt屬性,滑鼠懸停時僅顯示圖片的title屬性。以上主要介紹了img標籤中alt屬性和title屬性的差別,比較簡單,希望可以理解。

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn