alt屬性和title屬性差別---終於分清楚了！

　　

　　凡是接觸過前端的開發者，相信都會接觸到<img>標籤，天然alt title更是不會陌生，但對他們真正的含義和使用方法，你肯定了解嗎？　　

參考:

　　http://www.junchenwu.com/2005/05/alttitle.html

　　當瀏覽器賣主扭曲了標準而且自顧自的不按規則去作一些事，他們可能會形成一些問題，或者至少產生了混淆。例子之一就是一些瀏覽器處理alt屬性（通常會被錯誤的稱做alt標籤）的方式，好比擁有大量用戶的Windows的IE瀏覽器。

　　替換文字（alt text）並非用來作提示（tool tip），或者更加確切的說，它並非爲圖片提供額外說明信息的。相反地，title屬性才應該用來爲元素提供額外說明信息。這些信息在大部分圖像瀏覽器裏顯示爲提示（tool tip），雖然製造商能夠任意採起其餘方式渲染title屬性的文字。

1.alt屬性

　　描述：

爲不能顯示圖像、窗體或applets的用戶代理（UA），alt屬性用來指定替換文字。替換文字的語言由lang屬性指定。

　　Alt屬性（注意是「屬性」而不是「標籤」）包括替換說明，對於圖像和圖像熱點是必須的。它只能用在img、area和input元素中（包括applet元素）。對於input元素，alt屬性意在用來替換提交按鈕的圖片。好比：<input type="image" src="image.gif" alt="Submit" />.

　　使用alt屬性是爲了給那些不能看到你文檔中圖像的瀏覽者提供文字說明。這包括那些使用原本就不支持圖像顯示或者圖像顯示被關閉的瀏覽器的用戶，視覺障礙的用戶和使用屏幕閱讀器的用戶。替換文字是用來替代圖像而不是提供額外說明文字的。

　　明白了上面的用法以後，咱們來看看使用中須要注意些什麼：

 

　　在寫替換文字前仔細想一想，保證那些文字確實爲那些看不到圖像的人提供了說明信息，而且在上下文中有意義。對於那些裝飾性的圖片可使用空的值（alt=""，引號中間沒有空格），而不是使用不相關的替換文字好比「blue bullet」或者「spacer.gif」。不要忽略它，若是你忽略了，那麼一些屏幕閱讀器會直接閱讀圖像文件的文件名，那些文字瀏覽器，好比Lynx會顯示圖像文件的文件名，而那對於你的瀏覽者就沒什麼用了。

　　包含文字的圖像圖片設置替換文字是最簡單的，圖像中包含的文字通常來講就能夠做爲alt屬性值。

　　至於替換文字的長度，看看WCAG 2.0（網站內容可用性指南2.0）是怎麼說的：Alt屬性值得長度必須少於100個英文字符或者用戶必須保證替換文字儘量的短。

　　我把它理解爲「儘量短，盡須要長」。

　　即便你想讓它顯示爲提示（tool tip），也不要給文字元素使用alt屬性，這並非它的用法。至今據我所知，那樣作僅能在Windows的IE瀏覽器和古老的Netscape 4.*（windows版本）有效。沒有一個Mac的瀏覽器會將它顯示爲提示（tool tip）。

　　當瀏覽器把替換文字顯示爲提示（tool tip）後，那些錯誤使用alt屬性的行爲也受到了鼓勵。一些人開始寫無心思的替換文字，由於他們趨向於認爲它是一個額外的說明信息，而不是不能顯示圖像的替換。其餘人可能不想讓提示（tool tip）出現，而後就徹底忽略了寫alt屬性值。這些錯誤的作法，都給那些不能看到圖像的瀏覽者形成了困難。

　　額外的說明信息和非本質的信息請使用title屬性。

2.title屬性

title屬性爲設置該屬性的元素提供建議性的信息。

　　title屬性能夠用在除了base，basefont，head，html，meta，param，script和title以外的全部標籤。可是並非必須的。可能這正是爲何不少人不明白什麼時候使用它。

　　使用title屬性提供非本質的額外信息。大部分的可視化瀏覽器在鼠標懸浮在特定元素上時顯示title文字爲提示信息（tool tip），然而這又由製造商來決定如何渲染title文字。一些瀏覽器會將title文字顯示在狀態欄裏。好比早期版本的Safari瀏覽器。

