4.2　描述文本

HTML5淡化了元素的修飾功能，強(qiáng)調(diào)其固有的語(yǔ)義性，對(duì)于極個(gè)別的過(guò)時(shí)的、純樣式元素，不再建議使用，如font、center、s、strike。

4.2.1　強(qiáng)調(diào)文本

strong元素表示內(nèi)容的重要性，而em元素則表示內(nèi)容的著重點(diǎn)。根據(jù)內(nèi)容需要，這兩個(gè)元素既可以單獨(dú)使用，也可以一起使用。

【示例1】在下面的代碼中既有strong元素，又有em元素。瀏覽器通常將strong文本以粗體顯示，而將em文本以斜體顯示。如果em是strong的子元素，將同時(shí)以斜體和粗體顯示文本。

    <p><strong>警告：不要接近展品<em>在任何情況下</em></strong></p>

不要使用b元素代替strong，也不要使用i元素代替em。盡管它們?cè)跒g覽器中顯示的樣式是一樣的，但它們的含義卻很不一樣。

em元素在句子中的位置會(huì)影響句子的含義。例如，“<p><em>你</em>看著我</p>”和“<p>你看著<em>我</em></p>”表達(dá)的意思是不一樣的。

【示例2】可以在標(biāo)記為strong的短語(yǔ)中再嵌套strong文本。如果這樣做，作為另一個(gè)strong的子元素的strong文本的重要程度會(huì)遞增。這種規(guī)則對(duì)嵌套在另一個(gè)em里的em文本也適用。

    <p><strong>記住密碼是<strong>111222333</strong></strong></p>

其中，111222333文本要比其他strong文本更為重要。

可以用CSS將任何文本變?yōu)榇煮w或斜體，也可以覆蓋strong和em等元素的瀏覽器默認(rèn)顯示樣式。

注意，在舊版本的HTML中，strong所表示文本的強(qiáng)調(diào)程度比em表示的文本要高。不過(guò)，在HTML5中，em是表示強(qiáng)調(diào)的唯一元素，而strong元素表示的則是重要程度。

4.2.2　標(biāo)記細(xì)則

HTML5使用small元素表示細(xì)則一類的旁注，例如，免責(zé)聲明、注意事項(xiàng)、法律限制、版權(quán)信息等。有時(shí)我們還可以用它來(lái)表示署名，或者滿足許可要求。

【示例1】small元素通常是行內(nèi)文本中的一小塊，而不是包含多個(gè)段落或其他元素的大塊文本。

一些瀏覽器會(huì)將small元素包含的文本顯示為小字號(hào)。不過(guò)，一定要在符合內(nèi)容語(yǔ)義的情況下使用該元素，而不是為了減小字號(hào)而使用。

【示例2】在下面的示例中，第一個(gè)small元素表示簡(jiǎn)短的提示聲明，第二個(gè)small元素表示包含在頁(yè)面級(jí)footer里的版權(quán)聲明，這是一種常見(jiàn)的用法。

small元素只適用于短語(yǔ)，因此不要用它標(biāo)記長(zhǎng)的法律聲明，如“使用條款”和“隱私政策”頁(yè)面。根據(jù)需要，應(yīng)該用段落或其他語(yǔ)義元素標(biāo)記這些內(nèi)容。

4.2.3　特殊格式

b和i是HTML4遺棄的兩個(gè)元素，分別表示粗體和斜體。HTML5重新啟用這兩個(gè)元素，作為其他語(yǔ)義元素都不適應(yīng)的場(chǎng)景，即作為最后備選項(xiàng)使用。

• 　b：表示出于實(shí)用目的提醒注意的文字，不傳達(dá)任何額外的重要性，也不表示其他的語(yǔ)態(tài)和語(yǔ)氣，用于如文檔摘要里的關(guān)鍵詞、評(píng)論中的產(chǎn)品名、基于文本的交互式軟件中指示操作的文字、文章導(dǎo)語(yǔ)等。
• 　i：表示不同于其他文字的文字，具有不同的語(yǔ)態(tài)或語(yǔ)氣，或其他不同于常規(guī)之處，用于如分類名稱、技術(shù)術(shù)語(yǔ)、外語(yǔ)里的慣用詞、翻譯的散文、西方文字中的船舶名稱等。

