HTML 列表：初学者的全面指南

你好，有抱負的網頁開發者！今天，我們將深入探索 HTML 列表的奇妙世界。作為你親切友善的鄰居計算機老師，我非常興奮能夠引導你走過這段旅程。列表就像是網頁設計中無名英雄——它們為混亂帶來秩序，使信息變得易於消化。所以，讓我們捋起袖子，開始列錄吧！

HTML - Lists

HTML 中的列表

列表是組織網頁信息的基本部分。它們幫助以用戶容易閱讀和理解的方式結構化內容。在 HTML 中，我們有三種主要的列表類型：

非排序列表（ul）
排序列表（ol）
說明列表（dl）

讓我們詳細探討每一種。

非排序列表

非排序列表就像你的購物清單一樣——順序不重要，但項目是重要的。它們通常會以項目符號顯示。

<ul>
<li>蘋果</li>
<li>香蕉</li>
<li>櫻桃</li>
</ul>

這段代碼會渲染為：

蘋果
香蕉
櫻桃

<ul> 標籤創建非排序列表，而每個 <li> 標籤代表一個列表項。

排序列表

排序列表就像一套指示——順序是重要的。它們通常會以數字顯示。

<ol>
<li>起床</li>
<li>刷牙</li>
<li>吃早餐</li>
</ol>

這將顯示為：

起床
刷牙
吃早餐

<ol> 標籤創建排序列表，再次，<li> 標籤用於每個項目。

說明列表

說明列表就像一個詞典——它們將術語與其定義配對。

<dl>
<dt>HTML</dt>
<dd>超文本標記語言</dd>
<dt>CSS</dt>
<dd>層叠樣式表</dd>
</dl>

這會渲染為：

HTML : 超文本標記語言

CSS : 層叠樣式表

在這裡，<dl> 創建說明列表，<dt> 定義術語，而 <dd> 提供描述。

HTML 列表的例子

現在，我們已經介紹了基礎知識，讓我們看看一些更多例子來加強我們的理解。

一個待辦清單

<h2>我的待辦清單</h2>
<ul>
<li>完成 HTML 教程</li>
<li>練習編程</li>
<li>喝杯咖啡休息一下</li>
<li>開始 CSS 教程</li>
</ul>

這使用非排序列表創建了一個簡單的待辦清單。當你不需要為任務指定特定順序時，這非常適合。

食譜指示

<h2>如何製作 PB&J 三明治</h2>
<ol>
<li>拿兩片麵包</li>
<li>在一片麵包上塗花生醬</li>
<li>在另一片麵包上塗果醬</li>
<li>將兩片麵包合在一起</li>
<li>享受你的三明治！</li>
</ol>

這個排序列表非常適合步驟指示，其中順序是關鍵的。

HTML 嵌套列表

有時候，你需要在列表中創建列表。這就是嵌套列表派上用場的地方。

<h2>網頁開發學習路徑</h2>
<ol>
<li>學習 HTML
<ul>
<li>標籤</li>
<li>屬性</li>
<li>列表</li>
</ul>
</li>
<li>學習 CSS
<ul>
<li>選擇器</li>
<li>屬性</li>
<li>盒子模型</li>
</ul>
</li>
<li>學習 JavaScript</li>
</ol>

這創建了一個嵌套結構，其中主題在排序列表中，子主題在主列表項內的非排序列表中。

使用 <div> 標籤進行分組

<div> 標籤是一個多功能的容器，可以用於組合和風格化列表以及其他元素。

<div class="list-container">
<h3>我最喜歡的水果</h3>
<ul>
<li>芒果</li>
<li>草莓</li>
<li>鳳梨</li>
</ul>
</div>

這將標題和列表組合在一起，使其更容易作為一個單元進行風格化或操作。

對 HTML 列表應用 CSS

CSS 可以改變你的列表的外觀。這裡有一個快速的例子：

<style>
ul.fancy {
list-style-type: square;
color: blue;
}
ol.fancy {
list-style-type: upper-roman;
color: green;
}
</style>

<ul class="fancy">
<li>時尚非排序列表項目 1</li>
<li>時尚非排序列表項目 2</li>
</ul>

<ol class="fancy">
<li>時尚排序列表項目 1</li>
<li>時尚排序列表項目 2</li>
</ol>

這段 CSS 將非排序列表的項目符號改為方塊，並將排序列表的項目符號改為大寫羅馬數字，同時也改變了它們的顏色。

HTML 列表中的標記類型

HTML 為列表提供了多種標記類型。以下是一個總結表：

列表類型	標記屬性	描述
非排序列表	disc	預設。實心圓圈
非排序列表	circle	空心圓圈
非排序列表	square	實心方塊
排序列表	decimal	預設。數字（1, 2, 3）
排序列表	lower-alpha	小寫字母（a, b, c）
排序列表	upper-alpha	大寫字母（A, B, C）
排序列表	lower-roman	小寫羅馬數字（i, ii, iii）
排序列表	upper-roman	大寫羅馬數字（I, II, III）

你可以像這樣使用 CSS 來應用它們：

<style>
ul.custom { list-style-type: square; }
ol.custom { list-style-type: lower-roman; }
</style>

<ul class="custom">
<li>自定義非排序列表項目</li>
</ul>

<ol class="custom">
<li>自定義排序列表項目</li>
</ol>

至此，各位！我們已經穿越了 HTML 列表的領地，從基礎知識到一些花哨的風格。記住，熟練使人完美，所以不要害怕嘗試不同的列表類型和風格。誰知道呢？你可能會成為 HTML 列表的米開朗基羅！

快樂編程，願你的列表總是完美縮進！

Credits: Image by storyset