【網頁設計自學】HTML的無序列表以及有序列表
這篇整理 HTML 裡最常見的兩種列表：無序列表 <ul> 與有序列表 <ol>。簡單來說，沒有順序的項目用 ul，有步驟或排名的項目用 ol。
📘 HTML｜無序列表與有序列表
列表是什麼？
在 HTML 中，列表常用來整理一組項目，讓內容看起來更清楚、也更容易閱讀。
常見的列表有兩種：
- 無序列表：使用 <ul>，適合沒有先後順序的項目。
- 有序列表：使用 <ol>，適合有步驟、排名或順序的項目。
🔹 1. 無序列表｜Unordered List
用途
無序列表使用 <ul> 標籤，通常用在「沒有一定順序」的內容。
例如：特色、項目、注意事項、功能列表等。瀏覽器預設會在每個項目前面顯示一個黑色圓點。
基本語法
<ul>
<li>項目 1</li>
<li>項目 2</li>
<li>項目 3</li>
</ul>
適合使用情境
- 條列式介紹
- 注意事項
- 特色、功能列表
- 沒有固定順序的資料整理
顯示效果
- 項目 1
- 項目 2
- 項目 3
🔢 2. 有序列表｜Ordered List
用途
有序列表使用 <ol> 標籤，適合用在「有順序、步驟、排名」的內容。
瀏覽器預設會自動在每個項目前面加上數字，例如 1、2、3。
基本語法
<ol>
<li>第一步</li>
<li>第二步</li>
<li>第三步</li>
</ol>
適合使用情境
- 教學步驟
- 排行榜
- 操作流程
- 需要強調順序的內容
顯示效果
- 第一步
- 第二步
- 第三步
🧭 ul 與 ol 的差異比較
如果一時不知道該用 <ul> 還是 <ol>，可以用下面這張表快速判斷。
| 項目 | 無序列表 ul | 有序列表 ol |
|---|---|---|
| 英文名稱 | Unordered List | Ordered List |
| 標籤 | <ul> | <ol> |
| 預設符號 | 圓點 | 數字 |
| 適合內容 | 沒有順序的項目 | 有順序的步驟或排名 |
| 常見用途 | 特色、注意事項、功能列表 | 教學流程、排行榜、操作步驟 |
🧪 完整 HTML 範例
下面是一個完整的 HTML 範例，同時示範無序列表與有序列表的寫法。
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 中的無序列表與有序列表</title>
</head>
<body>
<h1>無序列表</h1>
<ul>
<li>項目 1</li>
<li>項目 2</li>
<li>項目 3</li>
</ul>
<h1>有序列表</h1>
<ol>
<li>第一步</li>
<li>第二步</li>
<li>第三步</li>
</ol>
</body>
</html>
✅ 小結
HTML 的列表標籤其實很好判斷：
- 沒有順序：使用 <ul>。
- 有順序：使用 <ol>。
- 每個項目：都要放在 <li> 裡面。
簡單記法：
ul 是普通條列，ol 是有順序的條列，而 li 就是每一個列表項目。
ul 是普通條列，ol 是有順序的條列，而 li 就是每一個列表項目。
留言
張貼留言