歷史上，網頁的主要功能是文本展示。所以，HTML 提供了大量的文本處理標簽。

<div>

<div>是一個通用標簽，表示一個區塊（division）。它沒有語義，如果網頁需要一個塊級元素容器，又沒有其他合適的標簽，就可以使用這個標簽。

它的最常見用途就是提供 CSS 的鉤子，用來指定各種樣式。所以在早期，下面層層包裹的<div>就很常見。

<div class="main"><div class="article"><div class="title"><h1>文章標題</h1></div></div>
</div>

上面代碼讀起來很費力，因為不帶有語義。后來，HTML 5 就提出了語義標簽，改進了上面的代碼。

<main><article><header><h1>文章標題</h1></header></article>
</main>

<div>是無語義的塊級元素。下面的例子使用<div>，將圖像和文字組合在一起，構成一個警告區塊。

<div><img src="warning.jpg" alt="警告"><p>小心</p>
</div>

只要樣式上需要多個塊級元素組合在一起，就可以使用<div>。但是，這應該是最后的措施，帶有語義的塊級標簽（比如<article>、<section>、<aside>、<nav>等）始終應該優先使用，當且僅當沒有其他語義元素合適時，才可以使用<div>。

<p>

<p>標簽是一個塊級元素，代表文章的一個段落（paragraph）。不僅是文本，任何想以段落顯示的內容，比如圖片和表單項，都可以放進<p>元素。

<p>hello world</p>

上面代碼就是一個簡單的段落。

<span>

<span>是一個通用目的的行內標簽（即不會產生換行），不帶有任何語義。它通常用作 CSS 樣式的鉤子，如果需要對某些行內內容指定樣式，就可以把它們放置在<span>。

<p>這是一句<span>重要</span>的句子。</p>

上面代碼中，句子里面需要強調的部分，就可以放在<span>。

<br>，<wbr>

<br>讓網頁產生一個換行效果。該標簽是單獨使用的，沒有閉合標簽。

hello<br>world

瀏覽器渲染上面代碼時，會分成兩行，hello和world各占一行。

<br>對于詩歌和地址的換行非常有用。

<p>床前明月光，<br>疑是地上霜。<br>舉頭望明月，<br>低頭思故鄉。
</p>

上面的代碼如果不用<br>，會顯示成一行。

注意，塊級元素的間隔，不要使用<br>來產生，而要使用 CSS 指定。

<p>第一段</p>
<br>
<br>
<p>第二段</p>

上面的代碼希望段落之間有兩個換行，這時不應該使用<br>，而應該使用 CSS。

<wbr>標簽跟<br>很相似，表示一個可選的斷行。如果一行的寬度足夠，則不斷行；如果寬度不夠，需要斷行，就在<wbr>的位置的斷行。它是為了防止瀏覽器在一個很長的單詞中間，不正確地斷行或者不斷行，所以事先標明可以斷行的位置，主要用于歐洲一些單詞很長的語言或者 URL 的斷行。

<p>
Fernstra?en<wbr>bau<wbr>privat<wbr>finanzierungs<wbr>gesetz
</p>

上面代碼是一個很長的德語單詞，為了防止不正確斷行，事先用<wbr>告訴瀏覽器，可以選擇在哪里斷行。

<hr>

<hr>用來在一篇文章中分隔兩個不同的主題，瀏覽器會將其渲染為一根水平線。該標簽是單獨使用的，沒有閉合標簽。

<p>第一個主題</p>
<hr>
<p>第二個主題</p>

上面代碼的渲染結果是，兩段之間會出現一根水平線。

該標簽是歷史遺留下來的，建議盡量避免使用。主題之間的分隔可以使用<section>，如果想要水平線的效果，可以使用 CSS。

<pre>

<pre>是一個塊級元素，表示保留原來的格式（preformatted），即瀏覽器會保留該標簽內部原始的換行和空格。瀏覽器默認以等寬字體顯示標簽內容。

