亚洲欧美日本VA在线播放,百合互慰无码免费视频在线观看 ,风韵丰满熟妇啪啪区老熟熟女,国产精品久久久久久无毒不卡

青島網(wǎng)站建設(shè)公司,青島網(wǎng)站制作公司-奈薇建站網(wǎng)
建站咨詢熱線:0532-88781131、15166683288 
知識(shí)普及 ? alt屬性和title屬性

alt屬性和title屬性

奈薇建站網(wǎng) 2010-02-22 20:23發(fā)表
閱讀次數(shù) 3303

當(dāng)瀏覽器賣(mài)主扭曲了標(biāo)準(zhǔn)并且自顧自的不按規(guī)則去做一些事,他們可能會(huì)造成一些問(wèn)題,或者至少產(chǎn)生了混淆。例子之一就是一些瀏覽器處理alt屬性(一般會(huì)被錯(cuò)誤的稱作alt標(biāo)簽)的方式,比如擁有大量用戶的Windows的IE瀏覽器。

替換文字(alt text)并不是用來(lái)做提示(tool tip),或者更加確切的說(shuō),它并不是為圖片提供額外說(shuō)明信息的。相反地,title屬性才應(yīng)該用來(lái)為元素提供額外說(shuō)明信息。這些信息在大部分圖像瀏覽器里顯示為提示(tool tip),雖然制造商可以任意采取其他方式渲染title屬性的文字。

很多人看來(lái)對(duì)這兩個(gè)屬性感到迷惑(最近這個(gè)問(wèn)題在Web Standards Group郵件列表里變多了), 所以我寫(xiě)下我的想法,如何去用它們。

alt屬性

為不能顯示圖像、窗體或applets的用戶代理(UA),alt屬性用來(lái)指定替換文字。替換文字的語(yǔ)言由lang屬性指定。
來(lái)源:How to specify alternate text.

Alt屬性(注意是“屬性”而不是“標(biāo)簽”)包括替換說(shuō)明,對(duì)于圖像和圖像熱點(diǎn)是必須的。它只能用在img、area和input元素中(包括applet元素)。對(duì)于input元素,alt屬性意在用來(lái)替換提交按鈕的圖片。比如:<input type="image" src="image.gif" alt="Submit" />.

使用alt屬性是為了給那些不能看到你文檔中圖像的瀏覽者提供文字說(shuō)明。這包括那些使用本來(lái)就不支持圖像顯示或者圖像顯示被關(guān)閉的瀏覽器的用戶,視覺(jué)障礙的用戶和使用屏幕閱讀器的用戶。替換文字是用來(lái)替代圖像而不是提供額外說(shuō)明文字的。

在寫(xiě)替換文字前仔細(xì)想想,保證那些文字確實(shí)為那些看不到圖像的人提供了說(shuō)明信息,并且在上下文中有意義。對(duì)于那些裝飾性的圖片可以使用空的值(alt="",引號(hào)中間沒(méi)有空格),而不是使用不相關(guān)的替換文字比如“blue bullet”或者“spacer.gif”。不要忽略它,如果你忽略了,那么一些屏幕閱讀器會(huì)直接閱讀圖像文件的文件名,那些文字瀏覽器,比如Lynx會(huì)顯示圖像文件的文件名,而那對(duì)于你的瀏覽者就沒(méi)什么用了。

包含文字的圖像圖片設(shè)置替換文字是最簡(jiǎn)單的,圖像中包含的文字一般來(lái)說(shuō)就可以作為alt屬性值。

至于替換文字的長(zhǎng)度,看看WCAG 2.0(網(wǎng)站內(nèi)容可用性指南2.0)是怎么說(shuō)的:

Alt屬性值得長(zhǎng)度必須少于100個(gè)英文字符或者用戶必須保證替換文字盡可能的短。

我把它理解為“盡可能短,盡需要長(zhǎng)”。

即使你想讓它顯示為提示(tool tip),也不要給文字元素使用alt屬性,這并不是它的用法。至今據(jù)我所知,那樣做僅能在Windows的IE瀏覽器和古老的Netscape 4.*(windows版本)有效。沒(méi)有一個(gè)Mac的瀏覽器會(huì)將它顯示為提示(tool tip)?! ?span id="8wu7e7bwwmuq" class="yuhou_copy" style="font-size:12px">轉(zhuǎn)自:奈薇建站網(wǎng)(www.nev.cn)

