HTML - 有序列表：初學者指南

你好，未來的網頁開發者們！今天，我們將要進入HTML有序列表的精彩世界。別擔心如果你從未寫過一行代碼——我將成為你這次旅途中的友好指南。在本教程結束時，你將能夠像專業人士一樣創建有序列表！

有序列表是什麼？

在我們進行代碼編寫之前，讓我們先了解什麼是有序列表。想像你正在寫下製作三明治的步驟。你會希望將它們的順序搞亂嗎？這就是有序列表派上用場的地方。它們對於任何需要特定順序的內容都非常適合。

語法：有序列表的建構塊

現在，讓我們來動手寫一些代碼。這是HTML中創建有序列表的基本語法：

<ol>
<li>第一個項目</li>
<li>第二個項目</li>
<li>第三個項目</li>
</ol>

讓我們分解一下：

• <ol> 代表 "ordered list"（有序列表）。它就像是你所有列表項目的容器。
• <li> 意為 "list item"（列表項目）。每個 <li> 標籤代表你列表中的一個項目。

當你運行這段代碼時，它會看起來像這樣：

1. 第一個項目
2. 第二個項目
3. 第三個項目

酷炫吧？瀏覽器會自動為你的項目編號！

定義有序列表：發揮創意

現在我們已經掌握了基本知識，讓我們來給它增加一些趣味。HTML提供了一些方便的屬性來自定義你的有序列表。

'start' 屬性

如果你希望你的列表從除了1以外的數字開始，那麼 'start' 屬性就派上用場了：

<ol start="5">
<li>這將是第5個數字</li>
<li>這將是第6個數字</li>
<li>這將是第7個數字</li>
</ol>

這將顯示為：

5. 這將是第5個數字
6. 這將是第6個數字
7. 這將是第7個數字

'reversed' 屬性

想要倒數？試試 'reversed' 屬性：

<ol start="5" reversed>
<li>這將是第5個數字</li>
<li>這將是第4個數字</li>
<li>這將是第3個數字</li>
</ol>

這將顯示為：

5. 這將是第5個數字
6. 這將是第4個數字
7. 這將是第3個數字

HTML有序列表示例：融會貫通

讓我們來看一個更複雜的例子。說我們正在創建有我們之前提到的三明治的食譜：

<h2>如何製作花生醬和果醬三明治</h2>
<ol>
<li>準備你的材料：
<ul>
<li>2片麵包</li>
<li>花生醬</li>
<li>果醬</li>
</ul>
</li>
<li>在一片麵包上塗上花生醬</li>
<li>在另一片麵包上塗上果醬</li>
<li>將兩片麵包合起來</li>
<li>享受你的三明治！</li>
</ol>

這將渲染為：

如何製作花生醬和果醬三明治

1. 準備你的材料：

• 2片麵包
• 花生醬
• 果醬

2. 在一片麵包上塗上花生醬
3. 在另一片麵包上塗上果醬
4. 將兩片麵包合起來
5. 擁抱你的三明治！

注意我們如何在有序列表中嵌套了一個無序列表 (<ul>)？這就是HTML的美妙之處——你可以混合和匹配以創建複雜的結構！

HTML有序列表的'type'屬性：改變編號樣式

現在，讓我們來談談 'type' 屬性。這個小寶貝允許你改變列表的編號樣式。這裡有你的選項：

選項值	描述
1	預設。十進制數字（1, 2, 3, 4）
A	大寫字母（A, B, C, D）
a	小寫字母（a, b, c, d）
I	大寫羅馬數字（I, II, III, IV）
i	小寫羅馬數字（i, ii, iii, iv）

讓我們看看這些選項是如何工作的：

<ol type="A">
<li>這將是 A</li>
<li>這將是 B</li>
<li>這將是 C</li>
</ol>

<ol type="i">
<li>這將是 i</li>
<li>這將是 ii</li>
<li>這將是 iii</li>
</ol>

這將顯示為：

A. 這將是 A B. 這將是 B C. 這將是 C

i. 這將是 i ii. 這將是 ii iii. 這將是 iii

這不是很棒嗎？你可以使用這些不同的樣式來匹配你的內容的語氣和目的。

總結

好了，各位！你們已經踏入了HTML有序列表的世界。記住，掌握這個（或任何編碼概念）的關鍵是練習。嘗試創建不同類型的列表，將它們互相嵌套，玩轉屬性。你越多實驗，就越會感到熟悉。

在我多年的教學經驗中，我發現那些帶著好奇心並願意犯錯誤的學生學得最快。所以不要害怕弄壞東西——這通常是我們學習最多的时候！

持續編碼，持續學習，在你意識到之前，你將能夠創建有美麗、結構良好的網頁。直到下一次，快樂列表示意！

Credits: Image by storyset