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

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

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

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

不同之處如下所顯示

alt屬性的特點：

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

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

title屬性的特點：

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

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

實例示範

alt屬性效果如下：

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

效果圖：

標籤中alt屬性和title屬性的區別" >標籤中alt屬性和title屬性的區別"/>

當圖片沒有正常顯示出來時，結果如圖所示，出現的只是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中文網其他相關文章！