主頁(yè) > 知識(shí)庫(kù) > 標(biāo)記語(yǔ)言——短語(yǔ)元素

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

熱門(mén)標(biāo)簽:西安金倫外呼系統(tǒng) 高德地圖標(biāo)注廁所 地圖標(biāo)注沿海城市房?jī)r(jià) 智能語(yǔ)音電銷(xiāo)機(jī)器人客戶端 江西ai電銷(xiāo)機(jī)器人如何 威海語(yǔ)音外呼系統(tǒng)平臺(tái) 中國(guó)地圖標(biāo)注城市的 地圖標(biāo)注員工作內(nèi)容 通遼地圖標(biāo)注app
點(diǎn)擊這里返回腳本之家 HTML教程 欄目.
上文:標(biāo)記語(yǔ)言——表單
原文出處 Chapter 6 <strong>,<em>與其他短語(yǔ)元素
在引言和前面的章節(jié)中,已經(jīng)稍微提到過(guò)語(yǔ)義標(biāo)簽的概念,使用標(biāo)簽為文件標(biāo)識(shí)意義,而不是單純的以標(biāo)簽設(shè)定顯示效果.設(shè)計(jì)完全使用語(yǔ)義標(biāo)簽的網(wǎng)頁(yè)是個(gè)不錯(cuò)的點(diǎn)子.然而我覺(jué)得這個(gè)目標(biāo)太理想化了.當(dāng)然,沒(méi)有完全達(dá)到目標(biāo)并不代表努力過(guò)程毫無(wú)價(jià)值.至少朝著這個(gè)目標(biāo)努力很有價(jià)值.
在現(xiàn)實(shí)情況下,經(jīng)常有必要加上非語(yǔ)義標(biāo)簽,以便實(shí)現(xiàn)特定的設(shè)計(jì)目標(biāo),主要是因?yàn)楝F(xiàn)在著名的瀏覽器都無(wú)法百分之百支持標(biāo)準(zhǔn)的緣故.有些CSS規(guī)則在部分瀏覽器中無(wú)法顯示正確的效果,而這不幸的讓我們?cè)谶_(dá)成某些設(shè)計(jì)目標(biāo)的過(guò)程中必須使用額外的標(biāo)簽.
有個(gè)重要的概念必須放在心上:那就是盡量嘗試撰寫(xiě)語(yǔ)義化結(jié)構(gòu)將能帶來(lái)實(shí)際的好處.同時(shí),對(duì)標(biāo)準(zhǔn)的支持雖然沒(méi)有達(dá)到百分之百,但也已經(jīng)越過(guò)臨界點(diǎn)讓我們現(xiàn)在就能使用符合網(wǎng)絡(luò)標(biāo)準(zhǔn)的方法撰寫(xiě)網(wǎng)頁(yè).有些時(shí)候必須做點(diǎn)犧牲,但是堅(jiān)持撰寫(xiě)越多的符合標(biāo)準(zhǔn)的標(biāo)簽,未來(lái)的工作就會(huì)越輕松. 顯示效果 VS 結(jié)構(gòu)標(biāo)簽
本章節(jié)將會(huì)討論顯示效果與結(jié)構(gòu)標(biāo)簽的不同,更確切的說(shuō),是討論使用<strong>替換<b>,以及使用<em>替換<i>的差異.在本章稍后,我們也會(huì)討論幾個(gè)其他短語(yǔ)元素以及它們?cè)诜蠘?biāo)準(zhǔn),結(jié)構(gòu)化標(biāo)簽語(yǔ)法內(nèi)的重要性.
你或許聽(tīng)說(shuō)過(guò)某些人建議在需要粗體文字時(shí)要用<strong>替換<b>,但是他卻沒(méi)有進(jìn)一步告訴你為什么需要這樣的替換.在不知道"為什么"的情況下,實(shí)在很難期待其他網(wǎng)頁(yè)設(shè)計(jì)者只因?yàn)槁?tīng)過(guò)需要這樣做就改變他們對(duì)標(biāo)簽的使用習(xí)慣. 為什么<strong>和<em>比<b>和<i>好?
去掉<b>和<i>標(biāo)簽,替換成<strong>和<em>到底是有什么好處呢?其實(shí)這一切都是為了表達(dá)語(yǔ)義結(jié)構(gòu),而不是為了只是顯示效果,本書(shū)的所有示例也都努力遵循這個(gè)概念. 看看專(zhuān)家怎么說(shuō)
首先,來(lái)看看W3C在HTML4.01的短語(yǔ)元素規(guī)范里是怎么敘述<strong>和<em>的(http://www.w3.org/TR/html4/struct/text.html#h-9.2.1):
短語(yǔ)元素能在文字片段之內(nèi)加上結(jié)構(gòu)信息,常見(jiàn)的短語(yǔ)元素意義如下:
<em> 代表強(qiáng)調(diào)
<strong> 代表更強(qiáng)烈的強(qiáng)調(diào)
所以在此討論的是兩種不同程度的強(qiáng)調(diào).舉例來(lái)說(shuō),就是一個(gè)單字或者短語(yǔ),念的時(shí)候應(yīng)該比較大聲,音調(diào)較高,念的快些,或者是...嗯,就是比一般文字內(nèi)容更強(qiáng)調(diào).
W3C接著還敘述了下面這段內(nèi)容:
短語(yǔ)元素的展示效果隨著瀏覽器的不同,一般來(lái)說(shuō)可視化瀏覽器應(yīng)該以斜體顯示<em>的文字內(nèi)容,以粗體顯示<strong>的文字內(nèi)容.語(yǔ)音合成軟件則能配合內(nèi)容改變合成參數(shù),像是音量,音調(diào)與速度等等.
啊哈!最后一句特別有意思,語(yǔ)音合成軟件(之前我們稱(chēng)之為屏幕閱讀器)將會(huì)正確處理必須強(qiáng)調(diào)的文字,這的確是件好事.
相對(duì)之下,<b>或是<i>只是單純的顯示效果標(biāo)簽.如果我們的目標(biāo)是將結(jié)構(gòu)與顯示效果分離的話,使用<strong>和<em>就是正確的選擇,單純想要顯示粗體,斜體文字的時(shí)候用css就好了.本章稍后會(huì)討論更多例子.
接著看兩個(gè)標(biāo)識(shí)示例,幫助我們了解它們的差異. 方法A
your order number for future reference is: <b>6474-82071</b>. 方法B
your order number for future reference is: <strong>6474-82071</strong>. 又粗又美麗
這個(gè)情況是使用<strong>比<b>更適合的完美例子,我們打算讓句子內(nèi)的特定文字顯示的更加重要.除了粗體顯示訂單編號(hào)以外,我們也希望屏幕閱讀器也改變它們表達(dá)這段內(nèi)容的方式:提升音量,改變音調(diào)或速度.方法B能夠同時(shí)達(dá)到這兩個(gè)目的. <em>又如何?
同樣的,以<em>取代<i>,能夠同時(shí)表達(dá)重要性,而不只單純的以斜體顯示文字內(nèi)容.來(lái)看看這兩個(gè)例子: 方法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)語(yǔ)氣
在前面的例子里(本書(shū)撰寫(xiě)時(shí)的真實(shí)情況),我的目的是使"three"這個(gè)字以強(qiáng)調(diào)語(yǔ)氣表現(xiàn),如同我大聲念出這個(gè)字,視覺(jué)上,方法B在大多數(shù)瀏覽器里都會(huì)以斜體顯示,而屏幕閱讀器也會(huì)適當(dāng)?shù)恼{(diào)整音色,速度或音量. 只要粗體或斜體就好
必須注意的是,很多情況下只需要視覺(jué)上展示粗體,斜體的文字效果,換句話說(shuō),假設(shè)你的側(cè)邊欄里有一串鏈接列表,而你喜歡讓所有鏈接用相同的效果顯示:也就是粗體(圖6-1)

圖6-1.粗體鏈接放在側(cè)邊欄里的示例
除了視覺(jué)特色外,我們并不打算特別強(qiáng)調(diào)鏈接內(nèi)容,這里就是以CSS改變鏈接外觀顯示效果的好地方,讓他們不會(huì)被屏幕閱讀器以及其他非可視化瀏覽器特別強(qiáng)調(diào).
舉例來(lái)說(shuō),你真的想讓粗體鏈接被念得更快,更大聲,音調(diào)更高嗎?大概不會(huì),這邊的粗體完全只是顯示效果. font-weight相當(dāng)于粗體
為了達(dá)到圖6-1的顯示效果,讓我們假設(shè)鏈接欄放在id設(shè)為sidebar的<div>中,這樣我們就能用CSS指定#sidebar之內(nèi)的鏈接要以粗體顯示:
#sidebar a{
font-weight:bold;
}
極度簡(jiǎn)單,讓我覺(jué)得一提起就有些可笑,但是這的確是個(gè)幫助分離結(jié)構(gòu)與顯示效果的好方法. 那是粗體!
同樣的,在思考斜體文字的時(shí)候也能應(yīng)用類(lèi)似的想法,在你不想強(qiáng)調(diào)的內(nèi)容,只單純想以斜體顯示文字時(shí),你能再度使用font-style屬性通過(guò)CSS處理這些狀況
讓我們使用相同的#sidebar作為示例,舉例來(lái)說(shuō)如果你想使#sidebar里的所有鏈接顯示成斜體,那么可以這樣寫(xiě):
#sidebar a{
font-style:italic;
}
又是個(gè)簡(jiǎn)單至極的概念,但是在結(jié)構(gòu)化標(biāo)記語(yǔ)法的領(lǐng)域里,我覺(jué)得討論這些情況十分重要--使用CSS處理央視,代替顯示效果標(biāo)簽的狀況.有些時(shí)候最簡(jiǎn)單的解決方法也最容易被忽略. 共用粗體與斜體
在打算同時(shí)用粗體和斜體顯示文字內(nèi)容的時(shí)候,我覺(jué)得必須先思考一個(gè)問(wèn)題,你打算傳達(dá)什么程度的強(qiáng)調(diào)?根據(jù)這個(gè)問(wèn)題的答案,我會(huì)選擇適當(dāng)?shù)臉?biāo)簽:<em>(強(qiáng)調(diào))或<strong>(更強(qiáng)烈的強(qiáng)調(diào)),然后以選擇的標(biāo)簽標(biāo)記文字.
舉例來(lái)說(shuō),以下面的例子來(lái)說(shuō),我原本打算讓"fun"同時(shí)以粗體,斜體顯示,最后我選擇用<em>來(lái)強(qiáng)調(diào)這個(gè)字.
Building sites with web standards can be <em>fun</em>!
大多數(shù)瀏覽器只會(huì)以斜體來(lái)顯示這個(gè)字,要同時(shí)使用粗體和斜體,我們有幾種選擇.哦,我真的希望你同意上面這句話. 普通的<span>
方法之一,是以普通的<span>包在"fun"之外,并且指定CSS規(guī)則將所有<em>之內(nèi)的<span>以粗體顯示.標(biāo)記語(yǔ)法看起來(lái)像這樣:
Building sites with web standards can be <em><span>fun</span></em>!
而CSS看起來(lái)則像這樣:
em span{
font-weight:bold;
}
明顯的語(yǔ)義部分并不好,因?yàn)槲覀兗由狭祟~外的標(biāo)簽,但是這個(gè)方法人人仍然有用. 以class強(qiáng)調(diào)
另一個(gè)方法則是為<em>標(biāo)簽指定一個(gè)class,并且以CSS加上粗體效果,標(biāo)記語(yǔ)法看起來(lái)像這樣:
Building sites with web standards can be <em class="bold">fun</em>!
而CSS看起來(lái)則像這樣:
em.bold{
font-weight:bold;
}
使用<em>就能達(dá)成斜體效果(同時(shí)在語(yǔ)義上強(qiáng)調(diào)了文字內(nèi)容),而為它加上bold class則會(huì)使<em>之內(nèi)的文字以粗體顯示.
類(lèi)似的方法也能用來(lái)修飾<strong>.這時(shí)我們能在加重強(qiáng)調(diào)某段文字的時(shí)候,設(shè)計(jì)italic class加上斜體效果,再配上<strong>原來(lái)就有的粗體效果.
標(biāo)記語(yǔ)言看起來(lái)像這樣:
Building sites with web standards can be <strong class="italic">fun</strong>!
而CSS則是這樣:
strong.italic{
font-style:italic;
}
上一頁(yè)12 3 4 5 下一頁(yè) 閱讀全文

標(biāo)簽:河池 崇左 北海 青海 阜陽(yáng) 晉中 眉山 營(yíng)口

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《標(biāo)記語(yǔ)言——短語(yǔ)元素》,本文關(guān)鍵詞  標(biāo)記,語(yǔ)言,短語(yǔ),元素,標(biāo)記,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無(wú)關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《標(biāo)記語(yǔ)言——短語(yǔ)元素》相關(guān)的同類(lèi)信息!
  • 本頁(yè)收集關(guān)于標(biāo)記語(yǔ)言——短語(yǔ)元素的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章