HTML img title 與 img alt 的差別

HTML img title 與 img alt 的差別在於"使用的目的與呈現效果"兩方面,簡單來說 img title 與 img alt 是兩個不同的東西,img title 是圖片標題,有點類似網頁標題的意思,用來標示圖片的說明文字,當滑鼠移到圖片上就會自動顯示出來,而 img alt 可就完全不同囉!img alt 是圖片的替代文字,所謂替代文字的意思就是在圖片失效的時候所要呈現的文字,如果圖片可以正常顯示,則 img alt 就不會有任何的功能。

HTML img title 與 img alt 的語法
<img src="圖片網址" alt="圖片替代文字" title="圖片標題">
無論是 img title 還是 alt 都直接寫在 img 圖片標籤(img tag)內即可,每一張圖片只能使用一次,兩個功能都是選用項目,不一定要寫。如果你想進一步認識 img title 與 img alt 的差別與詳細用法,可以參考以下兩篇的內容。
HTML img title 與 img alt 的範例
<img src="#" alt="圖片失效就顯示這段文字" style="border:1px black solid;">
<img src="圖片網址" title="滑鼠移上來就看得到文字" style="border:1px black solid;">
範例呈現的效果
圖片失效就顯示這段文字
範例總共準備了兩個 img 圖片標籤,第一張圖片的網址故意用 # 來表示,這樣就不會有圖片可以顯示,在範例呈現的效果可以看到出現了一行文字「圖片失效就顯示這段文字」,此即為 img alt 的替代文字效果,第二張圖片則使用 title 的效果,當滑鼠移到圖片上就可以看到圖片標題文字自動跑出來,除非瀏覽器有特別限制,否則通常都可以正常顯示。以上就是 HTML img title 與 img alt 的差別。

為了讓範例的圖片顯示得稍微清楚一點,所以我們利用 CSS 的 style 替圖片增加了黑色的外邊框,語法是「style="border:1px black solid;"」這一段,如果你對圖片外邊框的設計有興趣,可以參考《img border 圖片邊框》與《CSS border 邊框》這兩篇的內容。

更多網頁圖片設計
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012 Englsih version
PHP Smarty MySQL JQuery Apache W3C