<pre>helloworld</pre>

上面代碼中，換行和連續空格都會由于<pre>標簽，而被保留下來，瀏覽器按照原樣輸出。

注意，HTML 標簽在<pre>里面還是起作用的。<pre>只保留空格和換行，不會保留 HTML 標簽。

<pre><strong>hello world</strong></pre>

上面代碼中，<pre>標簽的內容會加粗顯示。

<strong>，<b>

<strong>是一個行內元素，表示它包含的內容具有很強的重要性，需要引起注意。瀏覽器會以粗體顯示內容。

<p>開會時間是<strong>下午兩點</strong>。</p>

<b>與<strong>很相似，也表示它包含的內容需要引起注意，瀏覽器會加粗顯示。它是 Boldface 的縮寫。

<p>開會時間是<b>下午兩點</b>。</p>

它與<strong>的區別在于，由于歷史原因，它沒有語義，是一個純樣式的標簽，違反了語義與樣式分離的原則，因此不建議使用，應該優先使用<strong>標簽。

<em>，<i>

<em>是一個行內標簽，表示強調（emphasize），瀏覽器會以斜體顯示它包含的內容。

<p>我們<em>已經</em>討論過這件事情了。</p>

雖然瀏覽器通常會以斜體顯示<em>，但無法保證一定如此，所以最好還是用 CSS 指定一下這個標簽的樣式。

<i>標簽與<em>相似，也表示與其他地方有所區別，瀏覽器會以斜體顯示。它是 Italic 的縮寫。

<p>我心想，這件事是<i>真的</i>嗎？</p>

<i>標簽的語義不強，更接近是一個純樣式的標簽，建議優先使用<em>標簽代替它。

<sub>，<sup>，<var>

<sub>標簽將內容變為下標，<sup>標簽將內容變為上標。它們都是行內元素，主要用于數學公式、分子式等。

<p>水分子是 H<sub>2</sub>O。</p>

<var>標簽表示代碼或數學公式的變量。

<p>勾股定理是<var>a</var><sup>2</sup> + <var>b</var><sup>2</sup> = <var>c</var><sup>2</sup>
。</p>

<u>，<s>

<u>標簽是一個行內元素，表示對內容提供某種注釋，提醒用戶這里可能有問題，基本上只用來表示拼寫錯誤。瀏覽器默認以下劃線渲染內容。

<p>
一個容易寫錯的成語是把<em>安分守己</em>寫成<u>安份守己</u>。
</p>

上面代碼中，<u>提示用戶這是一個拼寫錯誤，“安份守己”的下方會有一個下劃線。

注意，<u>會產生下劃線，由于鏈接也默認帶有下劃線，所以必須非常小心使用<u>標簽，避免用戶誤以為可以點擊。萬一確有必要使用，最好使用 CSS 改變<u>的默認樣式。

<s>標簽是一個行內元素，為內容加上刪除線。

<p>今天特價商品：<s>三文魚</s>（售完）</p>

上面代碼中，“三文魚”會有一根刪除線。

<blockquote>，<cite>，<q>

<blockquote>是一個塊級標簽，表示引用他人的話。瀏覽器會在樣式上，與正常文本區別顯示。

<blockquote cite="https://quote.example.com"><p>天才就是 1% 的天賦和99%的汗水。</p>
</blockquote>

<blockquote>標簽有一個cite屬性，它的值是一個網址，表示引言來源，不會顯示在網頁上。

<cite>標簽表示引言出處或者作者，瀏覽器默認使用斜體顯示這部分內容。

<blockquote cite="https://quote.example.com"><p>天才就是 1% 的天賦和99%的汗水。</p>
</blockquote>
<cite>-- 愛迪生</cite>

<cite>不一定跟<blockquote>一起使用。如果文章中提到資料來源，也可以單獨使用。

<p>更多資料請看<cite>維基百科</cite>。</p>

