首頁 > 部落格目錄 > HTML元素：什麼是 HTML 元素及其使用方法

HTML元素：什麼是 HTML 元素及其使用方法

Written by peining on 25 December 2024

當你開始學習 HTML 時，你會發現一個網頁並不是單一的整體——它實際上是由數十甚至數百個建構塊組成，這些建構塊共同呈現出網站的使用體驗。在 HTML 中，這些建構塊稱為「元素」。HTML 元素告訴瀏覽器如何顯示網頁上的文字、圖片及其他內容，同時也提供了其他實用的資訊。如果你想了解網站的運作原理，就需要掌握 HTML 元素的基本知識。

什麼是 HTML 元素？

在 HTML 中，元素是 HTML 文件的一個部分。有些 HTML 元素代表網頁上的可見組件，例如文字、圖片或按鈕；而另一些則表示網頁的不同部分或提供文件的元資訊。在程式碼中，HTML 元素是通過「標籤」來創建的。HTML 標籤由置於尖括號（<>）中的文字組成。

大多數 HTML 元素由三個部分組成：

開頭標籤（或起始標籤）： 標示元素內容的開始位置（如上例中的 <p>）。
結尾標籤（或結束標籤）： 標示元素內容的結束位置（如上例中的 </p>）。結尾標籤與開頭標籤相同，但在第一個尖括號後多了一個斜杠（/）。
內容： 置於開頭標籤與結尾標籤之間的內容（如上例中的 "This is paragraph text."）。

在這篇文章中，我們將介紹 HTML 中的元素，教你如何正確撰寫它們，並列出一些你在網頁中最常使用的 HTML 元素。讓我們開始吧！

需要注意的是，HTML 標籤對大小寫不敏感。你可以將 <p> 寫成 <P>，它依然會正常運作。不過，大多數開發者習慣使用小寫標籤，因為這樣更簡單且一致。

空的HTML元素

雖然大多數 HTML 元素包含開頭和結尾標籤，但某些元素只有單一標籤，沒有結尾標籤或內容，這些稱為「空元素」。

一個常見的空元素是換行元素，用於在文字之間添加換行。換行元素使用空的 <br> 標籤，如下圖所示：

這是一行文字。<br>這是下一行文字。

只需使用 <br> 就能創建換行，無需結尾標籤。其他常見的空元素包括 <img>（圖片）、<meta>、<link> 和 <input>。

HTML屬性

HTML 元素還可以包含「屬性」。屬性是附加在元素開頭標籤中的額外程式碼，提供有關該元素的附加資訊。屬性可能是可選的，也可能是必需的。

例如，我們可以用style屬性來改變段落元素的文字顏色：

<p style ="color:red;">這是一個紅色段落。</p>

HTML 元素的嵌套

HTML 元素還可以嵌套在其他元素內部——這被稱為「嵌套」，是組裝 HTML 文件的核心概念。

回到我們的<p>示例，讓我們看看一個用於創建超連結的錨點元素（anchor element）如何嵌套在段落文字中。這裡，錨點元素放在段落元素的開頭和結尾標籤之間。此外，請注意，所有位於 <a> 和</a> 之間的文字會自動應用樣式，使其看起來像是一個超連結。

在這個示例中，我們稱段落元素為「父元素」，錨點元素則是「子元素」。子元素也可以包含嵌套的元素，因此它們本身也可以成為父元素。只要每個父元素都正確地以結尾標籤結束，你可以在 HTML 中按需嵌套多層元素。

事實上，由於 HTML 文件的結構，所有 HTML 文件至少包含兩層嵌套。HTML文件通常具有以下結構：

<!DOCTYPE html>
<html>
 <head>
   <title>頁面標題</title>
 </head>
 <body>
   <p>這是一段文字。</p>
 </body>
</html>

HTML 文件結構說明

在每個 HTML 文件中，所有元素都嵌套在 <html>標籤內部。這個 <html> 標籤被稱為「根元素」，因為它包含了文件中的所有其他元素。

區塊級元素

區塊級元素（Block-level Elements）是一種每次佔據整個父元素寬度的元素，即使其內容沒有填滿整個視窗寬度。此外，與寬度不同，區塊級元素的高度由其內容決定。

常見的區塊級元素包括<div>、<p>、<h1> 到 <h6>（標題標籤）、<ul>（無序列表）、<ol>（有序列表）以及<table>（表格）。

行內級元素

行內級元素（Inline-level Elements）與其父元素處於同一行中。行內級元素的寬度和高度由其內容決定。與區塊級元素不同，行內級元素不會開啟新的一行，這意味著你可以在同一行中放置多個行內級元素。

常見的行內級元素包括 <a>（錨點）、<img>（圖片）、<em>（強調，會將文字斜體化）、<strong>（加粗文字）、<button>（按鈕）和 <span>（用於分割小範圍的內容）。

常見的 HTML 標籤列表

雖然 HTML5 包含超過 100 種元素，但你只需掌握十幾到二十種就能有效編寫 HTML。此外，大多數標籤名稱能描述其元素的功能，因此更容易記住。

標籤	描述	區塊級/行內級
<html>...</html>	HTML文字標籤，包含所有其他元素	不適用
<head>...</head>	包含有關HTML文件的元數據	不適用
<body>...</body>	包含HTML文件的頁面內容	不適用
<p>...</p>	建立一段文字	區塊級
<h1>...</h1>, <h2>...</h2>等	建立頁面標題；選項從<h1>到<h6>，重要性依序	區塊級
<img>...</img>	嶔入頁面中的圖片	行內級
<em>...</em>	表示強調文字；默認將文字斜體化	行內級
<strong>...</strong>	表示重要文字；默認將文字加粗	行內級
<br>...</br>	創建一個換行符	行內級
<ol>...</ol>	創建一個有序列表，默認以數字列表呈現	區塊級
<ul>...</ul>	創建一個無序列表，默認以圓點列表呈現	區塊級
<div>...</div>	通用區塊級元件，用於分組其他內容	區塊級
<span>...</span>	通用行內級元件，用於分組文本或其他行內元素	行內級

返回部落格目錄

HTML元素：什麼是 HTML 元素及其使用方法