【一文學會 HTML5】

HTML概述
- 基本概念
- HTML 發展歷程
- HTML 基本結構
網頁基本標簽
- 標題標簽（`<h1>` - `<h6>`）
- 段落標簽（`<p>`）
- 換行標簽（`<br>`）
- 水平線標簽（`<hr>`）
- 注釋（``）
- 特殊符號
圖像標簽
- 基本語法
- 主要屬性
- 圖像的對齊和樣式
- 響應式圖像
鏈接標簽
- 基本語法
- 重要屬性
- - `href` 屬性
  - `target` 屬性
  - `title` 屬性
  - `rel` 屬性
  - `download` 屬性
- 鏈接樣式
- - 示例代碼
- 特殊鏈接形式
- - 圖像鏈接
  - 按鈕鏈接
塊元素和行內元素
- 塊元素（Block Elements）
- - 特點
  - 常見的塊元素
- 行內元素（Inline Elements）
- - 特點
  - 常見的行內元素
- 元素的轉換
- - 示例
列表
- 無序列表（Unordered List）
- - 概述
  - 語法
  - 示例
  - 自定義項目符號樣式
- 有序列表（Ordered List）
- - 概述
  - 語法
  - 示例
  - 自定義編號樣式
- 定義列表（Definition List）
- - 概述
  - 語法
  - 示例
- 嵌套列表
表格
- 基本結構標簽
- 表格的屬性
- 表格的跨行和跨列
- 表格的分組標簽
媒體元素
- `<audio>` 元素
- - 功能
  - 基本語法
  - 示例
  - 其他常用屬性
  - 支持多種音頻格式
- `<video>` 元素
- - 功能
  - 基本語法
  - 示例
  - 其他常用屬性
  - 支持多種視頻格式
網頁的簡單布局
- 整體框架
- 頭部信息（`<head>`）
- 主體內容（`<body>`）
- 輔助結構
內聯框架 iframe
- 基本語法
- 示例代碼
- 常用屬性
- - `src`
  - `width` 和 `height`
  - `frameborder`
  - `allowfullscreen`
  - `sandbox`
表單
- 表單基礎
- - 表單的定義
  - 基本結構
  - 提交方式
  - 表單提交的目標
- 表單元素
- - `<input>` 元素
  - `<textarea>` 元素
  - `<select>` 和 `<option>` 元素
  - `<datalist>` 元素
- 表單屬性
- - 通用屬性
  - HTML5 新增屬性
- 表單驗證

HTML概述

HTML 即超文本標記語言（HyperText Markup Language），它是用于創建網頁的標準標記語言

基本概念

HTML 通過一系列的標記（標簽）來描述網頁的結構和內容。這些標簽就像是建筑中的磚塊和藍圖，告訴瀏覽器如何顯示網頁的各個部分，比如文本、圖像、鏈接、表格等。瀏覽器（如 Chrome、Firefox 等）會讀取 HTML 文件，并根據其中的標簽將網頁內容呈現給用戶

HTML 發展歷程

HTML（超文本標記語言）是構建萬維網的核心技術之一，其發展歷程反映了互聯網技術的演進和標準化進程。以下是HTML的主要發展階段：

起源與HTML 1.0（1991-1993）

創始人：蒂姆·伯納斯-李（Tim Berners-Lee）于1991年在歐洲核子研究中心（CERN）提出，旨在實現科學文檔的共享。
HTML 1.0：未正式標準化，支持基本文本格式（標題、段落、超鏈接），僅包含約20個標簽。

HTML 2.0（1995）

首個官方標準：由IETF（互聯網工程任務組）于1995年發布，定義了HTML的基礎結構。
功能增強：支持表單（<form>）、圖像（<img>）、列表等，成為早期網頁的通用標準。

HTML 3.2（1997）

W3C接管：萬維網聯盟（W3C）開始主導標準化，1997年發布HTML 3.2。
新特性：引入表格（<table>）、字體樣式、腳本支持（JavaScript）等，推動網頁動態化。

HTML 4.01（1999）

里程碑版本：1999年發布，成為長期主流標準。
關鍵改進：
- 分離結構與樣式：鼓勵使用CSS（層疊樣式表）。
- 框架（<frame>）、多媒體支持（需插件如Flash）。
- 國際化支持（字符編碼規范）。
三種變體：嚴格模式（Strict）、過渡模式（Transitional）、框架集（Frameset）。

XHTML（2000-2009）

XML化嘗試：W3C于2000年推出XHTML 1.0，強制要求語法嚴格性（如標簽閉合、小寫標簽）。
目標：提高代碼規范性和跨平臺兼容性。
爭議：嚴格的語法規則導致開發復雜度上升，瀏覽器兼容性不足，最終未全面普及。

HTML5（2014至今）

現代Web基石：由W3C與WHATWG（網頁超文本應用技術工作小組）合作開發，2014年正式定稿。
核心特性：
- 語義化標簽：<header>, <article>, <nav>等，提升可訪問性和SEO。
- 原生多媒體支持：<video>, <audio>標簽取代Flash。
- 圖形與動畫：<canvas>和SVG支持動態繪圖。
- 離線與存儲：LocalStorage、IndexedDB、Service Worker。
- 設備API：地理位置（Geolocation）、攝像頭訪問。
- 響應式設計：<picture>、<meta viewport>適配多端。
持續演進：HTML5不再以版本號迭代，而是通過模塊化標準持續更新（如HTML Living Standard）。

HTML發展特點

標準化與開放：從IETF到W3C/WHATWG，推動技術統一。
功能擴展：從靜態文檔到富媒體、復雜應用（如WebGL、WebAssembly）。
生態協同：依賴CSS、JavaScript共同構建現代Web技術棧。
移動優先：HTML5助力移動互聯網爆發，支持跨平臺開發。

HTML 基本結構

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>示例網頁標題</title>
</head><body><h1>這是一個一級標題</h1><p>這是一個段落。</p>
</body></html>

