主頁 > 知識庫 > 標(biāo)記語言——短語元素

標(biāo)記語言——短語元素

熱門標(biāo)簽:檢查注冊表項 使用U盤裝系統(tǒng) 智能手機 阿里云 網(wǎng)站建設(shè) 百度競價點擊價格的計算公式 美圖手機 硅谷的囚徒呼叫中心
點擊這里返回腳本之家 HTML教程 欄目.
上文:標(biāo)記語言——表單
原文出處 Chapter 6 <strong>,<em>與其他短語元素
在引言和前面的章節(jié)中,已經(jīng)稍微提到過語義標(biāo)簽的概念,使用標(biāo)簽為文件標(biāo)識意義,而不是單純的以標(biāo)簽設(shè)定顯示效果.設(shè)計完全使用語義標(biāo)簽的網(wǎng)頁是個不錯的點子.然而我覺得這個目標(biāo)太理想化了.當(dāng)然,沒有完全達到目標(biāo)并不代表努力過程毫無價值.至少朝著這個目標(biāo)努力很有價值.
在現(xiàn)實情況下,經(jīng)常有必要加上非語義標(biāo)簽,以便實現(xiàn)特定的設(shè)計目標(biāo),主要是因為現(xiàn)在著名的瀏覽器都無法百分之百支持標(biāo)準(zhǔn)的緣故.有些CSS規(guī)則在部分瀏覽器中無法顯示正確的效果,而這不幸的讓我們在達成某些設(shè)計目標(biāo)的過程中必須使用額外的標(biāo)簽.
有個重要的概念必須放在心上:那就是盡量嘗試撰寫語義化結(jié)構(gòu)將能帶來實際的好處.同時,對標(biāo)準(zhǔn)的支持雖然沒有達到百分之百,但也已經(jīng)越過臨界點讓我們現(xiàn)在就能使用符合網(wǎng)絡(luò)標(biāo)準(zhǔn)的方法撰寫網(wǎng)頁.有些時候必須做點犧牲,但是堅持撰寫越多的符合標(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>,但是他卻沒有進一步告訴你為什么需要這樣的替換.在不知道"為什么"的情況下,實在很難期待其他網(wǎng)頁設(shè)計者只因為聽過需要這樣做就改變他們對標(biāo)簽的使用習(xí)慣. 為什么<strong>和<em>比<b>和<i>好?
去掉<b>和<i>標(biāo)簽,替換成<strong>和<em>到底是有什么好處呢?其實這一切都是為了表達語義結(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> 代表強調(diào)
<strong> 代表更強烈的強調(diào)
所以在此討論的是兩種不同程度的強調(diào).舉例來說,就是一個單字或者短語,念的時候應(yīng)該比較大聲,音調(diào)較高,念的快些,或者是...嗯,就是比一般文字內(nèi)容更強調(diào).
W3C接著還敘述了下面這段內(nèi)容:
短語元素的展示效果隨著瀏覽器的不同,一般來說可視化瀏覽器應(yīng)該以斜體顯示<em>的文字內(nèi)容,以粗體顯示<strong>的文字內(nèi)容.語音合成軟件則能配合內(nèi)容改變合成參數(shù),像是音量,音調(diào)與速度等等.
啊哈!最后一句特別有意思,語音合成軟件(之前我們稱之為屏幕閱讀器)將會正確處理必須強調(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)的特定文字顯示的更加重要.除了粗體顯示訂單編號以外,我們也希望屏幕閱讀器也改變它們表達這段內(nèi)容的方式:提升音量,改變音調(diào)或速度.方法B能夠同時達到這兩個目的. <em>又如何?
同樣的,以<em>取代<i>,能夠同時表達重要性,而不只單純的以斜體顯示文字內(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. 強調(diào)語氣
在前面的例子里(本書撰寫時的真實情況),我的目的是使"three"這個字以強調(diào)語氣表現(xiàn),如同我大聲念出這個字,視覺上,方法B在大多數(shù)瀏覽器里都會以斜體顯示,而屏幕閱讀器也會適當(dāng)?shù)恼{(diào)整音色,速度或音量. 只要粗體或斜體就好
必須注意的是,很多情況下只需要視覺上展示粗體,斜體的文字效果,換句話說,假設(shè)你的側(cè)邊欄里有一串鏈接列表,而你喜歡讓所有鏈接用相同的效果顯示:也就是粗體(圖6-1)

圖6-1.粗體鏈接放在側(cè)邊欄里的示例
除了視覺特色外,我們并不打算特別強調(diào)鏈接內(nèi)容,這里就是以CSS改變鏈接外觀顯示效果的好地方,讓他們不會被屏幕閱讀器以及其他非可視化瀏覽器特別強調(diào).
舉例來說,你真的想讓粗體鏈接被念得更快,更大聲,音調(diào)更高嗎?大概不會,這邊的粗體完全只是顯示效果. font-weight相當(dāng)于粗體
為了達到圖6-1的顯示效果,讓我們假設(shè)鏈接欄放在id設(shè)為sidebar的<div>中,這樣我們就能用CSS指定#sidebar之內(nèi)的鏈接要以粗體顯示:
#sidebar a{
font-weight:bold;
}
極度簡單,讓我覺得一提起就有些可笑,但是這的確是個幫助分離結(jié)構(gòu)與顯示效果的好方法. 那是粗體!
同樣的,在思考斜體文字的時候也能應(yī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)容的時候,我覺得必須先思考一個問題,你打算傳達什么程度的強調(diào)?根據(jù)這個問題的答案,我會選擇適當(dāng)?shù)臉?biāo)簽:<em>(強調(diào))或<strong>(更強烈的強調(diào)),然后以選擇的標(biāo)簽標(biāo)記文字.
舉例來說,以下面的例子來說,我原本打算讓"fun"同時以粗體,斜體顯示,最后我選擇用<em>來強調(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;
}
明顯的語義部分并不好,因為我們加上了額外的標(biāo)簽,但是這個方法人人仍然有用. 以class強調(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>就能達成斜體效果(同時在語義上強調(diào)了文字內(nèi)容),而為它加上bold class則會使<em>之內(nèi)的文字以粗體顯示.
類似的方法也能用來修飾<strong>.這時我們能在加重強調(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;
}
上一頁12 3 4 5 下一頁 閱讀全文

標(biāo)簽:懷化 湖北 山南 湘潭 賀州 通遼 煙臺 黃山

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《標(biāo)記語言——短語元素》,本文關(guān)鍵詞  ;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請?zhí)峁┫嚓P(guān)信息告之我們,我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 收縮
    • 微信客服
    • 微信二維碼
    • 電話咨詢

    • 400-1100-266