<q>是一個行內標簽，也表示引用。它與<blockquote>的區別，就是它不會產生換行。

<p>莎士比亞的《哈姆雷特》有一句著名的臺詞：<q cite="https://quote.example.com">活著還是死亡，這是一個問題。</q>
</p>

上面例子中，引言部分跟前面的說明部分是在同一行里面。

另外，跟<blockquote>一樣，<q>也有cite屬性，表示引言的來源網址。

注意，瀏覽器默認會斜體顯示<q>的內容，并且會自動添加半角的雙引號。所以，引用中文內容時要小心。

<code>

<code>標簽是一個行內元素，表示標簽內容是計算機代碼，瀏覽器默認會以等寬字體顯示。

<code>alert()</code>的作用是讓網頁彈出一個提示框。

如果要表示多行代碼，<code>標簽必須放在<pre>內部。<code>本身僅表示一行代碼。

<pre>
<code>let a = 1;console.log(a);
</code>
</pre>

<kbd>，<samp>

<kbd>標簽是一個行內元素，原意是用戶從鍵盤輸入的內容，現在擴展到各種輸入，包括語音輸入。瀏覽器默認以等寬字體顯示標簽內容。

<p>Windows 可以按下 <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Del</kbd> 重啟。</p>

<kbd>可以嵌套，方便指定樣式。

<p>Windows 可以按下
<kbd> <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Del</kbd> </kbd>
重啟。</p>

<samp>標簽是一個行內元素，表示計算機程序輸出內容的一個例子。瀏覽器默認以等寬字體顯示。

<p>如果使用沒有定義的變量，瀏覽器會報錯：
<samp>Uncaught ReferenceError: foo is not defined</samp>。
</p>

<mark>

<mark>是一個行內標簽，表示突出顯示的內容。Chrome 瀏覽器默認會以亮黃色背景，顯示該標簽的內容。

<p>我們討論以后決定，<mark>運行會在下周三舉辦</mark>。</p>

<mark>很適合在引用的內容（<q>或<blockquote>）中，標記出需要關注的句子。

<blockquote>
床前明月光，疑是地上霜。<mark>舉頭望明月，低頭思故鄉。</mark>
</blockquote>

除了標記感興趣的文本，<mark>還可以用于在搜索結果中，標記出匹配的關鍵詞。

注意，不要只為了高亮的效果，而使用這個標簽，因為不能保證瀏覽器的處理方式。如果要保證高亮，還是要使用 CSS 樣式。

<small>

<small>是一個行內標簽，瀏覽器會將它包含的內容，以小一號的字號顯示，不需要使用 CSS 樣式。它通常用于文章附帶的版權信息或法律信息。

<p>文章正文</p>
<p><small>以上內容使用創意共享許可證。</small></p>

<time>，<data>

<time>是一個行內標簽，為跟時間相關的內容提供機器可讀的格式。

<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

<p>音樂會在<time datetime="20:00">晚上八點</time>開始。</p>

<data>標簽與<time>類似，也是提供機器可讀的內容，但是用于非時間的場合。

<p>本次馬拉松比賽第一名是<data value="39">張三</data></p>。

上面代碼中，選手的機讀數據就放在<data>標簽的value屬性。

<address>

<address>標簽是一個塊級元素，表示某人或某個組織的聯系方式。

<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>里面，下面是一個例子。

<footer><address>文章的相關問題請聯系<a href="mailto:zhangsan@example.com">張三McClure</a>。</address>
</footer>

<abbr>

<abbr>標簽是一個行內元素，表示標簽內容是一個縮寫。它的title屬性給出縮寫的完整形式，或者縮寫的描述。鼠標懸停在該元素上方時，title屬性值作為提示，會完整顯示出來。

<abbr title="HyperText Markup Language">HTML</abbr>

注意，某些瀏覽器可能對該標簽提供圓點下劃線。

<ins>，<del>

