? ?html中的title屬性和alt屬性讓人有些混淆。

?????? 以前不知道有title這個屬性，第一次用到它時，就和alt產生了混淆。

一位朋友告訴我說，alt是圖片img標簽里用的，title是超鏈接里用的， 當時想可能是這樣的吧，

后來知道這是很不嚴謹的，alt是圖片img標簽里用的沒錯，可是你在img標簽里使用title屬性，結果一樣可以出現效果。

?????? 在記事本中分別寫三條語句，保存成html進行測試：

?????? <img src="D:\Documents\我的文檔\圖片收藏\2-02.gif" alt="這是我校的logo"?? />

?????? <img src="D:\Documents\我的文檔\圖片收藏\2-02.gif" alt="這是我校的logo" title="大家好" />

?????? <img src="#" alt="這是我校的logo" title="大家好" />

?????? 結果：

?????? 第一條語句在ie中輸出圖像，鼠標放到圖像上，會出現“這是我校的logo”，即圖像正常顯示時，沒有title的情況下，顯示alt內容。

?????? 第二條語句在ie中輸出圖像，鼠標放到圖像上，只出現“大家好”，即有alt和title，只會顯示title。

?????? 第三條語句在ie中輸出圖像，ie找不到圖像，但是“這是我校的logo”幾個字出現在了圖像位置。同時，鼠標放到圖像位置區，會出現title內容“大家好”的提示。

?????? 為了表述得更明白，我從網上找到了一些有用的資料，摘其精要：

?????? alt屬性的功能是不能顯示圖像信息時候的替換文字(即在圖片顯示的位置上顯示文字，說明這個圖片的要顯示的內容)。Alt屬性值的長度必須少于100個英文字符。

?????? title屬性可以用在除了base，basefont，head，html，meta，param，script和title之外的所有標簽。

?????? title屬性的功能是提示。額外的說明信息和非本質的信息請使用title屬性。title屬性值可以比alt屬性值設置的更長。

?????? title屬性有一個很好的用途，即為鏈接添加描述性文字，特別是當連接本身并不是十分清楚的表達了鏈接的目的。

這樣就使得訪問者知道那些鏈接將會帶他們 到什么地方，他們就不會加載一個可能完全不感興趣的頁面。

另外一個潛在的應用就是為圖像提供額外的說明信息，比如日期或者其他非本質的信息。

本文鏈接地址:http://www.cnblogs.com/yoyo24456/archive/2014/07/04/3823728.html

?

首先明確一下概念，alt是html標簽的屬性，而title既是html標簽，又是html屬性。
title標簽這個不用多說，網頁的標題就是寫在<title></title>這對標簽之內的。
title作為屬性時，用來為元素提供額外說明信息。例如，給超鏈接標簽a添加了title屬性，把鼠標移動到該鏈接上面是，就會顯示title的內容，以達到補充說明或者提示的效果。
而alt屬性則是用來指定替換文字，只能用在img、area和input元素中（包括applet元素），用于網頁中圖片無法正常顯示時給用戶提供文字說明使其了解圖像信息。注意，alt是替代圖像作用而不是提供額外說明文字的。根據一些SEO人士的說法，使用alt屬性還具有搜索引擎優化效果，因為搜素引擎是無法直接讀取圖像的信息的，alt可以為其提供文字信息所以對搜索引擎比較友好。
通常人們容易搞錯的是title和alt這兩個屬性同時用于img標簽的時候。在舊版本的IE瀏覽器中，鼠標經過圖像時顯示的提示文字是alt的內容，而忽略了title屬性，這個曾經誤導了很多人。因此，如果想在IE中顯示title的內容，要么title屬性和alt一致，要么alt內容為空（“”，空格也不能有）。不過，在新版的IE（IE8及以上）中，已不會出現這種情況了。
另外，當a標簽內嵌套img標簽時，起作用的是img的title屬性。

本面試題為前端常考面試題，后續有機會繼續完善。我是歌謠，一個沉迷于故事的講述者。

歡迎一起私信交流。

“睡服“面試官系列之各系列目錄匯總（建議學習收藏）?

總結

以上是生活随笔為你收集整理的“约见”面试官系列之常见面试题之第五十篇之title和alt的区别（建议收藏）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。