上文:Chapter 3 邪惡的表格?
標(biāo)準(zhǔn)化設(shè)計(jì)解決方案 - 標(biāo)記語言和樣式手冊(cè) Web Standards Solutions The Markup and Style Handbook
Part 1: Get Down With Markup 從標(biāo)記語法談起
Chapter 4 引用
“Misquotations are the only quotations tha are never misquoted” (只有錯(cuò)誤的引用永遠(yuǎn)不會(huì)被誤用)——Hesketh Pearson
所有類型的網(wǎng)站都經(jīng)常會(huì)使用引用,不管是引用其他網(wǎng)頁、作者或出版物的內(nèi)容,以標(biāo)準(zhǔn)方法標(biāo)記引用內(nèi)容是非常有好處的。因?yàn)橐坏┩瓿山Y(jié)構(gòu)之后,只需要一些簡單的css就能把引用內(nèi)容變成漂亮的設(shè)計(jì)元素。
讓我們看看下面三種用來標(biāo)記引言的方法,同時(shí)討論一下每個(gè)方法的優(yōu)缺點(diǎn),在我們找到最棒的方法之后,再來研究這幾個(gè)相關(guān)元素與樣式在標(biāo)記冗長引用內(nèi)容時(shí)哪種方法最佳。
我們來仔細(xì)研究每個(gè)方法,并且找到最便于完成任務(wù)的“工具”,更重要的是,要弄清楚為什么它是最棒的工具。
方法A:缺乏語義
<p>"Misquotations are the only quotations that are never misquoted."</p> <p>— Hesketh Pearson</p>
在頁面內(nèi)使用引用的時(shí)候,通常會(huì)希望引用的外觀與其他文字不同,最好能提示讀者這段內(nèi)容來自其他地方,同時(shí)(使用適當(dāng)方法)與一般內(nèi)容的閱讀順序分離。
方法A的標(biāo)記方法與頁面上的其他段落并沒有不同,因此我們沒有辦法為它設(shè)定不同的樣式,內(nèi)容里的雙引號(hào)就變成了引用內(nèi)容的唯一提示了。
順便提一下,在這個(gè)方法與之后的兩個(gè)例子中 — 是長破折號(hào)(也就是“—”)的HTML字碼,這里使用了10進(jìn)制表示方法。這是支持所有瀏覽器最可靠的方法;蛘,你也可以使用 —
方法B:以class處理?
<div class="quotation"> <p>Misquotations are the only quotations that are never misquoted.</p> <p>— Hesketh Pearson </p> </div>
由于在包圍引用內(nèi)容的<div>標(biāo)簽里加了class="quotation",因此我們能夠?yàn)樗付í?dú)特的css樣式,但是HTML擁有專門解決這個(gè)問題的完美標(biāo)簽,因此建立這個(gè)特別分類似乎有點(diǎn)多余,我們馬上就會(huì)看到這個(gè)完美的HTML標(biāo)簽.
在我們開始使用加上類的<div>之后,如果我們想讓整個(gè)網(wǎng)站的樣式保持一致,在標(biāo)記各處引用的時(shí)候都會(huì)被限制在這個(gè)方法中,我們必須背下這個(gè)標(biāo)簽引用的特別的語法以便未來使用.如果我們管理的是以<div>與分類屬性標(biāo)記各種結(jié)構(gòu)元素的大型網(wǎng)站,那就十分頭疼了.因?yàn)槭虑楹芸炀蜁?huì)變得十分散亂,而你將會(huì)需要一份記錄所有自定分類的名稱、用途的表格了。
使用不支持或者關(guān)閉css的瀏覽器訪問這個(gè)方法標(biāo)記的引用時(shí)也會(huì)發(fā)生問題。由于<div>只是一般容器,因此里面的內(nèi)容沒有任何預(yù)設(shè)樣式.對(duì)使用舊版本瀏覽器,文字模式瀏覽器,屏幕閱讀器的人來說,看到?jīng)]有css的引用,和頁面里其他內(nèi)容完全一樣.
方法C:<blockquote>最棒
<blockquote> <p>Misquotations are the only quotations that are never misquoted.</p> <p>— Hesketh Pearson </p> </blockquote>
W3C建議使用<blockquote>標(biāo)記長引用(區(qū)塊級(jí)內(nèi)容),這個(gè)標(biāo)簽正是為了處理我們正在討論的狀況設(shè)計(jì)的,借著使用這個(gè)標(biāo)簽,我們能為內(nèi)容加上結(jié)構(gòu)意義,同時(shí)能提供獨(dú)特的標(biāo)記以便為可視化瀏覽器設(shè)定樣式.
沒有加上任何樣式的話,<blockquote>標(biāo)簽的內(nèi)容會(huì)縮進(jìn)顯示,這是最基本的視覺提示,足以將引用內(nèi)容和一般文字區(qū)別開.然而,這種預(yù)設(shè)樣式卻引來了一種惡劣的習(xí)慣,我們稍后就會(huì)討論.
用起子釘釘子
或許因?yàn)?lt;blockquote>的內(nèi)容看起來就像內(nèi)縮過的段落,或者是從前需要縮進(jìn)某個(gè)區(qū)塊,某段文字的時(shí)候,你就會(huì)使用<blockquote>搞定.
不幸的,這是個(gè)非常糟糕的習(xí)慣,補(bǔ)救方法之一,是改用適當(dāng)?shù)脑丶由蟘ss的padding-left或margin-left屬性,以往<blockquote>常被這樣濫用來設(shè)定顯示效果,而不是用來標(biāo)記內(nèi)容結(jié)構(gòu).
由于有這種壞習(xí)慣,因此W3C建議將描述引用符號(hào)的責(zé)任交給樣式表,不希望瀏覽器主動(dòng)顯示,在本章的"技巧延伸"中,我們會(huì)看到如何巧妙的加上漂亮的引用符號(hào).
出處:藍(lán)色理想
責(zé)任編輯:bluehearts
上一頁 下一頁 標(biāo)記語言——引用 [2]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論,我還想發(fā)表評(píng)論。
|