當(dāng)瀏覽器把替換文字顯示為提示(tool tip)后,那些錯(cuò)誤使用alt屬性的行為也受到了鼓勵(lì)。一些人開(kāi)始寫(xiě)無(wú)意思的替換文字,因?yàn)樗麄冓呄蛴谡J(rèn)為它是一個(gè)額外的說(shuō)明信息,而不是不能顯示圖像的替換。其他人可能不想讓提示(tool tip)出現(xiàn),然后就完全忽略了寫(xiě)alt屬性值。這些錯(cuò)誤的做法,都給那些不能看到圖像的瀏覽者造成了困難。

額外的說(shuō)明信息和非本質(zhì)的信息請(qǐng)使用title屬性。

title屬性

title屬性為設(shè)置該屬性的元素提供建議性的信息。
來(lái)源: The title attribute.

title屬性可以用在除了base,basefont,head,html,meta,param,script和title之外的所有標(biāo)簽。但是并不是必須的??赡苓@正是為什么很多人不明白何時(shí)使用它。

使用title屬性提供非本質(zhì)的額外信息。大部分的可視化瀏覽器在鼠標(biāo)懸浮在特定元素上時(shí)顯示title文字為提示信息(tool tip),然而這又由制造商來(lái)決定如何渲染title文字。一些瀏覽器會(huì)將title文字顯示在狀態(tài)欄里。比如早期版本的Safari瀏覽器。

title屬性有一個(gè)很好的用途,即為鏈接添加描述性文字,特別是當(dāng)連接本身并不是十分清楚的表達(dá)了鏈接的目的。這樣就使得訪問(wèn)者知道那些鏈接將會(huì)帶他們到什么地方,他們就不會(huì)加載一個(gè)可能完全不感興趣的頁(yè)面。另外一個(gè)潛在的應(yīng)用就是為圖像提供額外的說(shuō)明信息,比如日期或者其他非本質(zhì)的信息。

title屬性值可以比alt屬性值設(shè)置的更長(zhǎng)。不過(guò)要注意的是,有些瀏覽器會(huì)截?cái)噙^(guò)長(zhǎng)的文字(比如工具提示或其他)。比如Mozilla核心的瀏覽器只能顯示最先的60個(gè)字符。這被認(rèn)為是一個(gè)Mozilla bug,這是你要注意的。

使用前先考慮

我的建議是保證替換文字(alt text)精要。在大多數(shù)的應(yīng)用里,都應(yīng)該被留白,alt=""(注意兩引號(hào)中沒(méi)有空格)。 想想那些圖像,為那些瀏覽者提供了什么樣的信息,你應(yīng)該用什么文字去描述它,或者你該為看不到圖像的人提供什么信息? 將替換文字寫(xiě)成“照片:站在大樓外的CEO,穿著灰色西裝和黑色領(lǐng)帶,望著天”對(duì)于看不到圖像的人真的有幫助?如果你覺(jué)得是,那么你就寫(xiě)吧。在很多情況下,我覺(jué)得讓替換文字留白比較好。

對(duì)于title屬性,比較難于給出嚴(yán)格的使用說(shuō)明。我大部分用在那些不能自我釋意的鏈接上,比如同一頁(yè)面上的相同的鏈接文字,不同的鏈接頁(yè)面。有時(shí)候也為一些按鈕或者表單元素提供更多的說(shuō)明文字。

更長(zhǎng)的描述

當(dāng)一個(gè)圖片需要更加長(zhǎng)的描述,而超過(guò)alt屬性的限制,那么還有一些選擇。

longdesc屬性可以用來(lái)提供鏈接到一個(gè)包含圖片文字描述的單獨(dú)頁(yè)面。這就意味著把瀏覽者鏈接到另外的頁(yè)面,這可能會(huì)造成理解上的困難。另外瀏覽器對(duì)于longdesc屬性的支持也是不一致的,并且不是非常好。

longdesc屬性可以包含一個(gè)鏈接到當(dāng)前文檔的其他部分(錨點(diǎn))來(lái)取代鏈接到另外的頁(yè)面。在Accessibility footnotes, Andy Clarke很好的解釋說(shuō)明了如何應(yīng)用。

