在頁面佈局時,必然會用到圖片,說到圖片,大家對於img標籤的alt屬性和title屬性應該不陌生,那你知道兩者在什麼情況下使用嗎?這篇文章就跟大家講講img標籤中alt屬性和title屬性的差別。有興趣的朋友繼續往下看吧。
alt屬性和title屬性的相同點和區別
相同之處:它們都會出現一個小浮層,顯示圖片相關的內容
不同之處如下所顯示
alt屬性的特點:
① 倘若圖片載入不成功未能顯示出來,就會在圖片未顯示的地方出現一段文字。這一作用是為了給未加載出來的圖片提供信息,方便用戶瀏覽網頁,同時也方便開發人員維護網頁。
②搜尋引擎可以透過這個屬性的文字描述來取得圖片
title屬性的特點:
title屬性可以用在任何元素上,當使用者把滑鼠移到當元素上時,就會出現title的內容,起到對圖片說明的作用,其實質就是對圖片的一種備註或者註釋
通俗來講,alt屬性的實質是透過文字來代替圖片的內容,而title屬性的實質是對圖片的描述或註解。
實例示範
alt屬性效果如下:
<img src="img/frui.jpg" alt="图片未显示出来时,提醒你这是一张图片"/>
效果圖:
當圖片沒有正常顯示出來時,結果如圖所示,出現的只是alt裡面設定的內容。
title屬性效果如下:
<img src="img/fruit.jpg" title="介绍这张图片是创意水果图片"/ alt="圖文詳解<img>標籤中alt屬性和title屬性的區別" >
效果圖:
#如圖所示,這個圖片正常顯示,當滑鼠經過圖片時,出現title裡面的內容,描述圖片。
總結:無論圖片是否正常顯示,圖片僅設定title屬性,當滑鼠懸停圖片時,可以看到圖片的文字描述。當圖片僅設定alt屬性時,用滑鼠懸停圖片之上,可以看到該圖片alt屬性的替代文字。如果圖片同時設定了title屬性和alt屬性,滑鼠懸停時僅顯示圖片的title屬性。以上主要介紹了img標籤中alt屬性和title屬性的差別,比較簡單,希望可以理解。
以上是圖文詳解標籤中alt屬性和title屬性的區別的詳細內容。更多資訊請關注PHP中文網其他相關文章!