HTML 元素簡介

在本課程中，我們將探討不同的 HTML 標籤、它們的用途以及如何在 Web 應用程式中有效地使用它們。我們將討論一些最常用的 HTML 標籤及其對應的屬性。

段落標籤

段落可能是最常用的 HTML 元素，由

定義。它是一個區塊級元素，這意味著每個段落都將另起一行。

  <p>This is the first paragraph.</p>
  <p>This is the second paragraph, which starts on a new line.</p>

沒有

元素，您的瀏覽器將自動忽略多餘的空格並將文字呈現在單行中。

<!-- prettier-ignore -->

  This is the first paragraph.
  This is the second paragraph, which starts on a new line.

訪問程式碼示範 ↗

您需要使用
元素，如果您想在單一段落元素內換行。這是不需要結束標記的 HTML 元素之一。

  <p>
    This is the first paragraph.<br>
    This is the second paragraph, which starts on a new line.
  </p>

訪問程式碼示範 ↗

標題標籤

寫文章時，最好在段落之間加上標題，以使文章更有條理。 HTML 文件的工作方式相同。 HTML 提供了從

到

的六種不同層級的標題。到

.

<h1 id="Heading">Heading 1</h1>
<h2 id="Heading">Heading 2</h2>
<h3 id="Heading">Heading 3</h3>
<h4 id="Heading">Heading 4</h4>
<h5 id="Heading">Heading 5</h5>
<h6 id="Heading">Heading 6</h6>

訪問程式碼示範 ↗

在大多數情況下，

到

創建網頁時應足夠，一般情況下，我們建議不要使用太小的標題，例如

等。和

，因為它們會使您的網頁結構變得不必要的複雜。

;是頂部標題，它在網頁中扮演特殊的角色。應該只有一個

每個 HTML 文件中的元素，它應該總結整個頁面。

格式化元素

有時，您可能想透過給特定的單字和段落不同的格式來強調它們，例如使它們顯示為粗體、斜體或底線。 HTML 提供了可以幫助實現此效果的格式化元素。

<b></b>
<strong></strong>

<i></i>
<em></em>

<mark></mark>

<small></small>

<del></del>
<ins></ins>

<sub></sub>
<sup></sup>

訪問程式碼示範 ↗

• ; 元素具有相同的效果。它們都使所包含的文字顯示為粗體。

<p>
  Lorem ipsum <b>dolor sit</b> amet consectetur
  <strong>adipisicing elit</strong>.
</p>

儘管它們具有相同的外觀，如 CodePen 演示所示，但它們為瀏覽器和搜尋引擎提供不同的用途。

僅使文字加粗而不添加任何特定意義，而 表示所附文字非常重要。

• ;和元素相似。他們都將文本變成斜體形式。 不表示任何特殊意義，而 定義強調文本，以斜體顯示。

  <p>This is the first paragraph.</p>
  <p>This is the second paragraph, which starts on a new line.</p>

• ;元素定義突出顯示/標記的文字。

<!-- prettier-ignore -->

  This is the first paragraph.
  This is the second paragraph, which starts on a new line.

• ;元素定義小文字。

  <p>
    This is the first paragraph.<br>
    This is the second paragraph, which starts on a new line.
  </p>

• ;元素指示已刪除的文本，透過在所包含的文本中添加刪除線來顯示。另一方面，元素用於指示插入的文本，顯示為帶有下劃線的文本。

<h1 id="Heading">Heading 1</h1>
<h2 id="Heading">Heading 2</h2>
<h3 id="Heading">Heading 3</h3>
<h4 id="Heading">Heading 4</h4>
<h5 id="Heading">Heading 5</h5>
<h6 id="Heading">Heading 6</h6>

• _{;和 ^{elements 分別定義下標和上標。}}

<b></b>
<strong></strong>

<i></i>
<em></em>

<mark></mark>

<small></small>

<del></del>
<ins></ins>

<sub></sub>
<sup></sup>

如何為 HTML 元素新增樣式

有時，這些格式化元素的預設表示形式不足以表達其預期意義。

例如，元素用刪除線表示刪除的文本，這樣很容易理解。然而，元素使用下劃線來表示插入，這可能會很混亂。

要改善這些元素的預設外觀，您可以使用以下樣式屬性：

<p>
  Lorem ipsum <b>dolor sit</b> amet consectetur
  <strong>adipisicing elit</strong>.
</p>

預設情況下，連結會帶有底線並顯示為藍色，當您點擊它時，您將被帶到 href 屬性指定的目的地。

為了進行演示，請在工作目錄中建立一個 HTML 元素簡介.html 檔案。

<p>Lorem ipsum <i>dolor sit</i> amet consectetur <em>adipisicing elit</em>.</p>

