# 第 3 章 文本元素 學習要點： 1.文本元素總匯 2.文本元素解析 主講教師：李炎恢 本章主要探討 HTML5?中的文本元素，所謂文本元素，就是將一段文本設置成相匹配的結構和含義。 **一．文本元素總匯** HTML5 規范指出：使用元素應該完全從元素的語義出發。但是由于歷史遺留及用戶至上的原則，這種語義會寬松許多。 | 元素名稱 | 說明 | | --- | --- | | a | 生成超鏈接 | | br | 強制換行 | | wbr | 可安全換行 | | b | 標記一段文字但不強調 | | strong | 表示重要 | | i | 表示外文或科學術語 | | em | 表示強調 | | code | 表示計算機代碼 | | var | 表示程序輸出 | | samp | 表示變量 | | kdb | 表示用戶輸入 | | abbr | 表示縮寫 | | cite | 表示其他作品的標題 | | del | 表示被刪除的文字 | | s | 表示文字已不再確認 | | dfn | 表示術語定義 | | mark | 表示與另一段上下文有關的內容 | | q | 表示引自他處的內容 | | rp | 與 ruby?元素結合使用，標記括號 | | rt | 與 ruby?元素結合使用，標記括號 | | ruby | 表示位于表意文字上方或右方的注音符號 | | bdo | 控制文字的方向 | | small | 表示小號字體內容 | | sub | 表示下標字體 | | sup | 表示上標字體 | | time | 表示時間或日期 | | u | 標記一段文字但不強調 | | span | 通用元素，沒有任何語義。一般配合 CSS?修飾。 | 從上面這張表格中，我們發現文本元素還是非常多的。但實際上，在現實應用中，真正常用的也就是那么幾個，絕大部分是針對英文的。 **二．文本元素解析** 1.&lt;b&gt;表示關鍵字和產品名稱 ``` <b>HTML5</b> ``` 解釋：&lt;b&gt;元素實際作用就是加粗。從語義上來看，就是標記一段文字，但并不是特別強調或重要性。比如：一段文本中的某些關鍵字或者產品的名稱。 2.&lt;strong&gt;表示重要的文字 ``` <strong>HTML5</strong> ``` 解釋：&lt;strong&gt;元素實際作用和&lt;b&gt;一樣，就是加粗。從語義上來看，就是強調一段重要的文本。 3.&lt;br&gt;強制換行、&lt;wbr&gt;安全換行 ``` <br> Thisabc<wbr>dkedkslakdj<wbr>fkdlsakd is apple. ``` 解釋：在任意文本位置鍵入&lt;br&gt;都會被換行，而在英文單詞過長時使用&lt;wbr&gt;會根據瀏覽器的寬度適當的裁切換行。 4.&lt;i&gt;表示外文詞匯或科技術語 ``` <i>HTML5</i> ``` 解釋：&lt;i&gt;元素實際作用就是傾斜。從語義上來看，表示區分周圍內容，并不是特別強調或重要性。 5.&lt;em&gt;加以強調 ``` <em>HTML5</em> ``` 解釋：&lt;em&gt;元素實際作用和&lt;i&gt;一樣，就是傾斜；從語義上來看，表示對一段文本的強調。 6.&lt;s&gt;表示不準確或校正 ``` <s>HTML5</s> ``` 解釋：&lt;s&gt;元素實際作用就是刪除線；從語義上來看，表示不準確的刪除。 7.&lt;del&gt;表示刪除文字 ``` <del>HTML5</del> ``` 解釋：&lt;del&gt;元素實際作用和&lt;s&gt;一樣，就是刪除線；從語義上來看，表示刪除相關文字。 8.&lt;u&gt;表示給文字加上下劃線 ``` <u>HTML5</u> ``` 解釋：&lt;u&gt;元素實際作用就是加一條下劃線；從語義上來看，并不強調此段文本。 9.&lt;ins&gt;添加一段文本 ``` <ins>HTML5</ins> ``` 解釋：&lt;ins&gt;元素實際作用和&lt;u&gt;一樣，加一條下劃線；從語義上來看，是添加一段文本，起到強調的作用。 10.&lt;small&gt;添加小號字體 ``` <small>HTML5</small> ``` 解釋：&lt;small&gt;元素實際作用就是將文本放小一號。從語義上來看，用于免責聲明和澄清聲明。 11.&lt;sub&gt;&lt;sup&gt;添加上標和下標 ``` <sub>5</sub> <sup>5</sup> ``` 解釋：&lt;sub&gt;和&lt;sup&gt;元素實際作用就是數學的上標和下標。語義也是如此。 12.&lt;code&gt;等表示輸入和輸出 ``` <code>HTML5</code> <var>HTML5</var> <samp>HTML5</samp> <kdb>HTML5</kdb> ``` 解釋：&lt;code&gt;表示計算機代碼片段；&lt;var&gt;表示編程語言中的變量；&lt;samp&gt;表示程序或計算機的輸出；&lt;kdb&gt;表示用戶的輸入。由于這屬于英文范疇的，必須將 lang="en"英語才能體現效果。 13.&lt;abbr&gt;表示縮寫 ``` <abbr>HTML5</abbr> ``` 解釋：&lt;abbr&gt;元素沒有實際作用；從語義上看，是一段文本的縮寫。 14.&lt;dfn&gt;表示定義術語 ``` <dfn>HTML5</dfn> ``` 解釋：&lt;dfn&gt;元素就是一般性的傾斜；從語義上看，表示解釋一個詞或短語的一段文本。 15.&lt;q&gt;引用來自他處的內容 ``` <q>HTML5</q> ``` 解釋：&lt;q&gt;元素實際作用就是加了一對雙引號。從語義上來看，表示引用來自其他地方的內容。 16.&lt;cite&gt;引用其他作品的標題 ``` <cite>HTML5</cite> ``` 解釋：&lt;cite&gt;元素實際作用就是加粗。從語義上來看，表示引用其他作品的標題。 17.&lt;ruby&gt;語言元素 ``` <ruby> 饕<rp>(</rp><rt>tāo</rt><rp>)</rp> 餮<rp>(</rp><rt>tiè</rt><rp>)</rp> </ruby> ``` 解釋：&lt;ruby&gt;用來為非西方語言提供支持。&lt;rp&gt;&lt;rt&gt;用來幫助讀者掌握表意語言文字正確發音。比如：漢語拼音在文字的上方。但目前 Firefox?還不支持此特性。 18.&lt;bdo&gt;設置文字方向? ``` <bdo dir="rtl">HTML5</bdo> ``` 解釋：&lt;bdo&gt;必須使用屬性 dir?才可以設置，一共兩個值：rtl（從右到左）和 ltr（從左到右）。一般默認是 ltr。還有一個&lt;bdi&gt;元素也是處理方向的，由于是特殊語言的特殊效果，且主流瀏覽器大半不支持，忽略。 19.&lt;mark&gt;突出顯示文本? ``` <mark>HTML5</mark> ``` 解釋：&lt;mark&gt;實際作用就是加上一個黃色的背景，黑色的字；從語義上來看，與上下文相關而突出的文本，用于記號。 20.&lt;time&gt;表示日期和時間? ``` <time>2015-10-10</time> ``` 解釋：&lt;time&gt;元素沒有實際作用；從語義上來看，表示日期和時間。 21.&lt;span&gt;表示一般性文本? ``` <span>HTML5</span> ``` 解釋：&lt;span&gt;元素沒有實際作用；語義上就是表示一段文本，我們經常用它來設置 CSS?等操作。