　　title屬性有一個很好的用途，即爲連接添加描述性文字，特別是當鏈接自己並非十分清楚的表達了連接的目的。這樣就使得訪問者知道那些連接將會帶他們到什麼地方，他們就不會加載一個可能徹底不感興趣的頁面。另一個潛在的應用就是爲圖像提供額外的說明信息，好比日期或者其餘非本質的信息。

　　title屬性值能夠比alt屬性值設置的更長。不過要注意的是，有些瀏覽器會截斷過長的文字（好比工具提示或其餘）。好比Mozilla核心的瀏覽器只能顯示最早的60個字符。這被認爲是一個Mozilla bug，這是你要注意的。

3.使用前先考慮

　　個人建議是保證替換文字（alt text）精要。在大多數的應用裏，都應該被留白，alt=""（注意兩引號中沒有空格）。 想一想那些圖像，爲那些瀏覽者提供了什麼樣的信息，你應該用什麼文字去描述它，或者你該爲看不到圖像的人提供什麼信息？ 將替換文字寫成「照片：站在大樓外的CEO，穿着灰色西裝和黑色領帶，望着天」對於看不到圖像的人真的有幫助？若是你以爲是，那麼你就寫吧。在不少狀況下，我以爲讓替換文字留白比較好。

　　對於title屬性，比較難於給出嚴格的使用說明。我大部分用在那些不能自我釋意的連接上，好比同一頁面上的相同的連接文字，不一樣的連接頁面。有時候也爲一些按鈕或者表單元素提供更多的說明文字。

4.更長的描述

　　當一個圖片須要更加長的描述，而超過alt屬性的限制，那麼還有一些選擇。

　　longdesc屬性能夠用來提供連接到一個包含圖片文字描述的單獨頁面。這就意味着把瀏覽者連接到另外的頁面，這可能會形成理解上的困難。另外瀏覽器對於longdesc屬性的支持也是不一致的，而且不是很是好。

　　longdesc屬性能夠包含一個連接到當前文檔的其餘部分（錨點）來取代連接到另外的頁面。在Accessibility footnotes, Andy Clarke很好的解釋說明了如何應用。

　　描述連接（D links）能夠用來補充longdesc。一個描述連接就是一個常規的連接，鏈接到含有替換文字的頁面。該連接被置於圖像的旁邊，而且在全部瀏覽器中都是但是的。對於它的有效性人們有不少不一樣意見，個人我的意見不大喜歡這個注意。WCAG也是，在他們的工做草案HTML Techniques for WCAG 2.0中，描述連接是被「不同意」的。

　　若是對圖片的長的描述對於任何瀏覽者都有用，那麼你得考慮讓它簡單的顯示在同一個文檔裏面，而不是連接到其餘頁面裏或者藏起來。這樣每一個人均可以閱讀到。這是一種簡單低技術含量的方法。

------------------------------------------------

　　博主經營一家髮飾淘寶店，都是純手工製做哦，開業衝鑽，只爲信譽！須要的親們能夠光顧一下！謝謝你們的支持！
店名：
　　小魚尼莫手工飾品店
經營:
　　髮飾、頭花、髮夾、耳環等（手工製做）
網店：
　　http://shop117066935.taobao.com/

  ---------------------------------------------------------------------

繼續正題... 

 

參考:　　

　　http://www.jb51.net/article/13362.htm

　　在的img標籤有兩個屬性分別爲alt和title，對於不少初學者而言對這兩個屬性的正確使用都還抱有迷惑，固然這其中一部分緣由也是ie瀏覽器所致使的。正確的使用這兩個屬性除了能夠提升圖片的搜索能力外，在用戶體驗上也是頗有幫助，下面就來講說alt和title的概念與正確使用。 

alt 
　　此屬性的實質做用是圖片在沒法正確顯示的時候起到文本替代的做用,不過在IE6下還起到了title的做用（鼠標放上去後的文字提示），IE的實現方法其實是錯誤的。若是想在鼠標滑過期顯示提示,應該用title屬性。因爲錯誤的引導，不少初學者就在img標籤內只加了alt屬性。因此這裏再次表揚一記FF！ 
                
title 
　　鼠標滑過期顯示的文字提示，用戶體驗上很重要。固然沒必要要全部的img標籤都加此屬性，比方說logo這樣比較重要或者說用戶會體驗到的圖片內容建議必定要加此屬性。 

<img src="圖片路徑" alt="logo" title="首頁" />