【示例】下面的示例簡(jiǎn)單演示了b和i應(yīng)用場(chǎng)景。

    <p>這是一個(gè)<b>紅</b>盒子，那是一個(gè)<b>藍(lán)</b>盒子。</p>
    <p>這塊<i class="taxonomy">瑪瑙</i>來(lái)自西亞。</p>
    <p>這篇<i>散文</i>已經(jīng)發(fā)表。</p>
    <p>There is a certain <i lang="fr">je ne sais quoi</i> in the air.</p>

b文本默認(rèn)顯示為粗體，i文本默認(rèn)顯示為斜體，可以使用CSS重置它們的樣式。

4.2.4　定義上標(biāo)和下標(biāo)

在傳統(tǒng)印刷中，上標(biāo)和下標(biāo)是很重要的排版格式。HTML5使用sup和sub來(lái)定義上標(biāo)文本和下標(biāo)文本。上標(biāo)和下標(biāo)文本比主體文本稍高或稍低。常見(jiàn)的上標(biāo)包括商標(biāo)符號(hào)、指數(shù)和腳注編號(hào)等；常見(jiàn)的下標(biāo)包括化學(xué)符號(hào)等。

【示例1】sup元素的一種用法就是表示腳注編號(hào)。根據(jù)從屬關(guān)系，將腳注放在article的footer元素里，而不是整個(gè)頁(yè)面的footer元素里。

為文章中每個(gè)腳注編號(hào)創(chuàng)建了鏈接，指向footer元素內(nèi)對(duì)應(yīng)的腳注，從而讓訪問(wèn)者更容易找到它們。同時(shí)，注意鏈接中的title屬性也提供了一些提示。

上標(biāo)是對(duì)某些外語(yǔ)縮寫(xiě)詞進(jìn)行格式化的理想方式，例如，法語(yǔ)中用Mlle表示Mademoiselle（小姐），西班牙語(yǔ)中用3^a表示tercera（第三）。此外，一些數(shù)字形式也要用到上標(biāo)，如2^nd、5^th。下標(biāo)適用于化學(xué)分子式，如H₂O。

提示：sub和sup元素會(huì)輕微地增大行高。不過(guò)使用CSS可以修復(fù)這個(gè)問(wèn)題。修復(fù)樣式代碼如下。

用戶還可以根據(jù)內(nèi)容的字號(hào)對(duì)上述樣式做一些調(diào)整，使各行行高保持一致。

【示例2】對(duì)于下面的數(shù)學(xué)解題演示的段落文本，使用格式化語(yǔ)義結(jié)構(gòu)能夠很好地解決數(shù)學(xué)公式中各種特殊格式的要求。對(duì)于機(jī)器來(lái)說(shuō)，也能夠很好地理解它們的用途，效果如圖4.1所示。

圖4.1　格式化文本的語(yǔ)義結(jié)構(gòu)效果

在上面的代碼中，使用i元素定義變量x以斜體顯示；使用sup元素定義二元一次方程中的二次方；使用b元素加粗顯示常量值；使用big元素和b元素加大加粗顯示“分解因式法”這個(gè)短語(yǔ)；使用small元素縮寫(xiě)操作謂詞“由”和“得”的字體大小；使用sub元素定義方程的兩個(gè)解的下標(biāo)。

4.2.5　定義術(shù)語(yǔ)

在HTML中定義術(shù)語(yǔ)時(shí)，可以使用dfn元素對(duì)其做語(yǔ)義上的區(qū)分。例如：

    <p><dfn id="def-internet">Internet</dfn>是一個(gè)全球互聯(lián)網(wǎng)絡(luò)系統(tǒng)，使用因特網(wǎng)協(xié)議套件（TCP/IP）為全球數(shù)十
       億用戶提供服務(wù)。</p>

通常，dfn元素默認(rèn)以斜體顯示。由dfn標(biāo)記的術(shù)語(yǔ)與其定義的距離遠(yuǎn)近相當(dāng)重要。如HTML5規(guī)范所述：“如果一個(gè)段落、描述列表或區(qū)塊是某dfn元素距離最近的祖先，那么該段落、描述列表或區(qū)塊必須包含該術(shù)語(yǔ)的定義。”簡(jiǎn)言之，dfn元素及其定義必須挨在一起，否則便是錯(cuò)誤的用法。

