标记语言——引用
“Misquotations are the only quotations tha are never misquoted” (只有錯誤的引用永遠不會被誤用)——Hesketh Pearson
所有類型的網站都經常會使用引用，不管是引用其他網頁、作者或出版物的內容，以標準方法標記引用內容是非常有好處的。因為一旦完成結構之后，只需要一些簡單的css就能把引用內容變成漂亮的設計元素。
讓我們看看下面三種用來標記引言的方法，同時討論一下每個方法的優缺點，在我們找到最棒的方法之后，再來研究這幾個相關元素與樣式在標記冗長引用內容時哪種方法最佳。
我們來仔細研究每個方法，并且找到最便于完成任務的“工具”，更重要的是，要弄清楚為什么它是最棒的工具。
方法A：缺乏語義
<p>"Misquotations are the only quotations that are never misquoted."</p>
<p>— Hesketh Pearson</p>
在頁面內使用引用的時候，通常會希望引用的外觀與其他文字不同，最好能提示讀者這段內容來自其他地方，同時（使用適當方法）與一般內容的閱讀順序分離。
方法A的標記方法與頁面上的其他段落并沒有不同，因此我們沒有辦法為它設定不同的樣式，內容里的雙引號就變成了引用內容的唯一提示了。
順便提一下，在這個方法與之后的兩個例子中 —? 是長破折號（也就是“—”）的HTML字碼，這里使用了10進制表示方法。這是支持所有瀏覽器最可靠的方法。或者，你也可以使用 —
方法B:以class處理?
<div class="quotation">
? <p>Misquotations are the only quotations that are never
misquoted.</p>
? <p>— Hesketh Pearson </p>
</div>
由于在包圍引用內容的<div>標簽里加了class="quotation",因此我們能夠為它指定獨特的css樣式,但是HTML擁有專門解決這個問題的完美標簽,因此建立這個特別分類似乎有點多余,我們馬上就會看到這個完美的HTML標簽.
在我們開始使用加上類的<div>之后,如果我們想讓整個網站的樣式保持一致,在標記各處引用的時候都會被限制在這個方法中,我們必須背下這個標簽引用的特別的語法以便未來使用.如果我們管理的是以<div>與分類屬性標記各種結構元素的大型網站,那就十分頭疼了.因為事情很快就會變得十分散亂,而你將會需要一份記錄所有自定分類的名稱、用途的表格了。
使用不支持或者關閉css的瀏覽器訪問這個方法標記的引用時也會發生問題。由于<div>只是一般容器,因此里面的內容沒有任何預設樣式.對使用舊版本瀏覽器,文字模式瀏覽器,屏幕閱讀器的人來說,看到沒有css的引用,和頁面里其他內容完全一樣.
方法C:<blockquote>最棒
<blockquote>
? <p>Misquotations are the only quotations that are never
misquoted.</p>
? <p>— Hesketh Pearson </p>
</blockquote>
W3C建議使用<blockquote>標記長引用(區塊級內容),這個標簽正是為了處理我們正在討論的狀況設計的,借著使用這個標簽,我們能為內容加上結構意義,同時能提供獨特的標記以便為可視化瀏覽器設定樣式.
沒有加上任何樣式的話,<blockquote>標簽的內容會縮進顯示,這是最基本的視覺提示,足以將引用內容和一般文字區別開.然而,這種預設樣式卻引來了一種惡劣的習慣,我們稍后就會討論.
用起子釘釘子
或許因為<blockquote>的內容看起來就像內縮過的段落,或者是從前需要縮進某個區塊,某段文字的時候,你就會使用<blockquote>搞定.
不幸的,這是個非常糟糕的習慣,補救方法之一,是改用適當的元素加上css的padding-left或margin-left屬性,以往<blockquote>常被這樣濫用來設定顯示效果,而不是用來標記內容結構.
由于有這種壞習慣,因此W3C建議將描述引用符號的責任交給樣式表,不希望瀏覽器主動顯示,在本章的"技巧延伸"中,我們會看到如何巧妙的加上漂亮的引用符號.
概要
讓我們快速回顧一下,為什么方法C在標記長引用的時候比其他兩種方法棒.
方法A:
無法輕易加上不同的樣式,使它與頁面其他內容區分開來
不提供任何引用的語義,結構標識.
方法B:
加上獨特的分類讓我們易于指定樣式,但是<blockquote>可用,所以根本不需要
如果想要維持頁面/網站的風格一致,在標記未來新增引用的時候,我們就會被限制在這個方法里面
方法C:
這是W3C為這個目標所設計的元素,能夠標識內容的意義,結構.
容易使用CSS為<blockquote>元素內部的引用加上獨特樣式.
缺少CSS的時候,<blockquote>預設的表現方式足以讓可視化,非可視化瀏覽器提供暗示.
現在是為<blockquote>打扮一番,尋找樣式創意的好機會.
技巧延伸
我們來看看怎么為<blockquote>標簽的引用內容上加上一些有創意的樣式.不過在這之前,讓我們先談談cite屬性與行內引用.
給好奇寶寶的參考資料
對迂腐的標題感到厭倦了么?很好,我也是.在討論引用的時候,一定得提到cite屬性,根據W3C的規范,cite屬性的目的是讓設計者參照引用的出處,也就是說,如果引用是從其他網頁摘錄下來的,我們就可以在cite屬性內記錄那份網頁的url.
讓我們看看怎么書寫這個屬性:
<blockquote cite="http://www.somewebsite.com/path/to/page.html"
? <p>Misquotations are the only quotations that are never
misquoted.</p>
? <p>— Hesketh Pearson </p>
</blockquote>
在書寫這段文字的時候,大多數瀏覽器都不會特別處理我們剛加上的cite屬性,但是在能夠處理cite屬性的進階css技巧或者scripting程序出現之后,事情就會開始變得有趣了.引言出處本身也是幫助描述標簽內容的額外資訊,未來將會十分具有價值.
試著把加上cite想成把硬幣丟進儲蓄罐,這些硬幣現在值不了多少,但是未來你將會慶幸一路上你有把它們全部存起來.
行內引用
要怎么處理簡短,應該是在行內參考的引用呢?舉例來說,如果你在這句子中提到其他人說過的話,這時就可以用<q>標簽:
I said, <q>Herman, do you like bubblegum?</q> And he said,<q>Yes, the kind that comes with a comic.</q>
這在可視化瀏覽器上多半會顯示成這樣:
I said, Herman, do you like bubblegum? And he said, Yes, the kind that comes with a comic.
不需要引號
大多數可視化瀏覽器會在使用<q>和</q>的時候自動加上引號,因此你不用自己輸入,W3C也建議加上lang屬性標識所應用的內容語言,某些語言可能會顯示不同的引號.
I said, <q lang="en-us">Herman, do you like bubblegum? </q> And he said, <q lang="en-us">Yes, the kind that comes with a comic.</q>
你
可以在W3C的網站上找到所有可用的語言代碼.(www.w3.org/TR/html4/struct/dirlang.html#langcodes)?
嵌套的行內引用
你也能在引用內容中嵌套引用其他文字,搞混了么?我也是,來看看示例吧:
I said, <q lang="en-us">Herman, do you like bubblegum? </q> And he said, <q lang="en-us">Yes. Bubblegum is what Harry calls <q lang="en-us">delicious</q>.</q>
此時瀏覽器會在適當的地方使用雙引號和單引號,像是這樣.
I said, "Herman, do you like bubblegum?" And he said, "Yes. Bubblegum is what Harry calls 'delicious'."
為<blockquote>加上樣式
Fast Company從雜志存檔里選出每日引言放在首頁,已經行之有年了,為了保留FC的印刷體裁和強調效果,因此有很長一段時間這個引言被做成GIF圖片,讓設計者能以任何方式處理字型,達成期望的效果.
在2003年早秋,差不多是在我看著至愛的紅襪隊迎向歷史性冠軍之時,我決定拋棄GIF圖片,換上加了樣式的<blockquote>標簽.
從易用性角度看,以文字顯示引用內容很有道理,由于無法重現GIF帶來的體裁便利性,因此我們面對著美化引言的挑戰.當然,CSS幫了很大的忙.
背景的引用符號
想法十分簡單,就是分別制作開引號,閉引號兩張圖片,選用的色調足以隱沒在略為重疊的引用文字后面,引用同時也放在了270像素寬,淡灰色的圓角方塊內,以便配合網站整體風格.第三張圖片用來完成圓角效果以及引號.這三張圖片完全以各個元素debackground屬性放在css中.
我們先以photoshop或者你慣用的圖形處理程序建立這些圖片.這邊是個使用特殊字體的好機會,你能選用一般瀏覽器不支持的字體,在Fast Company的例子里,使用了雜志上的引號字體.
三張圖片
圖4-1 是剛建立的三張圖片,一張是開引號,頂部圓角,一張是閉引號,最后一張是底部的兩個圓角.
這三張圖片背景都是透明的,以便我們用css來控制背景的顏色.同時我們以白色制作了圓角,灰色制作了引號.
圖 4-1 為了制作引號圓角而以Photoshop創建的3張圖片
標記元素
目前,你只能以background或者background-image屬性為一個元素指定單張背景圖,因此,我們將為<blockquote>里的每個段落加上id.
我們會把一段內容標為#quote,另一段內容標為#other,使得最后有三個獨特元件能夠制定背景圖.
來看看我們會在這個示例接下來的步驟里中使用的標記方法:
<blockquote cite="http://www.somesite.com/path/to/page.html">
? <p id="quote"><strong>Misquotations</strong> are the only quotations
that are <strong>never</strong> misquoted.</p>
? <p id="author">—Hesketh Pearson</p>
</blockquote>
這樣就完成了使用背景圖的預備工作了
三個元素,三張背景圖
如先前所述,現在你只能以background或者background-image屬性為一個元件指定一張背景圖,因此我們將善用示例中的三個元素,也就是<blockquote>,#quote段落和#author段落,以便指定三張背景圖完成我們期望的效果.
在新增元素前,看看還有那些元素可以用上,這是個很好的習慣.你經常能在完善,結構化的標記源代碼中找到適合加上css的元素,大成你需要的效果.
我們先從<blockquote>元素的css規則開始書寫:
blockquote {
? width: 270px;
? margin: 0;
? padding: 0;
? font-family: georgia, serif;
? font-size: 150%;
? letter-spacing: -1px;
? line-height: 1em;
? text-align: center;
? color: #555;
? background: #eee url(top.gif) no-repeat top left;
? }
我們把整個組件的寬度設為270像素,與提供頂部圓角,開引號效果的top.gif寬度相同,同時我們也照顧了一下文字效果,為它指定了字體,大小和顏色.最后,我們置中所有文字,并以最后一條規則指定了背景色,背景圖以及背景圖的顯示位置.
去掉<blockquote>的內外補丁也很重要,我們該為每個段落元素加上內補丁,這能讓我們避免windows版IE5錯誤解析CSS盒模型的問題.我們會在本書第二部分進一步討論盒模型的細節.
接著,讓我們幫#quote段落設定樣式:
blockquote {
? width: 270px;
? text-align: center;
? margin: 0;
? padding: 0;
? font-family: georgia, serif;
? font-size: 150%;
? letter-spacing: -1px;
? line-height: 1em;
? color: #555;
? background: #eee url(top.gif) no-repeat top left;
? }
#quote {
? margin: 0 10px 0 0;
? padding: 20px 10px 10px 20px;
? background: url(end_quote.gif) no-repeat right bottom;
? }
借著指定margin:0 10px 0 0;我們能取消瀏覽器在段落上下的預設補丁,以便使用精確的內補丁設定值排好版面.然而我們還是在右側加上了10像素的外邊界,以便把閉引號擠開,配合左邊的效果.如果我們不留下這10像素的話,開引號就會緊靠整個外邊框的最右邊.另一種可行方法是直接在圖片右邊加上適當的留白.
同時也要留意,我們指定把背景圖(開引號)放在<blockquote>的右側(right)底部(bottom).
最后,我們要在作者段落(#author)放上最后一張背景圖,也就是引言底部的圓角.
blockquote {
? width: 270px;
? text-align: center;
? margin: 0;
? padding: 0;
? font-family: georgia, serif;
? font-size: 150%;
? letter-spacing: -1px;
? line-height: 1em;
? color: #555;
? background: #eee url(top.gif) no-repeat top left;
? }
#quote {
? margin: 0 10px 0 0;
? padding: 20px 20px 10px 20px;
? background: url(end_quote.gif) no-repeat right bottom;
? }
#author {
? margin: 0 10px 0 0;
? padding: 0 0 10px 0;
? color: #999;
? font-size: 60%;
? background: url(bottom.gif) no-repeat bottom;
? }
我們再度取消段落上下的預設補丁,改在底部加上一些內部補丁.第三張圖片已經到位了.為引用內容加上兩個圓角,借以padding代替margin設定author部分的排列方式,我們得以讓圓角圖出現在適當的位置上,也就是最底部.
結果
圖4-2是典型的現代瀏覽器所能看到的結果,圓角外邊框十分完整,兩個引號則漂亮的藏在文字后方.這個方法最棒的地方是整個外框可以擴大,代表你能放進去任何長度的引用內容,外框會配合引言長度自動放大或縮小(自適應),而且引號與圓角都會停留在適當的位置.這也代表視力不佳的使用者方法字體時,引用于外框的設計不會被破壞.
圖 4-2,使用三個背景圖與文字的引用樣式示例.
強調特殊文字
我為Fast Company額外加上的引用樣式之一是在引用范圍內使用<strong>標簽來強調特定重點文字的效果.這能進一步模仿雜志上使用的排版風格.
借著使用<strong>,我們能確保大多數不支持樣式或是非可視化瀏覽器仍然可以得到粗體或強調的效果(在這個例子中很合理),同時我又能以CSS特別指定改用深色顯示<blockquote>范圍內的<strong>標簽.
?
標記源代碼內容需要略作修改,以<strong>標示幾個選定的單字.
<blockquote cite="http://www.somesite.com/path/to/page.html">
? <p id="quote"><strong>Misquotations</strong> are the only quotations
that are <strong>never</strong>? misquoted.</p>
? <p id="author">—Hesketh Pearson</p>
</blockquote>
然后這段是需要加上的額外css規則的內容:
#quote strong {
? color: #000;
? font-weight: normal;
? }
此時,任何出現在引用范圍之內的<strong>就會變成黑色(不能更黑了),另外由于引用的其他部分使用了一般的font-weight,因此我們以normal取代<strong>預設的粗體樣式.
使用<strong>標簽的結果可以在圖4-3里看到,我們強調了"Misquotation"和"never"這兩個字.
圖4-3 以<strong>強調特定單字的<blockquote>樣式
這回退化到什么程度?
我們知道CSS與幾張背景圖能把引用美化到什么程度了,但是在不支持CSS的瀏覽器或設備上會變成什么樣呢?這個方法的顯示效果會退化到什么程度呢?
恩,幸好我們以原始設計用途使用了<blockquote>元素,因此不支持樣式的瀏覽器,電話,PDA以及屏幕閱讀器都能正確的處理他的內容.舉例來說,圖4-4就是這個頁面去掉CSS之后的樣子.我在引用前后加上了虛構的文字,以便讓你看到完整的效果.
圖4-4. 圖4-3去掉CSS之后的樣子
結論
在仔細研究過幾種標識引用的不同方法之后,我們很容易就能找到處理問題的正確工具,也就是<blockquote>,單純為了縮進文字而使用<blockquote>的時代已經過去了,我們現在用它來標記長引用.
一旦完成了結構,就能輕易為<blockquote>加上樣式,使他們區別于一般內容之外,同時仍能讓不支持CSS的瀏覽器或其他設備正常解析內容
轉載于:https://www.cnblogs.com/junzhongxu/archive/2008/07/08/1238205.html
與50位技術專家面對面20年技術見證，附贈技術全景圖總結
- 上一篇： C# hashtable
- 下一篇： java中的日期时间的计算与比较