點(diǎn)擊這里返回武林網(wǎng) HTML教程 欄目． 上文：標(biāo)記語言——表單 原文出處Chapter 6 <strong>,<em>與其他短語元素 在引言和前面的章節(jié)中,已經(jīng)稍微提到過語義標(biāo)簽的概念,使用標(biāo)簽為文件標(biāo)識意義,而不是單純的以標(biāo)簽設(shè)定顯示效果.設(shè)計完全使用語義標(biāo)簽的網(wǎng)頁是個不錯的點(diǎn)子.然而我覺得這個目標(biāo)太理想化了.當(dāng)然,沒有完全達(dá)到目標(biāo)并不代表努力過程毫無價值.至少朝著這個目標(biāo)努力很有價值. 在現(xiàn)實(shí)情況下,經(jīng)常有必要加上非語義標(biāo)簽,以便實(shí)現(xiàn)特定的設(shè)計目標(biāo),主要是因?yàn)楝F(xiàn)在著名的瀏覽器都無法百分之百支持標(biāo)準(zhǔn)的緣故.有些CSS規(guī)則在部分瀏覽器中無法顯示正確的效果,而這不幸的讓我們在達(dá)成某些設(shè)計目標(biāo)的過程中必須使用額外的標(biāo)簽. 有個重要的概念必須放在心上:那就是盡量嘗試撰寫語義化結(jié)構(gòu)將能帶來實(shí)際的好處.同時,對標(biāo)準(zhǔn)的支持雖然沒有達(dá)到百分之百,但也已經(jīng)越過臨界點(diǎn)讓我們現(xiàn)在就能使用符合網(wǎng)絡(luò)標(biāo)準(zhǔn)的方法撰寫網(wǎng)頁.有些時候必須做點(diǎn)犧牲,但是堅持撰寫越多的符合標(biāo)準(zhǔn)的標(biāo)簽,未來的工作就會越輕松.顯示效果 VS 結(jié)構(gòu)標(biāo)簽 本章節(jié)將會討論顯示效果與結(jié)構(gòu)標(biāo)簽的不同，更確切的說，是討論使用<strong>替換<b>,以及使用<em>替換<i>的差異.在本章稍后,我們也會討論幾個其他短語元素以及它們在符合標(biāo)準(zhǔn),結(jié)構(gòu)化標(biāo)簽語法內(nèi)的重要性. 你或許聽說過某些人建議在需要粗體文字時要用<strong>替換<b>,但是他卻沒有進(jìn)一步告訴你為什么需要這樣的替換.在不知道"為什么"的情況下,實(shí)在很難期待其他網(wǎng)頁設(shè)計者只因?yàn)槁犨^需要這樣做就改變他們對標(biāo)簽的使用習(xí)慣.為什么<strong>和<em>比<b>和<i>好? 去掉<b>和<i>標(biāo)簽,替換成<strong>和<em>到底是有什么好處呢?其實(shí)這一切都是為了表達(dá)語義和結(jié)構(gòu),而不是為了只是顯示效果,本書的所有示例也都努力遵循這個概念.看看專家怎么說 首先,來看看W3C在HTML4.01的短語元素規(guī)范里是怎么敘述<strong>和<em>的(http://www.w3.org/TR/html4/struct/text.html#h-9.2.1): 短語元素能在文字片段之內(nèi)加上結(jié)構(gòu)信息,常見的短語元素意義如下: <em> 代表強(qiáng)調(diào) <strong> 代表更強(qiáng)烈的強(qiáng)調(diào) 所以在此討論的是兩種不同程度的強(qiáng)調(diào).舉例來說,就是一個單字或者短語,念的時候應(yīng)該比較大聲,音調(diào)較高,念的快些,或者是...嗯,就是比一般文字內(nèi)容更強(qiáng)調(diào). W3C接著還敘述了下面這段內(nèi)容: 短語元素的展示效果隨著瀏覽器的不同,一般來說可視化瀏覽器應(yīng)該以斜體顯示<em>的文字內(nèi)容,以粗體顯示<strong>的文字內(nèi)容.語音合成軟件則能配合內(nèi)容改變合成參數(shù),像是音量,音調(diào)與速度等等. 啊哈!最后一句特別有意思,語音合成軟件(之前我們稱之為屏幕閱讀器)將會正確處理必須強(qiáng)調(diào)的文字,這的確是件好事. 相對之下,<b>或是<i>只是單純的顯示效果標(biāo)簽.如果我們的目標(biāo)是將結(jié)構(gòu)與顯示效果分離的話,使用<strong>和<em>就是正確的選擇,單純想要顯示粗體,斜體文字的時候用css就好了.本章稍后會討論更多例子. 接著看兩個標(biāo)識示例,幫助我們了解它們的差異.方法A your order number for future reference is: <b>6474-82071</b>.方法B your order number for future reference is: <strong>6474-82071</strong>.又粗又美麗 這個情況是使用<strong>比<b>更適合的完美例子,我們打算讓句子內(nèi)的特定文字顯示的更加重要.除了粗體顯示訂單編號以外,我們也希望屏幕閱讀器也改變它們表達(dá)這段內(nèi)容的方式:提升音量,改變音調(diào)或速度.方法B能夠同時達(dá)到這兩個目的.<em>又如何? 同樣的,以<em>取代<i>,能夠同時表達(dá)重要性,而不只單純的以斜體顯示文字內(nèi)容.來看看這兩個例子:方法A It took me notone,but<i>three</i> hours to shovel my driveway this morning.方法B It took me notone,but<em>three</em> hours to shovel my driveway this morning.強(qiáng)調(diào)語氣 在前面的例子里(本書撰寫時的真實(shí)情況),我的目的是使"three"這個字以強(qiáng)調(diào)語氣表現(xiàn),如同我大聲念出這個字,視覺上,方法B在大多數(shù)瀏覽器里都會以斜體顯示,而屏幕閱讀器也會適當(dāng)?shù)恼{(diào)整音色,速度或音量.只要粗體或斜體就好 必須注意的是,很多情況下只需要視覺上展示粗體,斜體的文字效果,換句話說,假設(shè)你的側(cè)邊欄里有一串鏈接列表,而你喜歡讓所有鏈接用相同的效果顯示:也就是粗體(圖6-1) 圖6-1.粗體鏈接放在側(cè)邊欄里的示例 除了視覺特色外,我們并不打算特別強(qiáng)調(diào)鏈接內(nèi)容,這里就是以CSS改變鏈接外觀顯示效果的好地方,讓他們不會被屏幕閱讀器以及其他非可視化瀏覽器特別強(qiáng)調(diào). 舉例來說,你真的想讓粗體鏈接被念得更快,更大聲,音調(diào)更高嗎?大概不會,這邊的粗體完全只是顯示效果.font-weight相當(dāng)于粗體 為了達(dá)到圖6-1的顯示效果,讓我們假設(shè)鏈接欄放在id設(shè)為sidebar的<div>中,這樣我們就能用CSS指定#sidebar之內(nèi)的鏈接要以粗體顯示: #sidebar a{ font-weight:bold; } 極度簡單,讓我覺得一提起就有些可笑,但是這的確是個幫助分離結(jié)構(gòu)與顯示效果的好方法.那是粗體! 同樣的,在思考斜體文字的時候也能應(yīng)用類似的想法,在你不想強(qiáng)調(diào)的內(nèi)容,只單純想以斜體顯示文字時,你能再度使用font-style屬性通過CSS處理這些狀況 讓我們使用相同的#sidebar作為示例,舉例來說如果你想使#sidebar里的所有鏈接顯示成斜體,那么可以這樣寫: #sidebar a{ font-style:italic; } 又是個簡單至極的概念,但是在結(jié)構(gòu)化標(biāo)記語法的領(lǐng)域里,我覺得討論這些情況十分重要--使用CSS處理央視,代替顯示效果標(biāo)簽的狀況.有些時候最簡單的解決方法也最容易被忽略.共用粗體與斜體 在打算同時用粗體和斜體顯示文字內(nèi)容的時候,我覺得必須先思考一個問題,你打算傳達(dá)什么程度的強(qiáng)調(diào)?根據(jù)這個問題的答案,我會選擇適當(dāng)?shù)臉?biāo)簽:<em>(強(qiáng)調(diào))或<strong>(更強(qiáng)烈的強(qiáng)調(diào)),然后以選擇的標(biāo)簽標(biāo)記文字. 舉例來說,以下面的例子來說,我原本打算讓"fun"同時以粗體,斜體顯示,最后我選擇用<em>來強(qiáng)調(diào)這個字. Building sites with web standards can be <em>fun</em>! 大多數(shù)瀏覽器只會以斜體來顯示這個字,要同時使用粗體和斜體,我們有幾種選擇.哦,我真的希望你同意上面這句話.普通的<span> 方法之一,是以普通的<span>包在"fun"之外,并且指定CSS規(guī)則將所有<em>之內(nèi)的<span>以粗體顯示.標(biāo)記語法看起來像這樣: Building sites with web standards can be <em><span>fun</span></em>! 而CSS看起來則像這樣: em span{ font-weight:bold; } 明顯的語義部分并不好,因?yàn)槲覀兗由狭祟~外的標(biāo)簽,但是這個方法人人仍然有用.以class強(qiáng)調(diào) 另一個方法則是為<em>標(biāo)簽指定一個class,并且以CSS加上粗體效果,標(biāo)記語法看起來像這樣: Building sites with web standards can be <em class="bold">fun</em>! 而CSS看起來則像這樣: em.bold{ font-weight:bold; } 使用<em>就能達(dá)成斜體效果(同時在語義上強(qiáng)調(diào)了文字內(nèi)容),而為它加上bold class則會使<em>之內(nèi)的文字以粗體顯示. 類似的方法也能用來修飾<strong>.這時我們能在加重強(qiáng)調(diào)某段文字的時候,設(shè)計italic class加上斜體效果,再配上<strong>原來就有的粗體效果. 標(biāo)記語言看起來像這樣: Building sites with web standards can be <strong class="italic">fun</strong>! 而CSS則是這樣: strong.italic{ font-style:italic; }