【示例】可以在描述列表（dl元素）中使用dfn元素。

僅在定義術(shù)語(yǔ)時(shí)使用dfn元素，而不能為了讓文字以斜體顯示就使用該元素。使用CSS可以將任何文字變?yōu)樾斌w。

dfn元素可以在適當(dāng)?shù)那闆r下包住其他的短語(yǔ)元素，如abbr。例如：

    <p><dfn><abbr title="Junior">Jr.</abbr></dfn>他兒子的名字和他父親的名字一樣嗎？ </p>

如果在dfn元素中添加可選的title屬性，其值應(yīng)與dfn術(shù)語(yǔ)一致。如果只在dfn元素里嵌套一個(gè)單獨(dú)的abbr元素，dfn本身沒(méi)有文本，那么可選的title只能出現(xiàn)在abbr里。

4.2.6　標(biāo)記代碼

使用code元素可以標(biāo)記代碼或文件名。如果代碼中包含“<”或“>”字符，應(yīng)使用<和>表示。如果直接使用“<”或“>”字符，將被視為HTML源代碼處理。

【示例】本例使用code顯示一塊代碼，為了格式化顯示，這里同時(shí)使用pre元素包圍code文本。

【拓展】

除了code外，其他與計(jì)算機(jī)相關(guān)的元素簡(jiǎn)要說(shuō)明如下。

• 　kbd：用戶輸入指示。例如：

與code一樣，kbd默認(rèn)以等寬字體顯示。

• 　samp：程序或系統(tǒng)的示例輸出。例如：

    <p>一旦在瀏覽器中預(yù)覽，則顯示<samp>Hello,World</samp></p>

samp默認(rèn)以等寬字體顯示。

• 　var：變量或占位符的值。例如：

    <p>愛(ài)因斯坦稱為是最好的<var>E</var>=<var>m</var><var>c</var><sup>2</sup>.</p>

var也可以作為占位符的值，例如，在填詞游戲的答題紙上可以這樣定義：<var>adjective</var>,<var>verb</var>。

var默認(rèn)以斜體顯示。

注意，可以在HTML5頁(yè)面中使用math等MathML元素表示高級(jí)的數(shù)學(xué)相關(guān)的標(biāo)記。

4.2.7　預(yù)定義格式

預(yù)定義文本就是可以保持文本固有的換行和空格。使用pre元素可以定義預(yù)定義文本。

【示例】下面的示例使用pre顯示CSS樣式代碼，顯示效果如圖4.2所示。

預(yù)定義文本默認(rèn)以等寬字體顯示，可以使用CSS改變字體樣式。如果要顯示包含HTML元素的內(nèi)容，應(yīng)將包圍元素名稱的“<”和“>”分別改為其對(duì)應(yīng)的字符實(shí)體<和>。

圖4.2　定制pre預(yù)定義格式效果

pre默認(rèn)為塊顯示，即從新一行開(kāi)始顯示，瀏覽器通常會(huì)對(duì)pre文本關(guān)閉自動(dòng)換行，因此，如果包含很長(zhǎng)的單詞，就會(huì)影響頁(yè)面的布局，或產(chǎn)生橫向滾動(dòng)條。使用下面的CSS樣式可以對(duì)pre包含內(nèi)容打開(kāi)自動(dòng)換行。

    pre { white-space: pre-wrap;}

4.2.8　定義縮寫(xiě)詞

使用abbr元素可以標(biāo)記縮寫(xiě)詞并解釋其含義，還可以使用abbr的title屬性提供縮寫(xiě)詞的全稱。提示，也可以將全稱放在縮寫(xiě)詞后面的括號(hào)里，或混用這兩種方式。如果使用復(fù)數(shù)形式的縮寫(xiě)詞，全稱也要使用復(fù)數(shù)形式。