結構解釋：

<!DOCTYPE html>
這是文檔類型聲明，它位于 HTML 文檔的第一行，告訴瀏覽器當前文檔使用的是 HTML5 標準。不同的 HTML 版本有不同的文檔類型聲明，而 <!DOCTYPE html>是 HTML5 特有的簡潔聲明方式。
<html> 標簽
- <html> 標簽是 HTML 文檔的根標簽，所有其他的 HTML 元素都必須包含在 <html> 和 </html> 標簽之間。
- lang="zh-CN" 是一個屬性，用于指定文檔的語言為中文（中國大陸地區），有助于搜索引擎和屏幕閱讀器等工具更好地理解和處理頁面內容。
<head> 標簽
- <head>標簽包含了文檔的元數據，這些數據不會直接顯示在網頁上，但對網頁的運行和搜索引擎優化等方面起著重要作用。
  - <meta charset="UTF-8">：設置文檔的字符編碼為 UTF - 8，這樣可以正確顯示各種語言的字符，避免出現亂碼問題。
  - <meta name="viewport" content="width=device-width, initial-scale=1.0">：這是一個針對移動設備的元標簽，width=device-width 表示頁面寬度等于設備的屏幕寬度，initial-scale=1.0 表示初始縮放比例為 1.0，確保網頁在移動設備上能正確顯示和縮放。
  - <title> 標簽：定義了網頁的標題，它會顯示在瀏覽器的標題欄或標簽頁上，同時也是搜索引擎優化的重要元素之一。
<body> 標簽
- <body>標簽包含了網頁的可見內容，如文本、圖像、鏈接、表格等。所有用戶在瀏覽器中看到的內容都應該放在<body>和</body>標簽之間。
  - <h1> 標簽：表示一級標題，HTML 提供了從 <h1> 到 <h6> 共六級標題，用于組織頁面內容的層次結構。
  - <p> 標簽：用于定義段落，將文本內容劃分為不同的段落，使頁面結構更清晰。

網頁基本標簽

標題標簽（`<h1>` - `<h6>`）

功能：

用于定義網頁中不同級別的標題，從 <h1> 到 <h6> 重要性依次降低，字號也逐漸變小。<h1> 通常用于頁面的主標題，而 <h6> 用于最低級別的子標題。

示例：

<h1>這是一級標題</h1>
<h2>這是二級標題</h2>
<h3>這是三級標題</h3>
<h4>這是四級標題</h4>
<h5>這是五級標題</h5>
<h6>這是六級標題</h6>

注意事項：

搜索引擎會根據標題標簽來理解頁面的結構和內容重點，因此合理使用標題標簽對 SEO 很重要。
一般一個頁面應該只有一個 <h1> 標簽，用于突出頁面的核心主題。

段落標簽（`<p>`）

功能：

用于將文本內容組織成段落。瀏覽器會自動在段落前后添加一定的間距，使頁面內容更具可讀性。

示例：

<p>這是一個段落的內容。它可以包含多行文本，并且瀏覽器會自動處理段落之間的間距。</p>
<p>這是另一個段落，與上一個段落會有明顯的分隔。</p>

注意事項：

段落標簽是塊級元素，會獨占一行，并且在前后產生換行效果。
可以通過 CSS 對段落的樣式（如字體、顏色、行高、邊距等）進行進一步的定制。

換行標簽（`<br>`）

功能：

單標簽，用于在文本中強制換行，使后續內容顯示在下一行，但不會像段落標簽那樣產生額外的間距。

示例：

這是第一行文本<br>這是第二行文本，它緊跟在第一行之后，只是進行了換行。

注意事項：

不要過度使用 <br> 標簽來分隔內容，對于有邏輯的段落劃分，應該使用 <p> 標簽。
<br> 標簽在 HTML 中是單標簽，不需要閉合。

水平線標簽（`<hr>`）

功能：

單標簽，在網頁中創建一條水平線，用于分隔不同的內容區域，視覺上起到劃分頁面板塊的作用。

示例：

<p>這是第一段內容。</p>
<hr>
<p>這是第二段內容，與第一段通過水平線分隔開來。</p>

注意事項：

<hr> 標簽的樣式（如顏色、粗細、長度等）可以通過 CSS 進行修改。
同樣，它也是單標簽，無需閉合。

注釋（``）

功能：

用于在 HTML 代碼中添加注釋，注釋內容不會在瀏覽器中顯示，主要是為開發者提供代碼說明，方便后續的代碼維護和團隊協作。

示例：

<!-- 這是一個注釋，用于解釋下面的段落是關于產品介紹的 -->
<p>這款產品具有多種功能，能滿足您的不同需求。</p>

注意事項：

注釋可以跨越多行，只要在  之間的內容都會被視為注釋。
合理使用注釋可以提高代碼的可讀性，但不要添加過多無意義的注釋。

特殊符號

功能：

在 HTML 中，有些字符具有特殊的含義（如 <、> 用于表示標簽），如果要在頁面中顯示這些字符本身，就需要使用特殊符號（也稱為 HTML 實體）。此外，還有一些常用的符號（如版權符號 ?、注冊商標符號 ? 等）也可以通過特殊符號來表示。

示例：

特殊符號	描述	HTML 實體
`<`	小于號	`<`
`>`	大于號	`>`
`&`	和號	`&`
`"`	引號	`"`
`'`	單引號	`'`
`?`	版權符號	`?`
`?`	注冊商標符號	`?`
`?`	商標符號	`?`
`空格`	多個連續空格在 HTML 中會被合并為一個，使用可以顯示多個連續空格

<p>這是一個小于號：&lt;，這是一個大于號：&gt;。</p>
<p>這是版權符號：&copy; 2025 公司名稱。</p>

注意事項：

