參考手冊

HTML 元素參考手冊

完整的 HTML 元素列表，包含詳細說明、屬性和使用範例

快速導航

基礎元素 文本元素 連結元素 媒體元素 表格元素 表單元素 語義元素 互動元素

基礎元素

HTML 文檔的基本結構元素

<html> 基礎

HTML 文檔的根元素，包含所有其他元素。

常用屬性：
  • lang - 指定文檔語言
  • xmlns - XML 命名空間
範例： 
<html lang="zh-TW">
  <head>...</head>
  <body>...</body>
</html>
<head> 基礎

包含文檔的元數據，如標題、字符編碼、視口設置等。

常用子元素：
  • <title> - 文檔標題
  • <meta> - 元數據
  • <link> - 外部資源
範例： 
<head>
  <meta charset="UTF-8">
  <title>網頁標題</title>
</head>
<body> 基礎

包含網頁的所有可見內容，如文本、圖片、連結等。

常用屬性：
  • bgcolor - 背景顏色（已棄用）
  • text - 文本顏色（已棄用）
範例： 
<body>
  <h1>歡迎</h1>
  <p>這是網頁內容</p>
</body>
<title> 基礎

定義網頁的標題，顯示在瀏覽器標籤頁上。

注意事項：
  • 每個 HTML 文檔只能有一個 title
  • 標題應該簡潔且描述性強
  • 對 SEO 很重要
範例： 
<title>我的網站 - 首頁</title>
<meta> 基礎

提供關於 HTML 文檔的元數據，如字符編碼、描述、關鍵詞等。

常用屬性：
  • charset - 字符編碼
  • name - 元數據名稱
  • content - 元數據內容
範例： 
<meta charset="UTF-8">
<meta name="description" content="網頁描述">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

文本元素

用於格式化文本內容的元素

<h1>-<h6> 文本

定義六個級別的標題，h1 是最高級別，h6 是最低級別。

使用建議：
  • h1 通常用於主標題
  • 不要跳過標題級別
  • 對 SEO 和可訪問性很重要
範例： 
<h1>主標題</h1>
<h2>副標題</h2>
<h3>小節標題</h3>
<p> 文本

定義一個段落，是最常用的文本元素之一。

注意事項：
  • 瀏覽器會自動在段落前後添加空白
  • 可以包含行內元素
  • 不能包含塊級元素
範例： 
<p>這是一個段落。</p>
<p>這是另一個段落。</p>
<br> 文本

插入一個換行符，是一個空元素，不需要結束標籤。

使用場景：
  • 詩歌或地址中的換行
  • 不推薦用於段落間距
  • 應該使用 CSS 控制間距
範例： 
<p>第一行<br>第二行</p>
<strong> 文本

表示重要文本，通常以粗體顯示，具有語義重要性。

與 b 標籤的區別：
  • strong 表示語義重要性
  • b 只是視覺上的粗體
  • 優先使用 strong
範例： 
<p>這是<strong>重要</strong>文本。</p>
<em> 文本

表示強調文本，通常以斜體顯示，具有語義重要性。

與 i 標籤的區別：
  • em 表示語義強調
  • i 只是視覺上的斜體
  • 優先使用 em
範例： 
<p>這是<em>強調</em>文本。</p>
<span> 文本

行內容器，用於對文本的一部分進行樣式設置或腳本操作。

使用場景：
  • 應用 CSS 樣式到文本的一部分
  • JavaScript 操作的鉤子
  • 沒有語義意義
範例： 
<p>這是<span class="highlight">高亮</span>文本。</p>
實踐練習

互動式程式碼練習

在瀏覽器中直接編寫和測試 HTML 程式碼，即時查看結果

HTML
預覽