【示例】部分瀏覽器對(duì)于設(shè)置了title的abbr文本會(huì)顯示為下畫(huà)虛線樣式，如果看不到，可以為abbr的包含框添加line-height樣式。本例使用CSS主要設(shè)計(jì)下畫(huà)虛線樣式，以便兼容所有瀏覽器。

    <style>
    abbr[title] { border-bottom: 1px dotted #000; }
    </style>
    <p><abbr title=" HyperText Markup Language">HTML</abbr>是一門(mén)標(biāo)識(shí)語(yǔ)言。</p>

當(dāng)訪問(wèn)者將鼠標(biāo)移至abbr上，瀏覽器都會(huì)以提示框的形式顯示title文本，類似于a的title。

abbr使用場(chǎng)景：僅在縮寫(xiě)詞第一次在視圖中出現(xiàn)時(shí)使用。使用括號(hào)提供縮寫(xiě)詞的全稱是解釋縮寫(xiě)詞最直接的方式，能夠讓訪問(wèn)者更直觀地看到這些內(nèi)容。例如，使用智能手機(jī)和平板電腦等觸摸屏設(shè)備的用戶可能無(wú)法移到abbr元素上查看title的提示框。因此，如果要提供縮寫(xiě)詞的全稱，應(yīng)該盡量將它放在括號(hào)里。

4.2.9　標(biāo)注編輯或不用文本

HTML5使用下面兩個(gè)元素來(lái)標(biāo)記內(nèi)容編輯的操作。

• 　ins：已添加的內(nèi)容。
• 　del：已刪除的內(nèi)容。

這兩個(gè)元素可以單獨(dú)使用，也可以搭配使用。

【示例1】在下面的列表中，上一次發(fā)布之后，又增加了一個(gè)條目，同時(shí)根據(jù)del元素的標(biāo)注，移除了一些條目。使用ins元素的時(shí)候不一定要使用del元素，反之亦然。瀏覽器通常會(huì)讓它們看起來(lái)與普通文本不一樣。同時(shí)，s元素用于標(biāo)注不再準(zhǔn)確或不再相關(guān)的內(nèi)容（一般不用于標(biāo)注編輯內(nèi)容）。

瀏覽器通常對(duì)已刪除的文本加上刪除線，對(duì)插入的文本加上下畫(huà)線。可以用CSS修改這些樣式。

【示例2】del和ins是少有的既可以包圍短語(yǔ)內(nèi)容（行內(nèi)元素），又可以包圍塊級(jí)內(nèi)容的元素。

del和ins元素都支持兩個(gè)屬性：cite和datetime。cite屬性（區(qū)別于cite元素）用于提供一個(gè)URL，指向說(shuō)明編輯原因的頁(yè)面。

【示例3】下面的示例演示了del和ins兩個(gè)元素的顯示效果，如圖4.3所示。

圖4.3　插入和刪除信息的語(yǔ)義結(jié)構(gòu)效果

datetime屬性提供編輯的時(shí)間。瀏覽器不會(huì)將這兩個(gè)屬性的值顯示出來(lái)，因此它們的使用并不廣泛。不過(guò)，應(yīng)該盡量包含它們，從而為內(nèi)容提供一些背景信息。它們的值可以通過(guò)JavaScript或分析頁(yè)面的程序提取出來(lái)。

4.2.10　指明引用或參考

使用cite元素可以標(biāo)識(shí)引用或參考的對(duì)象，如圖書(shū)、歌曲、電影、演唱會(huì)或音樂(lè)會(huì)、規(guī)范、報(bào)紙或法律文件等名稱。

【示例】在下面的示例中，使用cite元素標(biāo)記圖書(shū)名稱。

    <p>他正在看<cite>紅樓夢(mèng)</cite></p>

HTML4允許使用cite引用人名，HTML5不再建議使用。例如，很多網(wǎng)站常用cite在博客或文章中引用作者或評(píng)論者的名字。

    <p><cite>魯迅</cite>說(shuō)過(guò)：<q>地上本沒(méi)有路，走的人多了就成了路。</q></p>

4.2.11　引述文本

blockquote元素表示單獨(dú)存在的引述（通常很長(zhǎng)），它默認(rèn)顯示在新的一行。而q元素則用于短的引述，如句子里面的引述。例如：

如果要添加署名，署名應(yīng)該放在blockquote元素外面。可以把署名放在p元素里面，不過(guò)使用figure和figcaption元素可以更好地將引述文本與其來(lái)源關(guān)聯(lián)起來(lái)。如果blockquote元素中僅包含一個(gè)單獨(dú)的段落或短語(yǔ)，可以不必將其包在p元素中再放入blockquote元素。

瀏覽器應(yīng)對(duì)q元素中的文本自動(dòng)加上特定語(yǔ)言的引號(hào)，對(duì)blockquote元素文本進(jìn)行縮進(jìn)，cite元素屬性的值則不會(huì)顯示出來(lái)。不過(guò)，所有的瀏覽器都支持cite元素，通常對(duì)其中的文本以斜體顯示。

【示例】下面這個(gè)結(jié)構(gòu)綜合展示了cite、q和blockquote元素以及cite引文屬性的用法，演示效果如圖4.4所示。

圖4.4　引用信息的語(yǔ)義結(jié)構(gòu)效果

4.2.12　換行顯示

使用br元素可以實(shí)現(xiàn)文本換行顯示。要確保使用br元素是最后的選擇，因?yàn)樵撛貙⒈憩F(xiàn)樣式帶入了HTML，而不是讓所有的呈現(xiàn)樣式都交由CSS控制。例如，不要使用br元素模擬段落之間的距離。相反，應(yīng)該用p標(biāo)記兩個(gè)段落并通過(guò)CSS的margin屬性規(guī)定兩段之間的距離。