特殊符號以 & 開頭，以 ; 結尾，中間是特定的字符實體名稱或編號。
記住常用的特殊符號可以避免在頁面中出現字符顯示錯誤的問題。

圖像標簽

在 HTML 中，<img> 標簽用于在網頁上顯示圖像。以下是關于 <img> 標簽的詳細介紹：

基本語法

<img> 是一個空標簽，即它只需要開始標簽，不需要結束標簽。其基本語法如下：

<img src="圖像文件的路徑或 URL" alt="替代文本">

主要屬性

src 屬性

作用：src（source 的縮寫）屬性是 <img> 標簽必須的屬性，它指定了要顯示的圖像的路徑或 URL。
示例
- 本地圖像：如果圖像文件與 HTML 文件在同一目錄下，直接寫文件名即可。

<img src="example.jpg" alt="示例圖片">

指定子目錄：若圖像在子目錄中，需要指定相對路徑。

<img src="images/example.jpg" alt="示例圖片">

遠程圖像：可以使用完整的 URL 引用互聯網上的圖像。

<img src="https://example.com/images/example.jpg" alt="示例圖片">

alt 屬性

作用：alt（alternative text 的縮寫）屬性提供了圖像的替代文本。當圖像無法顯示時（如網絡問題、文件路徑錯誤等），瀏覽器會顯示 alt 屬性中的文本；同時，搜索引擎也會讀取 alt 屬性內容，有助于 SEO；對于使用屏幕閱讀器的盲人用戶，屏幕閱讀器會朗讀 alt 屬性的內容。
示例

<img src="nonexistent.jpg" alt="這是一張本應顯示但未成功加載的圖片">

width 和 height 屬性

作用：這兩個屬性用于指定圖像顯示的寬度和高度，單位可以是像素（px）或百分比（%）。如果只設置其中一個屬性，瀏覽器會按比例自動調整另一個屬性的值，以保持圖像的原始寬高比；如果同時設置兩個屬性，圖像可能會被拉伸或壓縮。
示例

<!-- 指定像素寬度和高度 -->
<img src="example.jpg" alt="示例圖片" width="300" height="200">
<!-- 指定百分比寬度，高度自動按比例調整 -->
<img src="example.jpg" alt="示例圖片" width="50%">

title 屬性

作用：title 屬性為圖像提供額外的提示信息。當用戶將鼠標懸停在圖像上時，會顯示 title 屬性中的文本。
示例

<img src="example.jpg" alt="示例圖片" title="點擊查看大圖">

圖像的對齊和樣式

雖然 <img> 標簽本身也有一些用于對齊的屬性（如 align），但現在更推薦使用 CSS 來控制圖像的對齊和樣式。

使用 CSS 控制對齊

<!DOCTYPE html>
<html lang="en">
<head><style>.center-img {display: block;margin-left: auto;margin-right: auto;}.right-img {float: right;}</style>
</head>
<body><!-- 居中對齊 --><img src="example.jpg" alt="示例圖片" class="center-img"><!-- 右對齊 --><img src="example.jpg" alt="示例圖片" class="right-img">
</body>
</html>

響應式圖像

為了使圖像在不同設備和屏幕尺寸上都能良好顯示，可以使用 srcset 和 sizes 屬性。

srcset 和 sizes 屬性

srcset：允許提供多個不同分辨率的圖像文件，瀏覽器會根據設備的屏幕分辨率和視口大小選擇合適的圖像。
sizes：定義不同視口寬度下圖像的顯示寬度。

<img src="small.jpg"srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w"sizes="(max-width: 500px) 100vw, (max-width: 1000px) 50vw, 33vw"alt="響應式示例圖片">

在上述示例中：

srcset 列出了不同分辨率的圖像文件及其對應的寬度（以像素為單位，后面跟 w）。
sizes 定義了在不同視口寬度下圖像的顯示寬度。例如，當視口寬度小于等于 500px 時，圖像寬度為視口寬度的 100%；當視口寬度小于等于 1000px 時，圖像寬度為視口寬度的 50%；否則，圖像寬度為視口寬度的 33%。瀏覽器會根據這些信息選擇最合適的圖像來顯示。

鏈接標簽

在 HTML 里，鏈接標簽主要是 <a>（錨點標簽），它能創建超鏈接，把當前網頁與其他網頁、文件、同一頁面不同位置、電子郵件地址等連接起來。以下是對 <a> 標簽的詳細解析：

基本語法

標簽屬于雙標簽，要有開始標簽 <a> 和結束標簽 </a>，中間可包含鏈接文本或其他可點擊元素。其基本語法如下：

<a href="目標地址">鏈接文本</a>

重要屬性

`href` 屬性

作用：href（hypertext reference 的縮寫）是 <a> 標簽核心屬性，用于指定鏈接的目標地址，它可以是網頁 URL、文件路徑、電子郵件地址、同一頁面內的錨點等。
示例
- 外部網頁鏈接：能鏈接到其他網站的頁面。

<a href="https://www.baidu.com">訪問百度</a>

內部網頁鏈接：可鏈接到同一網站內的其他頁面，采用相對路徑。

<a href="products.html">產品展示</a>

文件下載鏈接：鏈接到一個文件，點擊后會觸發文件下載。

<a href="report.docx">下載報告</a>

電子郵件鏈接：使用 mailto: 協議，點擊鏈接會打開用戶默認郵件客戶端并填寫收件人地址。

<a href="mailto:support@example.com">聯系客服</a>

同一頁面內的錨點鏈接：先在目標位置設置 id 屬性，然后在鏈接的 href 屬性中用 # 加上該 id 值。

<a href="#section3">跳至第三部分</a>
<h2 id="section3">第三部分內容</h2>

`target` 屬性

作用：target 屬性用來指定鏈接的打開方式，即鏈接在哪個窗口或框架中打開。
常見取值及示例
- _self：這是默認值，會在當前窗口或框架中打開鏈接。

