3.2　描述性文本

在HTML4中，有一些側重描述的文本標簽，用戶習慣用它們來設置文字以特殊的方式顯示，如粗體、斜體和上下標等。在HTML5中，淡化了標簽的修飾功能，強調其固有語義性，對于極個別過時的純樣式標簽，不再建議使用，如<basefont>、<font>、<center>、<s>、<strike>、<u>等。

3.2.1　定義強調文本

視頻講解

<em>標簽用于強調文本，其包含的文字默認顯示為斜體；<strong>標簽也用于強調文本，但它強調的程度更強一些，其包含文字通常以粗體進行顯示。

【示例】對于下面這段信息，分別使用<strong>和<em>標簽來強調部分詞語，所顯示的效果如圖3.4所示。其中em強調信息以斜體顯示，而strong強調的信息以粗體顯示。

    <p>沒有<em>最好</em>只有<strong>更好</strong>!</p>

圖3.4　強調信息的語義結構效果

3.2.2　定義格式文本

視頻講解

文本格式多種多樣，如粗體、斜體、大號、小號、下劃線、預定義、高亮、反白等效果。為了排版需要，HTML5繼續支持HTML4中部分純格式標簽，具體說明如下：

　<b>：定義粗體文本。與<strong>標簽的默認效果相似。

　<i>：定義斜體文本。與<em>標簽的默認效果相似。

　<big>：定義大號字體。

　<small>：定義小號字體。

　<sup>：定義上標文本。以當前文本流中字符高度的一半顯示，但是與當前文本流中文字的字體和字號都是一樣的。

　<sub>：定義下標文本。

【示例】對于下面這個數學解題演示的段落文本，使用格式化語義結構能夠很好地解決數學公式中各種特殊格式的要求。對于機器來說，也能夠很好地理解它們的用途，效果如圖3.5所示。

圖3.5　格式化文本的語義結構效果

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

3.2.3　定義輸出文本

視頻講解

HTML元素提供了很多輸出信息的標簽，如下所示。

　<code>：表示代碼字體，即顯示源代碼。

　<pre>：表示預定義格式的源代碼，即保留源代碼顯示中的空格大小。

　<tt>：表示打印機字體。

　<kbd>：表示鍵盤字體。

　<dfn>：表示定義的術語。

　<var>：表示變量字體。

　<samp>：表示代碼范例。

【示例】下面這個示例中演示了每種輸出信息的演示效果，如圖3.6所示。雖然它們的顯示效果不同，但是對于機器來說其語義是比較清晰的。

圖3.6　輸出信息的語義結構效果

3.2.4　定義縮寫文本

視頻講解

<abbr>標簽可以定義簡稱或縮寫，通過對縮寫進行標記，能夠為瀏覽器、拼寫檢查和搜索引擎提供有用的信息。例如，dfn是Defines a Definition Term的簡稱，kbd是Keyboard Text的簡稱，samp是Sample的簡稱，var是Variable的簡稱。

<acronym>標簽可以定義首字母縮寫。例如，CSS是Cascading Style Sheets短語的首字母縮寫，HTML是Hypertext Markup Language短語的首字母縮寫等。

【示例1】下面示例比較了abbr和acronym元素在文檔中的應用。

   <p><abbr title="Abbreviation">abbr</abbr>元素最初是在HTML3.0中引入的，表示它所包含的文本是一個更
長的單詞或短語的縮寫形式。瀏覽器可能會根據這個信息改變對這些文本的顯示方式，或者用其他文本代替。
</p>
   <p><acronym title="Hypertext Markup Language">HTML</acronym>是目前網絡上應用最為廣泛的語言，也是
構成網頁文檔的主要語言。</p>

【示例2】IE6及其以下版本的瀏覽器不支持abbr元素，如果要實現在IE低版本瀏覽器中正確顯示，不妨在abbr元素外包含一個span元素。

    <p><span title="Abbreviation"><abbr title="Abbreviation">abbr</abbr></span>元素最初是在HTML3.0中引入
的，表示它所包含的文本是一個更長的單詞或短語的縮寫形式。瀏覽器可能會根據這個信息改變對這些文本的顯
示方式，或者用其他文本代替。</p>

3.2.5　定義插入和刪除文本

<ins>標簽定義插入到文檔中的文本，<del>標簽定義文檔中已被刪除的文本。一般可以配合使用這兩個標簽，來描述文檔中的更新和修正。

<ins>和<del>標簽都支持下面兩個專用屬性，簡單說明如下：

　cite：指向另外一個文檔的URL，該文檔可解釋文本被刪除的原因。

　datetime：定義文本被刪除的日期和時間，格式為YYYYMMDD。

【示例】下面演示示例的顯示效果如圖3.7所示。

    <p> <cite>因為懂得，所以慈悲</cite>。<ins cite="http://news.sanwen8.cn/a/2014-07-13/9518.html"
datetime="2014-8-1">這是張愛玲對胡蘭成說的話</ins>。</p>
    <p> <cite>笑，全世界便與你同笑；哭，你便獨自哭</cite>。<del datetime="2014-8-8">出自冰心的《遙寄印
度哲人泰戈爾》</del>，<ins cite="http://news.sanwen8.cn/a/2014-07-13/9518.html" datetime="2014-8-1">出自張愛
玲的小說《花凋》</ins> </p>

圖3.7　插入和刪除信息的語義結構效果

3.2.6　定義文本方向

視頻講解

如果在HTML頁面中混合了從左到右書寫的字符（如大多數語言所用的拉丁字符）和從右到左書寫的字符（如阿拉伯語或希伯來語字符），就可能要用到bdi和bdo元素。

要使用bdo，必須包含dir屬性，取值包括ltr（由左至右）或rtl（由右至左），指定希望呈現的顯示方向。

bdo適用于段落里的短語或句子，不能用它包圍多個段落。bdi元素是HTML5中新加的元素，用于內容的方向未知的情況，不必包含dir屬性，因為默認已設為自動判斷。

【示例】下面示例使用<bdo>標簽讓唐詩反向顯示。

    <bdo dir="rtl">床前明月光，疑是地上霜。舉頭望明月，低頭思故鄉。</bdo>

上面示例演示效果如圖3.8所示。目前，只有Firefox和Chrome瀏覽器支持<bdi>標簽。

圖3.8　定義反向顯示文本