# 文本標簽 歷史上，網頁的主要功能是文本展示。所以，HTML 提供了大量的文本處理標簽。 ## 1.`<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>`。 ## 2.`<p>` `<p>`標簽是一個塊級元素，代表文章的一個段落（paragraph）。不僅是文本，任何想以段落顯示的內容，比如圖片和表單項，都可以放進`<p>`元素。 ~~~html <p>hello world</p> ~~~ 上面代碼就是一個簡單的段落。 ## 3.`<span>` `<span>`是一個通用目的的行內標簽（即不會產生換行），不帶有任何語義。它通常用作 CSS 樣式的鉤子，如果需要對某些行內內容指定樣式，就可以把它們放置在`<span>`。 ~~~html <p>這是一句<span>重要</span>的句子。</p> ~~~ 上面代碼中，句子里面需要強調的部分，就可以放在`<span>`。 ## 4.`<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>`告訴瀏覽器，可以選擇在哪里斷行。 ## 5.`<hr>` `<hr>`用來在一篇文章中分隔兩個不同的主題，瀏覽器會將其渲染為一根水平線。該標簽是單獨使用的，沒有閉合標簽。 ~~~html <p>第一個主題</p> <hr> <p>第二個主題</p> ~~~ 上面代碼的渲染結果是，兩段之間會出現一根水平線。 該標簽是歷史遺留下來的，建議盡量避免使用。主題之間的分隔可以使用`<section>`，如果想要水平線的效果，可以使用 CSS。 ## 6.`<pre>` `<pre>`是一個塊級元素，表示保留原來的格式（preformatted），即瀏覽器會保留該標簽內部原始的換行和空格。瀏覽器默認以等寬字體顯示標簽內容。 ~~~html <pre>hello world</pre> ~~~ 上面代碼中，換行和連續空格都會由于`<pre>`標簽，而被保留下來，瀏覽器按照原樣輸出。 注意，HTML 標簽在`<pre>`里面還是起作用的。`<pre>`只保留空格和換行，不會保留 HTML 標簽。 ~~~html <pre><strong>hello world</strong></pre> ~~~ 上面代碼中，`<pre>`標簽的內容會加粗顯示。 ## 7.`<strong>`，`<b>` `<strong>`是一個行內元素，表示它包含的內容具有很強的重要性，需要引起注意。瀏覽器會以粗體顯示內容。 ~~~html <p>開會時間是<strong>下午兩點</strong>。</p> ~~~ `<b>`與`<strong>`很相似，也表示它包含的內容需要引起注意，瀏覽器會加粗顯示。它是 Boldface 的縮寫。 ~~~html <p>開會時間是<b>下午兩點</b>。</p> ~~~ 它與`<strong>`的區別在于，由于歷史原因，它沒有語義，是一個純樣式的標簽，違反了語義與樣式分離的原則，因此不建議使用，應該優先使用`<strong>`標簽。 ## 8.`<em>`，`<i>` `<em>`是一個行內標簽，表示強調（emphasize），瀏覽器會以斜體顯示它包含的內容。 ~~~html <p>我們<em>已經</em>討論過這件事情了。</p> ~~~ 雖然瀏覽器通常會以斜體顯示`<em>`，但無法保證一定如此，所以最好還是用 CSS 指定一下這個標簽的樣式。 `<i>`標簽與`<em>`相似，也表示與其他地方有所區別，瀏覽器會以斜體顯示。它是 Italic 的縮寫。 ~~~html <p>我心想，這件事是<i>真的</i>嗎？</p> ~~~ `<i>`標簽的語義不強，更接近是一個純樣式的標簽，建議優先使用`<em>`標簽代替它。 ## 9.`<sub>`，`<sup>`，`<var>` `<sub>`標簽將內容變為下標，`<sup>`標簽將內容變為上標。它們都是行內元素，主要用于數學公式、分子式等。 ~~~html <p>水分子是 H₂O。</p> ~~~ `<var>`標簽表示代碼或數學公式的變量。 ~~~html <p> 勾股定理是<var>a</var>² + <var>b</var>² = <var>c</var>² 。</p> ~~~