<ins>標簽是一個行內元素，表示原始文檔添加（insert）的內容。<del>與之類似，表示刪除（delete）的內容。它們通常用于展示文檔的刪改。

<del><p>會議定于5月8日舉行。</p></del>
<ins><p>會議定于5月9日舉行。</p></ins>

瀏覽器默認為<del>標簽的內容加上刪除線，為<ins>標簽的內容加上下劃線。

這兩個標簽都有以下屬性。

• cite：該屬性的值是一個 URL，表示該網址可以解釋本次刪改。
• datetime：表示刪改發生的時間。

<ins cite="./why.html" datetime="2018-05"><p>項目比原定時間提前兩周結束。</p>
</ins>

<dfn>

<dfn>是一個行內元素，表示標簽內容是一個術語（definition），本段或本句包含它的定義。

<p>
通過 TCP/IP 協議連接的全球性計算機網絡，叫做 <dfn>Internet</dfn>。
</p>

為了腳本操作的方便，可以把術語的定義寫入<dfn>標簽的title屬性。

<p>
通過 TCP/IP 協議連接的全球性計算機網絡，叫做
<dfn title="全球性計算機網絡">Internet</dfn>。
</p>

上面代碼中，title屬性的一個作用是，鼠標懸浮的時候，術語的解釋會以提示的形式顯示出來。

某些時候，術語本身是一個縮寫，這時<dfn>和<abbr>可以結合使用。

<p>
<dfn><abbr title="acquired immune deficiency syndrome">AIDS</abbr></dfn>
的全稱是獲得性免疫缺陷綜合征。
</p>

<ruby>

<ruby>標簽表示文字的語音注釋，主要用于東亞文字，比如漢語拼音和日語的片假名。它默認將語音注釋，以小字體顯示在文字的上方。

<ruby>
漢<rp>(</rp><rt>han</rt><rp>)</rp>
字<rp>(</rp><rt>zi</rt><rp>)</rp>
</ruby>

上面代碼的渲染結果是，漢字上方有小字體的拼音han zi。

<ruby>標簽是一個行內元素，也是一個容器標簽。如果要使用語音注釋，就必須把文字和注釋都放在這個標簽里面。

<ruby>的內部還有許多配套的標簽。

（1）<rp>

<rp>標簽的用處，是為不支持語音注釋的瀏覽器，提供一個兼容方案。對于那些支持語音注釋的瀏覽器，該標簽的內容不顯示。

<rp>標簽一般用于放置圓括號，如果遇到不支持的瀏覽器，就會將語音注釋顯示在括號里面。

<ruby>
漢<rp>(</rp><rt>han</rt><rp>)</rp>
字<rp>(</rp><rt>zi</rt><rp>)</rp>
</ruby>

上面代碼在不支持語音注釋的瀏覽器中，渲染結果為漢(han)字(zi)。遇到支持語音注釋的瀏覽器，就不會顯示圓括號。

（2）<rt>

<rt>標簽用于放置語音注釋。

（3）<rb>

<rb>標簽用于劃分文字單位，與語音注釋一一對應。

<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>對應。

<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>標簽是一個行內元素，表示文字方向與網頁主體內容的方向不一致。

<p>床前明月光，<bdo dir="rtl">霜上地是疑</bdo>。</p>

上面代碼中，<bdo>標簽里面的文字，會以相反的方向渲染，結果就是“床前明月光，疑是地上霜”。

<bdo>的dir屬性，指定具體的文字方向。它有兩個值，ltr表示從左到右，rtl表示從右到左。

<bdi>標簽用于不確定文字方向的情況。比如，網頁有一個部分是用戶輸入的內容，但是不知道輸入內容的文字方向。這種情況就可以使用<bdi>標簽，告訴瀏覽器，不確定文字的方向，由瀏覽器自己決定。

<p><bdi>床前明月光，疑是地上霜。</bdi></p>