【示例】對(duì)于詩(shī)歌、街道地址等應(yīng)該緊挨著出現(xiàn)的短行，都適合用br元素。

    <p>北京市 <br />
    海淀區(qū) <br />
    北京大學(xué) <br />
    32號(hào)樓 </p>

每個(gè)br元素強(qiáng)制讓接下來(lái)的內(nèi)容在新的一行顯示。如果沒(méi)有br元素，整個(gè)地址都會(huì)顯示在同一行。可以使用CSS控制段落中的行間距以及段落之間的距離。

4.2.13　修飾文本

span是沒(méi)有任何語(yǔ)義的行內(nèi)元素，適合包圍短語(yǔ)、流動(dòng)對(duì)象等內(nèi)容，而div適合包含塊級(jí)內(nèi)容。如果希望為行內(nèi)對(duì)象應(yīng)用下面項(xiàng)目，則可以考慮使用span元素。

• 　HTML5屬性，如class、dir、id、lang、title等。
• 　CSS樣式。
• 　JavaScript腳本。

【示例】下面的示例使用span元素為行內(nèi)文本“HTML”應(yīng)用CSS樣式，設(shè)計(jì)其顯示為紅色。

    <style type="text/css">
    .red { color: red; }
    </style>
    <p><span class="red">HTML</span>是通向WEB技術(shù)世界的鑰匙。</p>

在上面的示例中，想對(duì)一小塊文字指定不同的顏色，但從句子的上下文看，沒(méi)有一個(gè)語(yǔ)義上適合的HTML元素，因此額外添加了span元素，定義一個(gè)類樣式。

span沒(méi)有語(yǔ)義，也沒(méi)有默認(rèn)格式，用戶可以使用CSS添加類樣式。可以對(duì)一個(gè)span元素同時(shí)添加class和id屬性，兩者區(qū)別：class用于一組元素，而id用于頁(yè)面中單獨(dú)的、唯一的元素。在HTML5中，沒(méi)有提供合適的語(yǔ)義化元素時(shí)，微格式經(jīng)常使用span為內(nèi)容添加語(yǔ)義化類名，以填補(bǔ)語(yǔ)義上的空白。

4.2.14　非文本注解

在HTML4中，u為純樣式元素，用來(lái)為文本添加下畫(huà)線。在HTML5中，u元素為一塊文字添加明顯的非文本注解，如在中文中將文本標(biāo)為專有名詞（即中文的專名號(hào)，用于表示人名、地名、朝代名等專名），或者標(biāo)明文本拼寫(xiě)有誤。

【示例】下面的示例演示了u的應(yīng)用。

    <p>When they <u class="spelling"> recieved</u> the package, they put it with <u class="spelling">there</u></p>

class是可選的，u文本默認(rèn)仍以下畫(huà)線顯示，通過(guò)title屬性可以為該元素包含的內(nèi)容添加注釋。

只有當(dāng)cite、em、mark等其他語(yǔ)義元素不適用的情況下使用u元素。同時(shí)，建議重置u文本的樣式，以免與同樣默認(rèn)添加下畫(huà)線的鏈接文本混淆。