|
概述
我想討論這個(gè)主題十分必要,因此這是本書核心主題之一的良好范例:將內(nèi)容與展示效果分開(kāi)十分重要,很有好處:而將<b>與<i>標(biāo)簽換成結(jié)構(gòu)上對(duì)等的標(biāo)簽(強(qiáng)調(diào)內(nèi)容的時(shí)候)是個(gè)輔助達(dá)成這類分離目標(biāo)的簡(jiǎn)單方法.
因此,下次當(dāng)你聽(tīng)到某人提到"沒(méi)錯(cuò),你永遠(yuǎn)應(yīng)該使用<strong>替換<b>"的時(shí)候,你就有足夠的理由去支持這個(gè)論點(diǎn)了.
大多數(shù)情況下,很適合以<strong>或<em>傳達(dá)強(qiáng)調(diào)語(yǔ)氣,而當(dāng)你只是要追求視覺(jué)上的粗體,斜體效果時(shí),就用CSS吧.
技巧延伸
本章到目前為止,都把焦點(diǎn)集中在<strong>和<em>上,這兩者只是W3C所謂的"短語(yǔ)元素"的一部分,在這本分我們來(lái)多看一些短語(yǔ)元素以及他們和標(biāo)準(zhǔn)之間的關(guān)系.
短語(yǔ)元素
除了<strong>和<em>之外,W3C HTML 4.01規(guī)范里完整的短語(yǔ)元素列表還包括:
<cite>: 包含其他引用,參考來(lái)源的資訊
<dfn>: 代表這是名詞的定義示例
<code>: 代表一段代碼
<samp>: 代表一段程序,script的輸出示范
<kbd>: 代表要使用者輸入的文字
<var>: 代表程序的變量
<abbr>: 代表縮寫名詞(像WWW,HTML,URL,Mass.等)
<acronym>: 代表略稱(像WAC,radar等)
讓我們深入地看幾個(gè)標(biāo)簽,首先從<cite>開(kāi)始:
<cite>的設(shè)計(jì)
<cite>是個(gè)值得討論的有趣元素,在替換掉單純指定顯示效果的<i>標(biāo)簽時(shí)尤為重要.<cite>的用途是參照引用來(lái)源:標(biāo)識(shí)作者或出版物.歷史上來(lái)說(shuō),設(shè)計(jì)者或許會(huì)用<i>把書籍標(biāo)題顯示成斜體,但是在本章稍早的地方我們學(xué)到了CSS是指定顯示效果的最佳工具.
你或許會(huì)建議用<em>表示出版物的標(biāo)題,但是在引用書籍或其他出版物的時(shí)候,我們并不打算去強(qiáng)調(diào),也就是將書籍標(biāo)題顯示成斜體(在印刷界也常使用下劃線,但是這明顯會(huì)和鏈接混淆).
于是就出現(xiàn)了為這個(gè)工作量身打造的<cite>標(biāo)簽,大多數(shù)瀏覽器甚至預(yù)設(shè)會(huì)以斜體顯示<cite>標(biāo)簽中的內(nèi)容.而我們也能加上CSS規(guī)則達(dá)成相同的目的.
規(guī)范
W3C的<cite>標(biāo)簽規(guī)范有點(diǎn)簡(jiǎn)略,在HTML 4.01規(guī)范中只簡(jiǎn)單提了(www.w3.org/TR/html4/struct/text.html#h-9.2.1):
<cite>: 包含其他引用,參考來(lái)源的資訊
這差不多是我們能掌握的說(shuō)法了,但是我們也不清楚到底哪類資料可以放在<cite>中,但是從"來(lái)源"來(lái)看,我們至少可以把作者,出版物放進(jìn)去.
讓我們看看<cite>的用法:
The novel, <cite>The Scarlet Letter</cite> is set in Puritan Boston and like this book, was written in Salem, Massachusetts
使用了<cite>標(biāo)簽之后,標(biāo)題The Scarlet Letter 在大多數(shù)瀏覽器中都顯示成斜體,我們將加上下面這段十分簡(jiǎn)單的CSS規(guī)則,以便瀏覽器在沒(méi)有預(yù)設(shè)的時(shí)候也顯示出正確的效果.
cite {
font-style: italic;
}
回顧一下,我們把標(biāo)題書籍,其他出版物標(biāo)題的<i>標(biāo)簽替換成<cite>,在大多數(shù)瀏覽器中,仍然能得到斜體顯示效果,也再度使頁(yè)面內(nèi)容變得結(jié)構(gòu)化語(yǔ)義化.當(dāng)然這個(gè)結(jié)構(gòu)一樣能發(fā)揮CSS,讓我們一起來(lái)瞧一瞧.
改變<cite>的樣式
在我們討論以結(jié)構(gòu),語(yǔ)義構(gòu)建頁(yè)面內(nèi)容的過(guò)程中,我們也同樣讓頁(yè)面變得更容易用CSS指定樣式(以及修改樣式).以<cite>標(biāo)簽為例,如果我們固定使用這個(gè)標(biāo)簽標(biāo)記出版物的話,我們就能完全掌握現(xiàn)實(shí)的樣式,在任何需要的時(shí)候都能輕易的修改.
假設(shè)所制作的整個(gè)網(wǎng)站,過(guò)程中使用了<cite>標(biāo)簽標(biāo)記書籍參考資料以及出版物標(biāo)題,我們加上全局CSS規(guī)則用斜體顯示所有的<cite>元素,但是在幾個(gè)月之后,我們希望不僅以斜體顯示書籍出版無(wú)標(biāo)題,還要用粗體,紅色文字灰色背景.
當(dāng)然,可以用幾個(gè)CSS規(guī)則快速完成這項(xiàng)任務(wù),立刻改變先前以<cite>標(biāo)記的所有參考資料標(biāo)題,如果使用<i>或者<em>的話就沒(méi)辦法明確指明對(duì)象了.
cite {
font-style: italic;
font-weight: bold;
color: red;
background-color: #ddd;
}
圖6-2使大多數(shù)瀏覽器的顯示效果,而這是另一個(gè)先寫結(jié)構(gòu)化標(biāo)記的好例子,讓你稍后能輕易修改全站的設(shè)計(jì)風(fēng)格.
圖6-2. 以<cite>標(biāo)記,使用CSS樣式的效果
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁(yè) 短語(yǔ)元素 [2] 下一頁(yè) 短語(yǔ)元素 [4]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 
第 3 頁(yè) 短語(yǔ)元素 [3]
