HTML標籤（1）

標籤的用途：使網頁程式語義化。比如，網頁上的文章的標題就可以用標題標籤，網頁上的各個欄目的欄目名稱也可以使用標題標籤。文章中內容的段落就得放在段落標籤中，在文章中有想強調的文字，就可以使用 em 標籤表示強調等等。

注意：在網頁上要展示出來的頁面內容一定要放在body標籤中。

在本篇，會學習到段落標籤<p>、標題標籤<hx>、強調標籤<strong>和<em>、文字樣式設定標籤<span>、短文字引用標籤<q>、長文字引用標籤<blockquote>、分行標籤<br />、網頁空格、分割線標籤<hr />、地址標籤<address>、單行程式碼標籤<code>、多行程式碼標籤<pre>等。

---

<p>標籤

要在網頁上顯示文章，就需要把文章的段落放到<p>標籤中。

語法：

<p>段落文字</p>

注意：
(1) 一段文字一個<p>標籤，如在一篇新聞文章中有3段文字，就要把這3個段落分別放到3個<p>標籤中。
(2) <p>標籤的預設樣式，段前段後都會有空白，如果不喜歡這個空白，可以用css樣式來刪除或改變它。

---

<hx>標籤

標題標籤一共有6個，h1、h2、h3、h4、h5、h6分別為一級標題、二級標題、三級標題、四級標題、五級標題、六級標題。並且依據重要性遞減。<h1>是最高的等級。

語法：

<hx>標題文字</hx>   (x為1-6) 

注意：

• 因為h1標籤在網頁中比較重要，所以一般h1標籤被用在網站名稱上。
• 標題標籤的樣式都會加粗，h1標籤字號最大，h2標籤字號相對h1要小，以此類推h6標籤的字號最小。

---

<em>和<strong>標籤

如果想在一段話中特別強調某幾個文字，可以用到<em>或<strong>標籤。

語法：

<em>需要強調的文字</em>  

<strong>需要強調的文字</strong> 

注意：
<em>的內容在瀏覽中顯示為斜體，<strong>顯示為加粗。可以使用css樣式去改變。

---

<span>標籤

<em>和<strong>標籤是為了強調一段話中的關鍵字時使用，它們的語義是強調。<span>標籤是沒有語義的，它的作用就是為了設定單獨的樣式用的，如把部分字型設定成blue（藍色）。

語法：

span{
    color:blue;
}

<span>文字</span>

---

<q>標籤

<q>標籤，短文字引用。

語法：

<q>引用文字</q>

注意：

• 要引用的文字不用加雙引號，瀏覽器會對q標籤自動新增雙引號。
• 用<q>標籤的真正關鍵點不是它的預設樣式雙引號（如果這樣我們不如自己在鍵盤上輸入雙引號就行了），而是它的語義：引用別人的話。
  
  

---

<blockquote>標籤

<blockquote>的作用也是引用別人的文字。但它是對長文字的引用，如在文章中引入大段某知名作家的文字，這時需要這個標籤。

語法:

<blockquote>引用文字</blockquote>

注意：
<q>標籤是對簡短文字的引用，比如說引用一句話就用到<q>標籤。如想在文章中引用李白《關山月》中的詩句，因為引用文字比較長，所以使用<blockquote>。

---

<br />標籤

在需要加回車換行的地方加入<br />，<br />標籤作用相當於word文件中的回車。

語法：
xhtml1.0寫法：

<br />

html4.01寫法：

<br>

注意：

• 一般使用 xhtml1.0 的版本的寫法（其它標籤也是），這種版本比較規範。
• <br />標籤是一個空標籤，沒有HTML內容的標籤就是空標籤，空標籤只需要寫一個開始標籤，這樣的標籤有<br />、<hr />和<img />。
• 在 html 中是忽略回車和空格的，輸入再多的回車和空格也不顯示。在html文字中想輸入回車換行，就必須輸入<br />。

---

空格&nbsp

上面已提到，在html程式碼中輸入空格、回車都是沒有作用的。要想輸入空格，必須寫入 。

語法：

 

---

<hr />標籤

在資訊展示時，若想加一些用於分隔的橫線，使文章看起來更整齊，則可用到<hr />標籤。

語法：

html4.01版本 <hr>
xhtml1.0版本 <hr />


注意：

• <hr />標籤和<br />標籤一樣也是一個空標籤，所以只有一個開始標籤，沒有結束標籤。
• <hr />標籤的在瀏覽器中的預設樣式線條較粗，顏色為灰色，可以使用CSS樣式進行修改。
  
  

---

<address>標籤

若聯絡地址資訊需要在網頁中展示出來，可以<address>標籤。可以定義一個地址（比如公司地址、電子郵件地址）、簽名或者文件的作者身份。

語法：

<address>聯絡地址資訊</address>

注意：
在瀏覽器上顯示的預設樣式為斜體，可以使用 css 樣式來修改。

---

<code>標籤

在介紹語言技術的網站中，避免不了在網頁中顯示一些計算機專業的程式設計程式碼，當程式碼為一行程式碼時，可以使用<code>標籤，如：

<code>var i=i+300;</code>

語法：

<code>程式碼語言</code>

---

<pre>標籤

需要加入大段程式碼的時候，可以使用<pre>標籤。

語法：

<pre>語言程式碼段</pre>

注意;

• <pre> 標籤的主要作用預格式化的文字。被包圍在 pre 元素中的文字通常會保留空格和換行符。
• <pre> 標籤不只是為顯示計算機的原始碼時用的，當需要在網頁中預顯示格式時都可以使用它，只是<pre>標籤的一個常見應用就是用來展示計算機的原始碼。
  
  

---

補充

“<” 代表 “<”，”>” 代表 “>”，”&” 代表 “&”

---

來源：HTML+CSS基礎課程 - 慕課網