<a href="page.html" target="_self">在當前窗口打開</a>

_blank：會在新窗口或新標簽頁中打開鏈接。

<a href="https://www.google.com" target="_blank">在新窗口打開谷歌</a>

_parent：在父框架中打開鏈接，若沒有父框架，則等同于 _self。
_top：在整個瀏覽器窗口中打開鏈接，會取消所有框架。

`title` 屬性

作用：title 屬性為鏈接提供額外提示信息。當用戶將鼠標懸停在鏈接上時，會顯示 title 屬性中的文本。
示例

<a href="about.html" title="了解我們的公司歷史和團隊">關于我們</a>

`rel` 屬性

作用：rel（relationship 的縮寫）屬性用于指定當前文檔與鏈接文檔之間的關系，常見用途包括搜索引擎優化和安全提示。
常見取值及示例
- nofollow：告知搜索引擎不要追蹤該鏈接，常用于用戶可提交內容的頁面（如評論區），防止垃圾鏈接影響網站排名。

<a href="https://untrusted-site.com" rel="nofollow">不可信網站鏈接</a>

noopener：當使用 target="_blank" 打開外部鏈接時，添加 rel="noopener" 可提高安全性，防止新窗口的腳本訪問當前窗口的 window.opener 對象，避免潛在安全風險。

<a href="https://external-site.com" target="_blank" rel="noopener">安全打開外部網站</a>

`download` 屬性

作用：當鏈接指向一個文件時，添加 download 屬性會強制瀏覽器下載該文件，而不是嘗試打開它。
示例

<a href="image.jpg" download>下載圖片</a>

鏈接樣式

可以運用 CSS 改變鏈接的外觀，如顏色、下劃線、鼠標懸停效果等。

示例代碼

