HTML - 不規則列表

你好，未來的網頁開發者們！今天，我們將要進入HTML不規則列表的精彩世界。作為你們親切的鄰居計算機老師，我非常高興能夠帶領你們踏上這次旅程。相信我，在這個教學結束時，你們將會像專家一樣創建列表！

HTML - Unordered Lists

不規則列表是什麼？

在我們深入代碼之前，讓我們先了解什麼是不規則列表。在HTML中，不規則列表是一組沒有特定順序的相關項目。想像一下購物清單 - 你不必一定要在買牛奶之前買麵包，或者買蘋果之前買香蕉。順序並不重要，但它們都是同一個清單的一部分。

在HTML中，我們使用<ul>標籤創建不規則列表，清單中的每個項目都用<li>標籤包裹。讓我們看一個簡單的例子：

<ul>
<li>蘋果</li>
<li>香蕉</li>
<li>橙子</li>
</ul>

這段代碼將會渲染為：

蘋果
香蕉
橙子

看起來很簡單吧？瀏覽器會自動為每個項目添加項目符號。但如果你想要改變這些項目符號呢？這就是我們下一節將會介紹的！

不規則HTML列表 - 選擇列表項目標記

現在，讓我們來給列表添加一些趣味。HTML允許我們改變我們的項目符號，或者我們行業中稱之為"列表項目標記"的樣式。我們有三個主要選項：

disc（默認）
circle
square

要改變標記，我們在<ul>標籤中使用type屬性。讓我們看看這是如何工作的：

<ul type="disc">
<li>這個列表使用默認的disc標記</li>
</ul>

<ul type="circle">
<li>這個列表使用圓形標記</li>
</ul>

<ul type="square">
<li>這個列表使用方形標記</li>
</ul>

這段代碼將會渲染為：

• 這個列表使用默認的disc標記

○ 這個列表使用圓形標記

■ 這個列表使用方形標記

酷炫吧？就像給你的列表來了一次小型的改頭換面！

不規則列表的例子

現在，我們已經掌握了基礎知識，讓我們來看看一些更複雜的例子。記住，熟能生巧，所以隨意複製這些例子並自己嘗試！

嵌套的不規則列表

有時候，你可能想在列表中創建一個列表。我們稱之為嵌套列表。這樣做：

<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>紅茶</li>
<li>綠茶</li>
<li>花草茶</li>
</ul>
</li>
<li>牛奶</li>
</ul>

這將會渲染為：

咖啡
茶
紅茶
綠茶
花草茶
牛奶

注意嵌套列表是如何縮進的？這是HTML表示這些項目是"茶"的子類別的方式。

帶有鏈接的不規則列表

列表不僅僅是用於簡單的文本。你可以將其他HTML元素放入你的列表項目中。例如，讓我們創建一個喜愛的網站的列表：

<ul>
<li><a href="https://www.google.com">Google</a></li>
<li><a href="https://www.wikipedia.org">維基百科</a></li>
<li><a href="https://www.github.com">GitHub</a></li>
</ul>

這將會創建一個可點擊的網站列表：

帶有圖片的不規則列表

讓我們再來得更加時尚，給我們的列表添加一些圖片：

<ul>
<li><img src="apple.jpg" alt="蘋果"> 蘋果</li>
<li><img src="banana.jpg" alt="香蕉"> 香蕉</li>
<li><img src="orange.jpg" alt="橙子"> 橙子</li>
</ul>

這段代碼將會顯示一個帶有每種水果名字旁邊小圖片的列表。這是一種讓你的列表更具視覺吸引力的好方法！

不規則列表方法的總結

這裡有一個方便的表格，總結了我們學習的創建和定制不規則列表的方法：

方法	語法	描述
基礎不規則列表	`<ul><li>項目</li></ul>`	創建一個基礎的不規則列表
改變列表標記	`<ul type="circle">`	改變列表項目標記的樣式
嵌套列表	`<ul><li><ul><li>嵌套項目</li></ul></li></ul>`	在列表中創建一個列表
帶有鏈接的列表	`<ul><li><a href="url">鏈接</a></li></ul>`	創建一個可點擊的鏈接列表
帶有圖片的列表	`<ul><li><img src="image.jpg"> 項目</li></ul>`	在列表項目中添加圖片

這就是全部，各位！你現在已經有了在HTML中創建和定制不規則列表的充分準備。記住，掌握這些技能的關鍵是練習。所以，繼續嘗試這些例子，並不要害怕創新！

當我們結束時，我想起了一個小小的編程笑話：為什麼開發者放棄了他的工作？因為他得不到數組！? 不要擔心，我們會在另一天學習數組。現在，繼續列出你的項目，並繼續編程！

Credits: Image by storyset