06 # 文本标簽（上）

說明

​​網道HTML 教程​​學習筆記

1、​

​<div>​

​

​

​<div>​

​ 是一個通用标簽，表示一個區塊（division）。

2、​

​<p>​

​

​

​<p>​

​ 标簽是一個塊級元素，代表文章的一個段落（paragraph）。

3、​

​<span>​

​

​

​<span>​

​ 是一個通用目的的行内标簽（即不會産生換行），不帶有任何語義。

4、​

​<br>，<wbr>​

​

​

​<br>​

​讓網頁産生一個換行效果。該标簽是單獨使用的，沒有閉合标簽。

hello<br>world      

​

​<wbr>​

​​ 标簽跟 ​

​<br>​

​ 很相似，表示一個可選的斷行。

它是為了防止浏覽器在一個很長的單詞中間，不正确地斷行或者不斷行，是以事先标明可以斷行的位置，主要用于歐洲一些單詞很長的語言或者 URL 的斷行。

例子：

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

5、​

​<hr>​

​

​

​<hr>​

​ 用來在一篇文章中分隔兩個不同的主題，浏覽器會将其渲染為一根水準線。該标簽是單獨使用的，沒有閉合标簽。

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

6、​

​<pre>​

​

​

​<pre>​

​​ 是一個塊級元素，表示保留原來的格式（​

​preformatted​

​），即浏覽器會保留該标簽内部原始的換行和空格。浏覽器預設以等寬字型顯示标簽内容。

7、​

​<strong>，<b>​

​

​

​<strong>​

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

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

​

​<b>​

​​ 與 ​

​<strong>​

​​ 很相似，也表示它包含的内容需要引起注意，浏覽器會加粗顯示。它是 ​

​Boldface​

​ 的縮寫。

​

​<b>​

​ 沒有語義。

8、​

​<em>，<i>​

​

​

​<em>​

​​ 是一個行内标簽，表示強調（​

​emphasize​

​），浏覽器會以斜體顯示它包含的内容。

​

​<i>​

​​ 标簽與 ​

​<em>​

​​ 相似，也表示與其他地方有所差別，浏覽器會以斜體顯示。它是 ​

​Italic​

​ 的縮寫。

​

​<i>​

​ 标簽的語義不強。

9、​

​<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>      

10、​

​<u>，<s>​

​

1、​

​<u>​

​ 标簽是一個行内元素，表示對内容提供某種注釋，提醒使用者這裡可能有問題，基本上隻用來表示拼寫錯誤。

浏覽器預設以下劃線渲染内容。

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

注意：

​

​<u>​

​ 會産生下劃線，由于連結也預設帶有下劃線，需要注意産生歧義。

2、​

​<s>​

​ 标簽是一個行内元素，為内容加上删除線。

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

11、​

​<blockquote>，<cite>，<q>​

​

1、​

​<blockquote>​

​ 是一個塊級标簽，表示引用他人的話。浏覽器會在樣式上，與正常文本差別顯示。

• ​

  ​cite​

  ​ 屬性：它的值是一個網址，表示引言來源，不會顯示在網頁上。

2、​

​<cite>​

​ 标簽表示引言出處或者作者，浏覽器預設使用斜體顯示這部分内容。

例子：

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

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

3、​

​<q>​

​​ 是一個行内标簽，也表示引用。它與 ​

​<blockquote>​

​ 的差別，就是它不會産生換行。

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

注意：浏覽器預設會斜體顯示 ​

​<q>​

​ 的内容，并且會自動添加半角的雙引号。是以，引用中文内容時要小心。

12、​

​<code>​

​

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

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