<p>Lorem ipsum <mark>dolor sit</mark> amet consectetur adipisicing elit.</p>

然後，在您的 index.html 檔案中新增一個指向目的地的連結。

<p>Lorem ipsum <small>dolor sit</small> amet consectetur adipisicing elit.</p>

點擊連結後，您將被帶到HTML 元素簡介.html文件。

您也可以在HTML 元素簡介.html中新增返回連結以返回index.html。

<p>
  Lorem ipsum <del>dolor sit</del> amet <ins>consectetur adipisicing</ins> elit.
</p>

這些相互關聯的連結形成了我們今天看到的網路。

預設情況下，連結的目的地將在同一視窗中開啟。您可以透過設定目標屬性來變更該行為。例如，target="_blank" 在新分頁中開啟目的地。

<p>
  Lorem ipsum <sub>dolor sit</sub> amet <sup>consectetur adipisicing</sup> elit.
</p>

訪問程式碼示範 ↗

您可能注意到的另一件事是連結最初顯示為藍色。當你點擊它的那一刻，它就會變成紅色。之後，連結會變成紫色，表示該連結之前已被訪問過。

此行為與稱為偽類的概念有關，它允許您在不同條件下為元素定義不同的樣式。當我們更多地討論 CSS 時，我們將再次討論這個主題。

清單

訪問程式碼示範 ↗

HTML 中存在三種不同類型的清單：有序列表、無序列表和描述列表。

有序列表是用

定義的元素，並且每個單獨的列表項目都是使用
1. .
   創建的

     <p>This is the first paragraph.</p>
     <p>This is the second paragraph, which starts on a new line.</p>
   
   

   無序列表是用

   定義的。元素。
   

   <!-- prettier-ignore -->
   
     This is the first paragraph.
     This is the second paragraph, which starts on a new line.
   
   

   描述清單有點複雜，因為它們由項目清單和每個項目的描述組成。描述列表由

   定義。元素，每個列表項以

   定義，每個描述語句以

   .
   定義

     <p>
       This is the first paragraph.<br>
       This is the second paragraph, which starts on a new line.
     </p>
   
   

   佈局元素

   到目前為止，我們只討論了用於顯示內容的元素，例如文字、清單和圖像。事實上，HTML 中還有另一類元素負責組織這些元素。

   它們並不是為了顯示任何特定類型的內容而設計的，而是充當其他元素的容器。當與 CSS 結合時，他們可以為網頁創建不同的佈局。下面的清單顯示了一些常用的佈局元素。

   • ：定義文件的標題部分，通常位於網頁頂部。
   • ：定義導覽列。對於大多數網頁來說，它位於頂部和標題一起，但有些開發人員將其放在頁面的側面。
   • ：定義文件的一個部分。
   • ：定義網頁中的獨立部分。
   • ：主要內容以外的內容，例如側邊欄。
   • ：位於網頁底部的頁尾部分。
   • ：建立使用者可以開啟和關閉的選項卡。
   • ：為建立標題。元素。它應該放在
     裡面。元素。

   <h1 id="Heading">Heading 1</h1>
   <h2 id="Heading">Heading 2</h2>
   <h3 id="Heading">Heading 3</h3>
   <h4 id="Heading">Heading 4</h4>
   <h5 id="Heading">Heading 5</h5>
   <h6 id="Heading">Heading 6</h6>
   

   訪問程式碼示範 ↗

   • ：當然還有最重要的佈局元素，

     ，它代表分割。它是一個通用元素，在網頁中建立一個區塊，不用於任何特殊目的。

     這是最常用的佈局元素，因為對於現實生活中的網頁，大多數部分和區塊與上述任何語義元素都不匹配。因此，許多開發人員喜歡使用

     。用於建立頁面佈局。
     

       <p>This is the first paragraph.</p>
       <p>This is the second paragraph, which starts on a new line.</p>
     
     

     

     請注意，

     元素總是從新行開始，並佔據盡可能多的水平空間。另一方面，。元素不會另起一行，只佔用必要的空間。

     這其實就是塊元素和行內元素的差別。

     到目前為止我們提到的元素大多是區塊元素，例如

     、

     、

     等到

     、

   • 等。如果沒有定義額外的樣式，它們將自動佔用盡可能多的水平空間。

     ; element 是內嵌元素的一個例子。當與其他元素並排放置時，它僅佔用必要的空間。且 width 和 height 屬性不會對其產生影響。

     HTML 中還有許多其他元素，包括區塊元素和內聯元素。在一堂課中不可能討論所有這些內容，但如果您有興趣，這裡有來自 W3Schools 的所有 HTML 元素的參考。

     進一步閱讀

     • 如何使用 CSS 選擇器
     • 什麼是語意 HTML 程式碼？
     • 如何在 CSS 中將 Div 置中