<!DOCTYPE html>
<html lang="en">
<head><style>/* 未訪問的鏈接 */a:link {color: #007BFF;text-decoration: none;}/* 已訪問的鏈接 */a:visited {color: #6C757D;}/* 鼠標懸停的鏈接 */a:hover {color: #FFC107;text-decoration: underline;}/* 激活的鏈接（鼠標按下時） */a:active {color: #DC3545;}</style>
</head>
<body><a href="#">示例鏈接</a>
</body>
</html>

特殊鏈接形式

圖像鏈接

<a> 標簽不僅能包含文本，還能包含圖像，將圖像轉變為可點擊的鏈接。

<a href="https://example.com"><img src="image.jpg" alt="示例圖片">
</a>

按鈕鏈接

可以把 <button> 元素放在 <a> 標簽內，實現按鈕樣式的鏈接。

<a href="https://example.com"><button>點擊訪問</button>
</a>

塊元素和行內元素

在 HTML 中，元素根據其顯示方式主要分為行內元素（Inline Elements）和塊元素（Block Elements），它們在布局和呈現上有顯著的差異。以下詳細介紹這兩種元素：

塊元素（Block Elements）

特點

獨占一行：塊元素在頁面中會獨自占據一行，無論其內容多少，后續元素會自動換行顯示在其下方。
可設置寬高：可以通過 CSS 顯式地設置塊元素的寬度（width）和高度（height）屬性。如果不設置寬度，默認情況下，塊元素會擴展到其父元素的寬度。
可包含其他元素：塊元素通常可以包含行內元素和其他塊元素，用于構建頁面的整體結構。

常見的塊元素

<div>：是最常用的塊元素之一，本身沒有特定的語義，主要用于將頁面內容進行分組，方便進行樣式設置和布局控制。

<div style="background-color: lightgray; padding: 10px;"><p>這是一個包含在 div 中的段落。</p>
</div>

<p>：用于定義段落，瀏覽器會自動在段落前后添加一定的間距。

<p>這是一個段落的文本內容。</p>

<h1> - <h6>：用于定義不同級別的標題，<h1> 級別最高，字號最大，<h6> 級別最低，字號最小。

<h1>這是一級標題</h1>

<ul>、<ol> 和 <li>：<ul> 定義無序列表，<ol> 定義有序列表，<li> 定義列表項。

<ul><li>列表項 1</li><li>列表項 2</li>
</ul>

<form>：用于創建 HTML 表單，用戶可以在表單中輸入數據并提交到服務器。

<form action="submit.php" method="post"><input type="text" name="username"><input type="submit" value="提交">
</form>

行內元素（Inline Elements）

特點

不獨占一行：行內元素會在同一行內顯示，不會強制換行，直到當前行空間不足才會換行。
寬度和高度由內容決定：行內元素的寬度和高度是由其內容的大小決定的，無法通過 CSS 直接設置其寬度和高度（但某些行內元素如 <img> 除外）。
只能包含行內元素：一般情況下，行內元素只能包含其他行內元素，不能包含塊元素。

常見的行內元素

<a>：用于創建超鏈接，可以鏈接到其他網頁、文件、電子郵件地址等。

<a href="https://www.example.com">訪問示例網站</a>

<img>：用于在網頁中插入圖像。雖然它是行內元素，但可以設置寬度和高度屬性。

<img src="example.jpg" alt="示例圖片" width="200" height="150">

<input>：用于創建各種輸入字段，如文本框、密碼框、復選框、單選框等。

<input type="text" placeholder="請輸入內容">

<label>：用于為表單元素定義標簽，提高表單的可用性和可訪問性。

<label for="username">用戶名：</label>
<input type="text" id="username" name="username">

<span>：是一個通用的行內元素，本身沒有特定的語義，主要用于對文本的一部分進行分組和樣式設置。

<p>這是一段 <span style="color: red;">紅色</span> 的文本。</p>

元素的轉換

通過 CSS 的 display 屬性，可以將塊元素轉換為行內元素，或將行內元素轉換為塊元素。

示例

將塊元素轉換為行內元素：

<!DOCTYPE html>
<html lang="en">
<head><style>div {display: inline;background-color: lightblue;}</style>
</head>
<body><div>這是一個轉換為行內元素的 div。</div><div>這是另一個轉換為行內元素的 div。</div>
</body>
</html>

將行內元素轉換為塊元素：

<!DOCTYPE html>
<html lang="en">
<head><style>span {display: block;background-color: lightgreen;margin-bottom: 5px;}</style>
</head>
<body><span>這是一個轉換為塊元素的 span。</span><span>這是另一個轉換為塊元素的 span。</span>
</body>
</html>

列表

在 HTML 中，列表用于將相關信息進行分組和展示，使頁面內容更加有條理。HTML 提供了三種主要類型的列表：無序列表、有序列表和定義列表。以下是對這三種列表的詳細介紹：

無序列表（Unordered List）

概述

無序列表使用項目符號來標記每個列表項，列表項之間沒有特定的順序。常用于展示并列的信息，如菜單選項、要點列舉等。

語法

無序列表使用 <ul> 標簽作為容器，每個列表項使用 <li> 標簽表示。

<ul><li>列表項 1</li><li>列表項 2</li><li>列表項 3</li>
</ul>

示例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>無序列表示例</title>
</head><body><h2>水果列表</h2><ul><li>蘋果</li><li>香蕉</li><li>橙子</li></ul>
</body></html>

自定義項目符號樣式

可以使用 CSS 的 list-style-type 屬性來改變項目符號的樣式，常見取值如下：

disc：默認值，實心圓。
circle：空心圓。
square：實心方塊。
none：不顯示項目符號。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>自定義無序列表樣式</title><style>ul.square {list-style-type: square;}ul.none {list-style-type: none;}</style>
</head><body><h2>自定義項目符號樣式</h2><ul class="square"><li>項目 1</li><li>項目 2</li></ul><ul class="none"><li>無項目符號 1</li><li>無項目符號 2</li></ul>
</body></html>

有序列表（Ordered List）

概述

有序列表使用數字或字母來標記每個列表項，列表項之間有明確的順序。常用于展示步驟、排名等信息。

語法

有序列表使用 <ol> 標簽作為容器，每個列表項同樣使用 <li> 標簽表示。

<ol><li>列表項 1</li><li>列表項 2</li><li>列表項 3</li>
</ol>

示例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>有序列表示例</title>
</head><body><h2>考試步驟</h2><ol><li>進入考場</li><li>找到座位</li><li>等待發卷</li></ol>
</body></html>

自定義編號樣式

可以使用 CSS 的 list-style-type 屬性來改變編號的樣式，常見取值如下：

decimal：默認值，十進制數字（1, 2, 3…）。
lower-roman：小寫羅馬數字（i, ii, iii…）。
upper-roman：大寫羅馬數字（I, II, III…）。
lower-alpha：小寫字母（a, b, c…）。
upper-alpha：大寫字母（A, B, C…）。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>自定義有序列表樣式</title><style>ol.roman {list-style-type: lower-roman;}ol.alpha {list-style-type: upper-alpha;}</style>
</head><body><h2>自定義編號樣式</h2><ol class="roman"><li>項目 1</li><li>項目 2</li></ol><ol class="alpha"><li>項目 A</li><li>項目 B</li></ol>
</body></html>

定義列表（Definition List）

概述

定義列表用于展示術語及其定義，每個術語使用 <dt>（Definition Term）標簽表示，對應的定義使用 <dd>（Definition Description）標簽表示。

語法

定義列表使用 <dl> 標簽作為容器，內部包含多個 <dt> 和 <dd> 標簽對。

<dl><dt>術語 1</dt><dd>術語 1 的定義</dd><dt>術語 2</dt><dd>術語 2 的定義</dd>
</dl>

示例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>定義列表示例</title>
</head><body><h2>計算機術語定義</h2><dl><dt>CPU</dt><dd>中央處理器，是計算機的核心組件，負責執行指令和處理數據。</dd><dt>RAM</dt><dd>隨機存取存儲器，用于臨時存儲計算機正在運行的程序和數據。</dd></dl>
</body></html>

嵌套列表

在 HTML 中，列表可以進行嵌套，即在一個列表項中可以包含另一個列表。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>嵌套列表示例</title>
</head><body><h2>嵌套列表</h2><ul><li>主列表項 1<ol><li>子列表項 1</li><li>子列表項 2</li></ol></li><li>主列表項 2</li></ul>
</body></html>

表格

在 HTML 中，<table> 標簽用于創建表格，表格能夠以結構化的方式展示數據，使信息更加清晰易讀。以下是關于 HTML 表格的詳細介紹：

基本結構標簽

<table> 標簽：這是創建表格的根元素，所有表格相關的內容都包含在 <table> 和 </table> 標簽之間。

<table><!-- 表格內容 -->
</table>

<tr> 標簽：代表表格行（table row），一個 <tr> 標簽表示表格中的一行數據，多個 <tr> 標簽可以創建多行表格。

<table><tr><!-- 第一行的單元格內容 --></tr><tr><!-- 第二行的單元格內容 --></tr>
</table>

<td> 標簽：表示表格數據單元格（table data cell），用于定義表格行中的單個數據單元格。每個 <tr> 標簽內可以包含多個 <td> 標簽。

<table><tr><td>單元格 1</td><td>單元格 2</td></tr><tr><td>單元格 3</td><td>單元格 4</td></tr>
</table>

<th> 標簽：用于定義表頭單元格（table header cell），通常位于表格的第一行，用于表示每一列的標題。<th> 標簽內的文本通常會以粗體和居中的方式顯示。

<table><tr><th>姓名</th><th>年齡</th></tr><tr><td>張三</td><td>25</td></tr><tr><td>李四</td><td>30</td></tr>
</table>

表格的屬性

border 屬性：早期用于定義表格邊框的寬度，單位是像素。雖然現在不推薦直接在 HTML 標簽中使用該屬性（推薦用 CSS 來設置邊框樣式），但了解它的作用有助于理解表格的基本外觀設置。

<table border="1"><!-- 表格內容 -->
</table>

cellpadding 屬性：指定單元格內內容與單元格邊框之間的空白距離，單位是像素。

<table cellpadding="5"><!-- 表格內容 -->
</table>

cellspacing 屬性：定義相鄰單元格之間的間距，單位是像素。

<table cellspacing="2"><!-- 表格內容 -->
</table>

表格的跨行和跨列

rowspan 屬性：用于使單元格跨行，rowspan 的值表示該單元格要跨越的行數。

<table border="1"><tr><td rowspan="2">合并的單元格</td><td>單元格 2</td></tr><tr><td>單元格 4</td></tr>
</table>

colspan 屬性：用于使單元格跨列，colspan 的值表示該單元格要跨越的列數。

<table border="1"><tr><td colspan="2">合并的單元格</td></tr><tr><td>單元格 3</td><td>單元格 4</td></tr>
</table>

表格的分組標簽

<thead> 標簽：用于定義表格的表頭部分，通常包含 <tr> 和 <th> 標簽。表頭部分的內容在顯示時可以與表格主體部分區分開來，比如設置不同的樣式。

<table><thead><tr><th>列標題 1</th><th>列標題 2</th></tr></thead><tbody><tr><td>數據 1</td><td>數據 2</td></tr><tr><td>數據 3</td><td>數據 4</td></tr></tbody>
</table>

<tbody> 標簽：表示表格的主體部分，包含表格的實際數據行，由多個 <tr> 和 <td> 標簽組成。

<tfoot> 標簽：用于定義表格的表尾部分，通常用于顯示表格的匯總信息等。

媒體元素

在 HTML 中，媒體元素主要用于在網頁上嵌入音頻、視頻等多媒體內容，為用戶帶來更豐富的交互體驗。以下是對 HTML 主要媒體元素的詳細介紹：

`<audio>` 元素

功能

<audio> 元素用于在網頁中嵌入音頻文件，支持多種音頻格式，如 MP3、WAV、OGG 等。用戶可以直接在網頁上播放音頻，而無需跳轉到其他播放器應用。

基本語法

<audio src="音頻文件的 URL" controls></audio>

src 屬性：指定要播放的音頻文件的路徑或 URL。
controls 屬性：添加該屬性后，瀏覽器會顯示音頻播放器的控制條，用戶可以進行播放、暫停、調節音量等操作。

示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>音頻示例</title>
</head>
<body><audio src="example.mp3" controls></audio>
</body>
</html>

其他常用屬性

autoplay：音頻頁面加載完成后自動播放。但由于用戶體驗和數據流量等問題，部分瀏覽器對自動播放有一定限制。

<audio src="example.mp3" controls autoplay></audio>

loop：音頻播放完后自動循環播放。

<audio src="example.mp3" controls loop></audio>

preload：指定音頻在頁面加載時的預加載策略，有三個可選值：
- auto：瀏覽器會在頁面加載時盡可能多地預加載音頻。
- metadata：只預加載音頻的元數據（如時長、比特率等）。
- none：不進行預加載。

<audio src="example.mp3" controls preload="metadata"></audio>

支持多種音頻格式

為了確保在不同瀏覽器中都能正常播放音頻，可以提供多種音頻格式，使用 <source> 元素。

<audio controls><source src="example.mp3" type="audio/mpeg"><source src="example.ogg" type="audio/ogg">您的瀏覽器不支持音頻播放。
</audio>

`<video>` 元素

功能

<video> 元素用于在網頁中嵌入視頻文件，支持多種視頻格式，如 MP4、WebM、OGG 等。用戶可以在網頁上直接播放視頻，無需借助外部視頻播放器。

基本語法

<video src="視頻文件的 URL" controls width="640" height="360"></video>

src 屬性：指定要播放的視頻文件的路徑或 URL。
controls 屬性：添加該屬性后，瀏覽器會顯示視頻播放器的控制條，用戶可以進行播放、暫停、調節音量、快進等操作。
width 和 height 屬性：用于指定視頻播放器的寬度和高度。

示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>視頻示例</title>
</head>
<body><video src="example.mp4" controls width="640" height="360"></video>
</body>
</html>

其他常用屬性

autoplay：視頻頁面加載完成后自動播放，同樣受瀏覽器限制。

<video src="example.mp4" controls autoplay width="640" height="360"></video>

loop：視頻播放完后自動循環播放。

<video src="example.mp4" controls loop width="640" height="360"></video>

preload：指定視頻在頁面加載時的預加載策略，可選值與 <audio> 元素相同。

<video src="example.mp4" controls preload="auto" width="640" height="360"></video>

poster：指定視頻播放前顯示的海報圖片的 URL，當用戶還未開始播放視頻時，會顯示該圖片。

<video src="example.mp4" controls poster="poster.jpg" width="640" height="360"></video>

支持多種視頻格式

為了兼容不同瀏覽器，同樣可以使用 <source> 元素提供多種視頻格式。

<video controls width="640" height="360"><source src="example.mp4" type="video/mp4"><source src="example.webm" type="video/webm">您的瀏覽器不支持視頻播放。
</video>

網頁的簡單布局

HTML 頁面具有特定的結構，合理的頁面結構有助于提升網頁的可讀性、可維護性，同時也有利于搜索引擎優化（SEO）。下面從整體框架、頭部信息、主體內容和輔助結構等方面詳細分析 HTML 頁面結構。

整體框架

一個標準的 HTML 頁面包含文檔類型聲明、HTML 根元素，HTML 根元素內又分為頭部（<head>）和主體（<body>）兩大部分。以下是基本結構示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head><!-- 頭部信息 -->
</head>
<body><!-- 主體內容 -->
</body>
</html>

<!DOCTYPE html>：這是文檔類型聲明，它告訴瀏覽器當前頁面使用的是 HTML5 標準。不同的 HTML 版本有不同的文檔類型聲明，HTML5 的聲明最為簡潔。
<html>：HTML 文檔的根標簽，所有的 HTML 元素都要包含在<html>和</html>之間。lang="zh-CN"表示頁面語言為中文（中國大陸地區），這有助于搜索引擎和屏幕閱讀器等工具更好地理解頁面內容。

頭部信息（`<head>`）

頭部信息包含了頁面的元數據，這些數據不會直接顯示在頁面上，但對頁面的運行和搜索引擎優化等方面起著重要作用。

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>頁面標題</title><link rel="stylesheet" href="styles.css"><script src="script.js"></script>
</head>

<meta>標簽
- 字符編碼：<meta charset="UTF-8">指定了頁面的字符編碼為 UTF - 8，這樣可以正確顯示各種語言的字符，避免出現亂碼問題。
- 視口設置：<meta name="viewport" content="width=device-width, initial-scale=1.0">用于適配移動設備，width=device-width表示頁面寬度等于設備的屏幕寬度，initial-scale=1.0表示初始縮放比例為 1.0。
- 其他元數據：還可以通過<meta>標簽設置頁面的描述、關鍵詞等信息，例如<meta name="description" content="這是一個關于HTML頁面結構的示例頁面">，這些信息有助于搜索引擎了解頁面內容。
<title>標簽：定義了頁面的標題，它會顯示在瀏覽器的標題欄或標簽頁上，是搜索引擎優化的重要元素之一，應簡潔明了地概括頁面內容。
<link>標簽：通常用于引入外部的 CSS 文件，為頁面添加樣式。rel="stylesheet"表示鏈接的是樣式表，href="styles.css"指定了 CSS 文件的路徑。
<script>標簽：用于引入外部的 JavaScript 文件，為頁面添加交互功能。src="script.js"指定了 JavaScript 文件的路徑。

主體內容（`<body>`）

主體內容是用戶在瀏覽器中實際看到的部分，包含了各種 HTML 元素，如標題、段落、圖像、鏈接等。

<body><!-- 頁眉部分 --><header><h1>網站標題</h1><nav><ul><li><a href="#">首頁</a></li><li><a href="#">關于我們</a></li><li><a href="#">服務項目</a></li><li><a href="#">聯系我們</a></li></ul></nav></header><!-- 主要內容部分 --><main><article><h2>文章標題</h2><p>這是文章的正文內容。可以包含多個段落，詳細闡述相關主題。</p><img src="example.jpg" alt="示例圖片"></article></main><!-- 側邊欄部分 --><aside><h3>側邊欄標題</h3><p>這里可以放置一些補充信息，如廣告、推薦內容等。</p></aside><!-- 頁腳部分 --><footer><p>版權所有 &copy; 2025</p></footer>
</body>

<header>標簽：通常包含網站的標題、導航菜單等信息，作為頁面或頁面中某個區域的頁眉。
<nav>標簽：用于定義導航鏈接，包含一組導航菜單，方便用戶在頁面之間進行跳轉。
<main>標簽：表示頁面的主要內容，一個頁面應該只有一個<main>元素，它不包含側邊欄、頁眉頁腳等內容。
<article>標簽：用于表示一個獨立的、完整的內容塊，如一篇文章、博客帖子等，具有自己的標題和正文。
<img>標簽：用于在頁面中插入圖像，src屬性指定圖像的文件路徑或 URL，alt屬性提供圖像的替代文本，當圖像無法顯示時會顯示該文本。
<aside>標簽：通常用于放置與主要內容相關的補充信息，如側邊欄、廣告等。
<footer>標簽：作為頁面或頁面中某個區域的頁腳，通常包含版權信息、聯系方式等。

輔助結構

除了上述主要部分，HTML 頁面還可以包含一些輔助結構，如<section>標簽用于將頁面內容進行分段，<div>標簽用于對元素進行分組，方便進行樣式設置和布局控制。

<section><h2>分段標題</h2><p>這是分段的內容。</p>
</section>
<div class="container"><p>這是一個分組的內容。</p>
</div>

<section>標簽：表示頁面中的一個章節或區段，通常包含一個標題和相關的內容。
<div>標簽：是一個通用的塊級元素，本身沒有特定的語義，主要用于將頁面元素進行分組，通過 CSS 對其進行樣式設置和布局控制。

內聯框架 iframe

HTML 內聯框架 <iframe> 是一個非常實用的元素，它允許在當前 HTML 頁面中嵌入另一個 HTML 頁面。以下是關于 <iframe> 的詳細介紹：

基本語法

<iframe>標簽需要同時有開始標簽 <iframe> 和結束標簽 </iframe>，其基本語法如下：

<iframe src="URL" width="寬度" height="高度"></iframe>

src 屬性：必需屬性，指定要嵌入的網頁的 URL。
width 和 height 屬性：用于設置內聯框架的寬度和高度，單位可以是像素（px）或百分比（%）。

示例代碼

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Iframe Example</title>
</head>
<body><h1>使用 iframe 嵌入網頁</h1><iframe src="https://www.example.com" width="800" height="600"></iframe>
</body>
</html>

在這個例子中，一個寬度為 800 像素、高度為 600 像素的內聯框架會被創建，并且在其中加載 https://www.example.com 這個網頁。

常用屬性

`src`

指定要嵌入的網頁的 URL，可以是外部網頁，也可以是同一網站內的頁面。

<iframe src="local-page.html" width="500" height="300"></iframe>

`width` 和 `height`

設置內聯框架的寬度和高度。可以使用像素值或者百分比。

<iframe src="https://example.com" width="50%" height="400px"></iframe>

`frameborder`

設置內聯框架的邊框，值為 0 表示不顯示邊框，1 表示顯示邊框。不過該屬性已逐漸被 CSS 替代，現在更推薦使用 CSS 來控制邊框樣式。

<iframe src="page.html" frameborder="0"></iframe>

`allowfullscreen`

允許內聯框架中的內容以全屏模式顯示，常用于嵌入視頻等場景。

<iframe src="video.html" allowfullscreen></iframe>

`sandbox`

為內聯框架提供額外的安全限制，它可以限制內聯框架中頁面的某些行為，例如阻止腳本執行、表單提交等。

<iframe src="untrusted-page.html" sandbox></iframe>

sandbox 屬性可以有多個值，如 allow-scripts 允許執行腳本，allow-forms 允許提交表單等。例如：

<iframe src="untrusted-page.html" sandbox="allow-scripts allow-forms"></iframe>

表單

表單基礎

表單的定義

HTML 表單是一種用于用戶輸入數據的結構，通過 <form> 元素創建。表單允許用戶輸入文本、選擇選項、上傳文件等，并將這些數據發送到服務器進行處理。

基本結構

<form action="處理數據的URL" method="提交方法"><!-- 表單元素 --><input type="text" name="字段名"><input type="submit" value="提交">
</form>

<form> 標簽：是表單的容器，所有表單元素都應放在這個標簽內部。
action 屬性：指定表單數據要發送到的服務器端腳本的 URL。
method 屬性：定義表單數據的提交方式，主要有 GET 和 POST。

提交方式

GET 方式
表單數據會附加在 URL 后面，以鍵值對的形式出現，例如 http://example.com/form.php?username=john&age=25。數據會顯示在瀏覽器的地址欄中，不適合傳輸敏感信息，且傳輸的數據量有限。

<form action="process.php" method="GET"><input type="text" name="username"><input type="submit" value="提交">
</form>

POST 方式
表單數據放在 HTTP 請求的消息體中，不會顯示在 URL 中，適合傳輸敏感信息，且傳輸的數據量沒有限制。

<form action="process.php" method="POST"><input type="text" name="username"><input type="submit" value="提交">
</form>

表單提交的目標

可以通過 target 屬性指定表單提交后響應頁面的顯示位置。

_self：在當前窗口打開響應頁面（默認值）。
_blank：在新窗口打開響應頁面。

<form action="process.php" method="POST" target="_blank"><input type="text" name="username"><input type="submit" value="提交">
</form>

表單元素

`<input>` 元素

<input> 是最常用的表單元素，通過 type 屬性可以定義不同類型的輸入框。

文本輸入框（type="text"）

<input type="text" name="username" placeholder="請輸入用戶名">

密碼輸入框（type="password"）

<input type="password" name="password" placeholder="請輸入密碼">

單選按鈕（type="radio"）

<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女

同一組單選按鈕需有相同的 name 屬性，用戶只能選擇其中一個。

復選框（type="checkbox"）

<input type="checkbox" name="hobbies" value="reading"> 閱讀
<input type="checkbox" name="hobbies" value="swimming"> 游泳

用戶可以選擇多個復選框。

文件選擇框（type="file"）

<input type="file" name="avatar">

允許用戶選擇本地文件進行上傳。

隱藏輸入框（type="hidden"）

<input type="hidden" name="form_id" value="123">

用于存儲一些不需要用戶看到但需要隨表單一起提交的數據。

提交按鈕（type="submit"）

<input type="submit" value="提交">

點擊該按鈕會將表單數據提交到 action 指定的 URL。

重置按鈕（type="reset"）

<input type="reset" value="重置">

點擊該按鈕會將表單中的所有輸入項重置為初始值。

按鈕（type="button"）

<input type="button" value="自定義按鈕" onclick="customFunction()">

通常用于執行自定義的 JavaScript 函數。

`<textarea>` 元素

用于輸入多行文本。

<textarea name="message" rows="5" cols="30" placeholder="請輸入留言內容"></textarea>

rows 屬性指定文本框的行數。
cols 屬性指定文本框的列數。

`<select>` 和 `<option>` 元素

用于創建下拉列表。

<select name="country"><option value="china">中國</option><option value="usa">美國</option><option value="uk">英國</option>
</select>

可以使用 selected 屬性設置默認選中項：

<select name="country"><option value="china" selected>中國</option><option value="usa">美國</option><option value="uk">英國</option>
</select>

`<datalist>` 元素

與 <input> 元素配合使用，提供一個預定義的選項列表供用戶選擇。

<input list="browsers" name="browser">
<datalist id="browsers"><option value="Chrome"><option value="Firefox"><option value="Safari">
</datalist>

表單屬性

通用屬性

name 屬性：用于標識表單元素，服務器通過該屬性名來獲取表單數據。
value 屬性：設置表單元素的值，對于不同類型的元素有不同的用途。
disabled 屬性：禁用表單元素，用戶無法對其進行操作。

<input type="text" name="username" disabled>

readonly 屬性：設置表單元素為只讀，用戶可以看到其值但無法修改。

<input type="text" name="email" value="example@example.com" readonly>

HTML5 新增屬性

placeholder 屬性：在輸入框中顯示提示信息，當用戶輸入內容時提示信息消失。

<input type="text" name="username" placeholder="請輸入用戶名">

autofocus 屬性：使表單元素在頁面加載時自動獲得焦點。

<input type="text" name="username" autofocus>

required 屬性：指定表單元素為必填項。

<input type="text" name="username" required>

表單驗證

pattern 屬性：使用正則表達式指定輸入值必須匹配的模式。

<input type="text" name="phone" pattern="[0-9]{11}" placeholder="請輸入 11 位手機號碼">

min 和 max 屬性：適用于 type="number"、type="date" 等類型的輸入框，設置輸入值的最小值和最大值。

<input type="number" name="age" min="18" max="100">

minlength 和 maxlength 屬性：用于限制輸入文本的最小和最大長度。

<input type="text" name="password" minlength="6" maxlength="20">