描述鏈接(D links)可以用來(lái)補(bǔ)充longdesc。一個(gè)描述鏈接就是一個(gè)常規(guī)的鏈接,連接到含有替換文字的頁(yè)面。該鏈接被置于圖像的旁邊,并且在所有瀏覽器中都是可是的。對(duì)于它的有效性人們有很多不同意見(jiàn),我的個(gè)人意見(jiàn)不大喜歡這個(gè)注意。WCAG也是,在他們的工作草案HTML Techniques for WCAG 2.0中,描述鏈接是被“不贊成”的?! ?span id="8wu7e7bwwmuq" class="yuhou_copy" style="font-size:12px">轉(zhuǎn)自:奈薇建站網(wǎng)(www.nev.cn)

如果對(duì)圖片的長(zhǎng)的描述對(duì)于任何瀏覽者都有用,那么你得考慮讓它簡(jiǎn)單的顯示在同一個(gè)文檔里面,而不是鏈接到其他頁(yè)面里或者藏起來(lái)。這樣每個(gè)人都可以閱讀到。這是一種簡(jiǎn)單低技術(shù)含量的方法。


相關(guān)熱點(diǎn)推薦
百度快照更新方法
局域網(wǎng)常見(jiàn)網(wǎng)絡(luò)故障及排
青島網(wǎng)站建設(shè)前期有什么
搜索引擎蜘蛛的工作過(guò)程
如何分析一個(gè)網(wǎng)站的真實(shí)
網(wǎng)頁(yè)制作者和網(wǎng)頁(yè)設(shè)計(jì)師
搜索引擎概念
如何建立一個(gè)網(wǎng)站
怎樣交換友情鏈接
英文版企業(yè)網(wǎng)站的設(shè)計(jì)要
集團(tuán)公司網(wǎng)站建設(shè)的特點(diǎn)
網(wǎng)站設(shè)計(jì)和圖形用戶界面
扁平化網(wǎng)站風(fēng)格設(shè)計(jì)的特
網(wǎng)購(gòu)商品質(zhì)量堪憂,電商
網(wǎng)站建設(shè)的四個(gè)步驟
網(wǎng)站被收錄了很多卻沒(méi)有
企業(yè)建站的盈利模式及網(wǎng)
302狀態(tài)代碼與SEO
蘋(píng)果系扁平化大色塊網(wǎng)站
企業(yè)網(wǎng)站建設(shè)完美設(shè)計(jì)及
如何提高網(wǎng)站收錄和排名
Web頁(yè)面設(shè)計(jì)原則
Web設(shè)計(jì)之道
做網(wǎng)站優(yōu)化需要達(dá)到的目
網(wǎng)站建設(shè)財(cái)富秘籍:高手
網(wǎng)頁(yè)制作與策劃的關(guān)鍵所
小企業(yè)怎樣做網(wǎng)站營(yíng)銷
Web內(nèi)容不是一寫(xiě)就好
優(yōu)化策略:網(wǎng)頁(yè)設(shè)計(jì)的七
網(wǎng)站設(shè)計(jì)中不應(yīng)該做什么
搭配的藝術(shù)--談主頁(yè)用
設(shè)計(jì)精心的優(yōu)秀網(wǎng)站
用戶體驗(yàn)設(shè)計(jì)答疑對(duì)話
界面設(shè)計(jì)表達(dá)需要注意尺
網(wǎng)站推廣需要一定的執(zhí)行
客戶終生價(jià)值挖掘讓你利
企業(yè)網(wǎng)站建設(shè)推廣的基本
交叉鏈與網(wǎng)站權(quán)重
青島網(wǎng)站建設(shè)時(shí)如何有效
alt屬性和title
奈薇建站網(wǎng)青島網(wǎng)站建設(shè)公司/青島網(wǎng)站制作公司,專業(yè)提供"氣質(zhì)"型網(wǎng)站建設(shè)及精美網(wǎng)站制作服務(wù),同時(shí)歡迎各地網(wǎng)站建設(shè)公司、網(wǎng)站制作公司代理我們的奈薇建站系統(tǒng)共同發(fā)展

熱點(diǎn)地區(qū):青島網(wǎng)站建設(shè)價(jià)格 青島即墨網(wǎng)站制作公司 開(kāi)發(fā)區(qū)信息港 山東在線門(mén)戶
建站咨詢熱線0532-88781131 15166683288 18562723728
版權(quán)所有© BangJianZhan.Com & Nev.Cn 青島網(wǎng)站建設(shè)/網(wǎng)站制作公司
青島雨后網(wǎng)絡(luò)科技有限公司 - 青島市市北區(qū)福州北路90號(hào),景泰尚都6層
已經(jīng)為您服務(wù)了
211個(gè)月 1