文本標簽 · HTML 教程

# 文本標簽歷史上，網頁的主要功能是文本展示。所以，HTML 提供了大量的文本處理標簽。 ## `<div>` `<div>`是一個通用標簽，表示一個區塊（division）。它沒有語義，如果網頁需要一個塊級元素容器，又沒有其他合適的標簽，就可以使用這個標簽。它的最常見用途就是提供 CSS 的鉤子，用來指定各種樣式。所以在早期，下面層層包裹的`<div>`就很常見。 ```html <div class="main"> <div class="article"> <div class="title"> <h1>文章標題</h1> </div> </div> </div> ``` 上面代碼讀起來很費力，因為不帶有語義。后來，HTML 5 就提出了語義標簽，改進了上面的代碼。 ```html <main> <article> <header> <h1>文章標題</h1> </header> </article> </main> ``` `<div>`是無語義的塊級元素。下面的例子使用`<div>`，將圖像和文字組合在一起，構成一個警告區塊。 ```html <div> <img src="warning.jpg" alt="警告"> <p>小心</p> </div> ``` 只要樣式上需要多個塊級元素組合在一起，就可以使用`<div>`。但是，這應該是最后的措施，帶有語義的塊級標簽（比如`<article>`、`<section>`、`<aside>`、`<nav>`等）始終應該優先使用，當且僅當沒有其他語義元素合適時，才可以使用`<div>`。 ## `<p>` `<p>`標簽是一個塊級元素，代表文章的一個段落（paragraph）。不僅是文本，任何想以段落顯示的內容，比如圖片和表單項，都可以放進`<p>`元素。 ```html <p>hello world</p> ``` 上面代碼就是一個簡單的段落。 ## `<span>` `<span>`是一個通用目的的行內標簽（即不會產生換行），不帶有任何語義。它通常用作 CSS 樣式的鉤子，如果需要對某些行內內容指定樣式，就可以把它們放置在`<span>`。 ```html <p>這是一句<span>重要</span>的句子。</p> ``` 上面代碼中，句子里面需要強調的部分，就可以放在`<span>`。 ## `<br>`，`<wbr>` `<br>`讓網頁產生一個換行效果。該標簽是單獨使用的，沒有閉合標簽。 ```html hello<br>world ``` 瀏覽器渲染上面代碼時，會分成兩行，`hello`和`world`各占一行。 `<br>`對于詩歌和地址的換行非常有用。 ```html <p> 床前明月光，<br> 疑是地上霜。<br> 舉頭望明月，<br> 低頭思故鄉。 </p> ``` 上面的代碼如果不用`<br>`，會顯示成一行。注意，塊級元素的間隔，不要使用`<br>`來產生，而要使用 CSS 指定。 ```html <p>第一段</p> <br> <br> <p>第二段</p> ``` 上面的代碼希望段落之間有兩個換行，這時不應該使用`<br>`，而應該使用 CSS。 `<wbr>`標簽跟`<br>`很相似，表示一個可選的斷行。如果一行的寬度足夠，則不斷行；如果寬度不夠，需要斷行，就在`<wbr>`的位置的斷行。它是為了防止瀏覽器在一個很長的單詞中間，不正確地斷行或者不斷行，所以事先標明可以斷行的位置，主要用于歐洲一些單詞很長的語言或者 URL 的斷行。 ```html <p> Fernstra?en<wbr>bau<wbr>privat<wbr>finanzierungs<wbr>gesetz </p> ``` 上面代碼是一個很長的德語單詞，為了防止不正確斷行，事先用`<wbr>`告訴瀏覽器，可以選擇在哪里斷行。 ## `<hr>` `<hr>`用來在一篇文章中分隔兩個不同的主題，瀏覽器會將其渲染為一根水平線。該標簽是單獨使用的，沒有閉合標簽。 ```html <p>第一個主題</p> <hr> <p>第二個主題</p> ``` 上面代碼的渲染結果是，兩段之間會出現一根水平線。該標簽是歷史遺留下來的，建議盡量避免使用。主題之間的分隔可以使用`<section>`，如果想要水平線的效果，可以使用 CSS。 ## `<pre>` `<pre>`是一個塊級元素，表示保留原來的格式（preformatted），即瀏覽器會保留該標簽內部原始的換行和空格。瀏覽器默認以等寬字體顯示標簽內容。 ```html <pre>hello world</pre> ``` 上面代碼中，換行和連續空格都會由于`<pre>`標簽，而被保留下來，瀏覽器按照原樣輸出。注意，HTML 標簽在`<pre>`里面還是起作用的。`<pre>`只保留空格和換行，不會保留 HTML 標簽。 ```html <pre><strong>hello world</strong></pre> ``` 上面代碼中，`<pre>`標簽的內容會加粗顯示。 ## `<strong>`，`<b>` `<strong>`是一個行內元素，表示它包含的內容具有很強的重要性，需要引起注意。瀏覽器會以粗體顯示內容。 ```html <p>開會時間是<strong>下午兩點</strong>。</p> ``` `<b>`與`<strong>`很相似，也表示它包含的內容需要引起注意，瀏覽器會加粗顯示。它是 Boldface 的縮寫。 ```html <p>開會時間是<b>下午兩點</b>。</p> ``` 它與`<strong>`的區別在于，由于歷史原因，它沒有語義，是一個純樣式的標簽，違反了語義與樣式分離的原則，因此不建議使用，應該優先使用`<strong>`標簽。 ## `<em>`，`<i>` `<em>`是一個行內標簽，表示強調（emphasize），瀏覽器會以斜體顯示它包含的內容。 ```html <p>我們<em>已經</em>討論過這件事情了。</p> ``` 雖然瀏覽器通常會以斜體顯示`<em>`，但無法保證一定如此，所以最好還是用 CSS 指定一下這個標簽的樣式。 `<i>`標簽與`<em>`相似，也表示與其他地方有所區別，瀏覽器會以斜體顯示。它是 Italic 的縮寫。 ```html <p>我心想，這件事是<i>真的</i>嗎？</p> ``` `<i>`標簽的語義不強，更接近是一個純樣式的標簽，建議優先使用`<em>`標簽代替它。 ## `<sub>`，`<sup>`，`<var>` `<sub>`標簽將內容變為下標，`<sup>`標簽將內容變為上標。它們都是行內元素，主要用于數學公式、分子式等。 ```html <p>水分子是 H<sub>2</sub>O。</p> ``` `<var>`標簽表示代碼或數學公式的變量。 ```html <p>勾股定理是 <var>a</var><sup>2</sup> + <var>b</var><sup>2</sup> = <var>c</var><sup>2</sup> 。</p> ``` ## `<u>`，`<s>` `<u>`標簽是一個行內元素，表示對內容提供某種注釋，提醒用戶這里可能有問題，基本上只用來表示拼寫錯誤。瀏覽器默認以下劃線渲染內容。 ```html <p> 一個容易寫錯的成語是把<em>安分守己</em>寫成<u>安份守己</u>。 </p> ``` 上面代碼中，`<u>`提示用戶這是一個拼寫錯誤，“安份守己”的下方會有一個下劃線。注意，`<u>`會產生下劃線，由于鏈接也默認帶有下劃線，所以必須非常小心使用`<u>`標簽，避免用戶誤以為可以點擊。萬一確有必要使用，最好使用 CSS 改變`<u>`的默認樣式。 `<s>`標簽是一個行內元素，為內容加上刪除線。 ```html <p>今天特價商品：<s>三文魚</s>（售完）</p> ``` 上面代碼中，“三文魚”會有一根刪除線。 ## `<blockquote>`，`<cite>`，`<q>` `<blockquote>`是一個塊級標簽，表示引用他人的話。瀏覽器會在樣式上，與正常文本區別顯示。 ```html <blockquote cite="https://quote.example.com"> <p>天才就是 1% 的天賦和99%的汗水。</p> </blockquote> ``` `<blockquote>`標簽有一個`cite`屬性，它的值是一個網址，表示引言來源，不會顯示在網頁上。 `<cite>`標簽表示引言出處或者作者，瀏覽器默認使用斜體顯示這部分內容。 ```html <blockquote cite="https://quote.example.com"> <p>天才就是 1% 的天賦和99%的汗水。</p> </blockquote> <cite>-- 愛迪生</cite> ``` `<cite>`不一定跟`<blockquote>`一起使用。如果文章中提到資料來源，也可以單獨使用。 ```html <p>更多資料請看<cite>維基百科</cite>。</p> ``` `<q>`是一個行內標簽，也表示引用。它與`<blockquote>`的區別，就是它不會產生換行。 ```html <p> 莎士比亞的《哈姆雷特》有一句著名的臺詞： <q cite="https://quote.example.com">活著還是死亡，這是一個問題。</q> </p> ``` 上面例子中，引言部分跟前面的說明部分是在同一行里面。另外，跟`<blockquote>`一樣，`<q>`也有`cite`屬性，表示引言的來源網址。注意，瀏覽器默認會斜體顯示`<q>`的內容，并且會自動添加半角的雙引號。所以，引用中文內容時要小心。 ## `<code>` `<code>`標簽是一個行內元素，表示標簽內容是計算機代碼，瀏覽器默認會以等寬字體顯示。 ```html <code>alert()</code>的作用是讓網頁彈出一個提示框。 ``` 如果要表示多行代碼，`<code>`標簽必須放在`<pre>`內部。`<code>`本身僅表示一行代碼。 ```html <pre> <code> let a = 1; console.log(a); </code> </pre> ``` ## `<kbd>`，`<samp>` `<kbd>`標簽是一個行內元素，原意是用戶從鍵盤輸入的內容，現在擴展到各種輸入，包括語音輸入。瀏覽器默認以等寬字體顯示標簽內容。 ```html <p>Windows 可以按下 <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Del</kbd> 重啟。</p> ``` `<kbd>`可以嵌套，方便指定樣式。 ```html <p>Windows 可以按下 <kbd> <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Del</kbd> </kbd> 重啟。</p> ``` `<samp>`標簽是一個行內元素，表示計算機程序輸出內容的一個例子。瀏覽器默認以等寬字體顯示。 ```html <p>如果使用沒有定義的變量，瀏覽器會報錯： <samp>Uncaught ReferenceError: foo is not defined</samp>。 </p> ``` ## `<mark>` `<mark>`是一個行內標簽，表示突出顯示的內容。Chrome 瀏覽器默認會以亮黃色背景，顯示該標簽的內容。 ```html <p>我們討論以后決定，<mark>運行會在下周三舉辦</mark>。</p> ``` `<mark>`很適合在引用的內容（`<q>`或`<blockquote>`）中，標記出需要關注的句子。 ```html <blockquote> 床前明月光，疑是地上霜。<mark>舉頭望明月，低頭思故鄉。</mark> </blockquote> ``` 除了標記感興趣的文本，`<mark>`還可以用于在搜索結果中，標記出匹配的關鍵詞。注意，不要只為了高亮的效果，而使用這個標簽，因為不能保證瀏覽器的處理方式。如果要保證高亮，還是要使用 CSS 樣式。 ## `<small>` `<small>`是一個行內標簽，瀏覽器會將它包含的內容，以小一號的字號顯示，不需要使用 CSS 樣式。它通常用于文章附帶的版權信息或法律信息。 ```html <p>文章正文</p> <p><small>以上內容使用創意共享許可證。</small></p> ``` ## `<time>`，`<data>` `<time>`是一個行內標簽，為跟時間相關的內容提供機器可讀的格式。 ```html <p>運動會預定<time datetime="2015-06-10">下周三</time>舉行。</p> ``` 上面代碼中，`<time>`表示下周三的具體日期。這方便搜索引擎抓取，或者下一步的其他處理。 `<time>`的`datetime`屬性，用來指定機器可讀的日期，可以有多種格式。 - 有效年份：`2011` - 有效月份：`2011-11` - 有效日期：`2011-11-18` - 無年份的日期：`11-18` - 年度的第幾周：`2011-W47` - 有效時間：`14:54`、`14:54:39`、`14:54:39.929` - 日期和時間：`2011-11-18T14:54:39.929` ```html <p>音樂會在<time datetime="20:00">晚上八點</time>開始。</p> ``` `<data>`標簽與`<time>`類似，也是提供機器可讀的內容，但是用于非時間的場合。 ```html <p>本次馬拉松比賽第一名是<data value="39">張三</data></p>。 ``` 上面代碼中，選手的機讀數據就放在`<data>`標簽的`value`屬性。 ## `<address>` `<address>`標簽是一個塊級元素，表示某人或某個組織的聯系方式。 ```html <p>作者的聯系方式：</p> <address> <p><a href="mailto:foo@example.com">foo@example.com</a></p> <p><a href="tel:+555-34762301">+555-34762301</a></p> </address> ``` 該標簽有幾個注意點。（1）如果是文章里提到的地址（比如提到搬家前的地址），而不是聯系信息，不要使用`<address>`標簽。（2）`<address>`的內容不得有非聯系信息，比如發布日期。（3）`<address>`不能嵌套，并且內部不能有標題標簽（`<h1>`~`<h6>`），也不能有`<article>`、`<aside>`、`<section>`、`<nav>`、`<header>`、`<footer>`等標簽。（4）通常，`<address>`會放在`<footer>`里面，下面是一個例子。 ```html <footer> <address> 文章的相關問題請聯系<a href="mailto:zhangsan@example.com">張三 McClure</a>。 </address> </footer> ``` ## `<abbr>` `<abbr>`標簽是一個行內元素，表示標簽內容是一個縮寫。它的`title`屬性給出縮寫的完整形式，或者縮寫的描述。鼠標懸停在該元素上方時，`title`屬性值作為提示，會完整顯示出來。 ```html <abbr title="HyperText Markup Language">HTML</abbr> ``` 注意，某些瀏覽器可能對該標簽提供圓點下劃線。 ## `<ins>`，`<del>` `<ins>`標簽是一個行內元素，表示原始文檔添加（insert）的內容。`<del>`與之類似，表示刪除（delete）的內容。它們通常用于展示文檔的刪改。 ```html <del><p>會議定于5月8日舉行。</p></del> <ins><p>會議定于5月9日舉行。</p></ins> ``` 瀏覽器默認為`<del>`標簽的內容加上刪除線，為`<ins>`標簽的內容加上下劃線。這兩個標簽都有以下屬性。 - `cite`：該屬性的值是一個 URL，表示該網址可以解釋本次刪改。 - `datetime`：表示刪改發生的時間。 ```html <ins cite="./why.html" datetime="2018-05"> <p>項目比原定時間提前兩周結束。</p> </ins> ``` ## `<dfn>` `<dfn>`是一個行內元素，表示標簽內容是一個術語（definition），本段或本句包含它的定義。 ```html <p> 通過 TCP/IP 協議連接的全球性計算機網絡，叫做 <dfn>Internet</dfn>。 </p> ``` 為了腳本操作的方便，可以把術語的定義寫入`<dfn>`標簽的`title`屬性。 ```html <p> 通過 TCP/IP 協議連接的全球性計算機網絡，叫做 <dfn title="全球性計算機網絡">Internet</dfn>。 </p> ``` 上面代碼中，`title`屬性的一個作用是，鼠標懸浮的時候，術語的解釋會以提示的形式顯示出來。某些時候，術語本身是一個縮寫，這時`<dfn>`和`<abbr>`可以結合使用。 ```html <p> <dfn><abbr title="acquired immune deficiency syndrome">AIDS</abbr></dfn> 的全稱是獲得性免疫缺陷綜合征。 </p> ``` ## `<ruby>` `<ruby>`標簽表示文字的語音注釋，主要用于東亞文字，比如漢語拼音和日語的片假名。它默認將語音注釋，以小字體顯示在文字的上方。 ```html <ruby> 漢<rp>(</rp><rt>han</rt><rp>)</rp> 字<rp>(</rp><rt>zi</rt><rp>)</rp> </ruby> ``` 上面代碼的渲染結果是，`漢字`上方有小字體的拼音`han zi`。 `<ruby>`標簽是一個行內元素，也是一個容器標簽。如果要使用語音注釋，就必須把文字和注釋都放在這個標簽里面。 `<ruby>`的內部還有許多配套的標簽。 **（1）`<rp>`** `<rp>`標簽的用處，是為不支持語音注釋的瀏覽器，提供一個兼容方案。對于那些支持語音注釋的瀏覽器，該標簽的內容不顯示。 `<rp>`標簽一般用于放置圓括號，如果遇到不支持的瀏覽器，就會將語音注釋顯示在括號里面。 ```html <ruby> 漢<rp>(</rp><rt>han</rt><rp>)</rp> 字<rp>(</rp><rt>zi</rt><rp>)</rp> </ruby> ``` 上面代碼在不支持語音注釋的瀏覽器中，渲染結果為`漢(han)字(zi)`。遇到支持語音注釋的瀏覽器，就不會顯示圓括號。 **（2）`<rt>`** `<rt>`標簽用于放置語音注釋。 **（3）`<rb>`** `<rb>`標簽用于劃分文字單位，與語音注釋一一對應。 ```html <ruby> <rb>漢</rb><rb>字</rb> <rp>(</rp> <rt>han</rt> <rt>zi</rt> <rp>)</rp> </ruby> ``` 上面例子中，`漢字`這兩個字是寫在一起的，`<rb>`標簽用于每個字劃分出來，跟`<rt>`標簽一一對應。注意，Chrome 瀏覽器目前不支持這個標簽。 **（4）`<rbc>`，`<rtc>`** `<rbc>`標簽表示一組文字，通常包含多個`<rb>`元素。`<rtc>`標簽表示一組語音注釋，跟`<rbc>`對應。 ```html <ruby style="ruby-position: under;"> <rbc> <rb>漢</rb><rp>(</rp><rt>han</rt><rp>)</rp> <rb>字</rb><rp>(</rp><rt>zi</rt><rp>)</rp> </rbc> <rtc style="ruby-position: over;"> <rp>(</rp><rt>Chinese</rt><rp>)</rp> </rtc> </ruby> ``` 上面例子中，`漢字`這兩個字有兩組語音注釋，分別是漢語拼音與英語。一組語音注釋放在`<rbc>`標簽中，另一組語音注釋放在`<rtc>`，用來對應`<rbc>`。同時，分別使用`style`屬性，指定漢語拼音顯示在文字下方，英語顯示在文字上方。注意，Chrome 瀏覽器目前不支持這兩個標簽。 ## `<bdo>`，`<bdi>` 大部分文字的閱讀方向是從左到右，但是有些文字的方向是從右到左，比如阿拉伯語、希伯來語等。`<bdo>`標簽是一個行內元素，表示文字方向與網頁主體內容的方向不一致。 ```html <p>床前明月光，<bdo dir="rtl">霜上地是疑</bdo>。</p> ``` 上面代碼中，`<bdo>`標簽里面的文字，會以相反的方向渲染，結果就是“床前明月光，疑是地上霜”。 `<bdo>`的`dir`屬性，指定具體的文字方向。它有兩個值，`ltr`表示從左到右，`rtl`表示從右到左。 `<bdi>`標簽用于不確定文字方向的情況。比如，網頁有一個部分是用戶輸入的內容，但是不知道輸入內容的文字方向。這種情況就可以使用`<bdi>`標簽，告訴瀏覽器，不確定文字的方向，由瀏覽器自己決定。 ```html <p><bdi>床前明月光，疑是地上霜。</bdi></p> ```