1.1 列表種類
HTML 中的列表 是組織和結構化資訊的重要工具。它們允許顯示帶有數字或粗體點（標記）的元素。讓我們詳細了解 HTML 中的每個列表元素： <ul>、<ol> 和 <li>。
無序列表 (<ul>)
標籤 <ul> 用於創建無序（標記）列表。列表元素以標記顯示（點、圓圈、方塊）。
範例：
HTML
<ul>
<li>第一個列表元素</li>
<li>第二個列表元素</li>
<li>第三個列表元素</li>
</ul>
有序列表 (<ol>)
標籤 <ol> 用於創建有序列表。列表元素顯示為數字或字母。
範例：
HTML
<ol>
<li>第一個列表元素</li>
<li>第二個列表元素</li>
<li>第三個列表元素</li>
</ol>
1.2 列表元素 <li>
標籤 <li> 用於標識列表中的每個元素，無論是無序還是有序。它總是要嵌套在 <ul> 或 <ol> 中。
如何輕鬆記住這些標籤：
- Ordered List – 有序（編號）列表
- Unordered List – 無序（未編號）列表
- List Item – 列表元素
屬性 type
此屬性可以在 <ul> 和 <ol> 中使用來更改標記或編號的類型。例如，對於 <ol> 可以使用值 "1"、"A"、"a"、"I"、"i"，而對於 <ul> - "disc"、"circle"、"square"。
更改 <ul> 標記類型的範例：
HTML
<ul type="square">
<li>第一個列表元素</li>
<li>第二個列表元素</li>
</ul>
更改 <ol> 編號類型的範例：
HTML
<ol type="A">
<li>第一個列表元素</li>
<li>第二個列表元素</li>
</ol>
屬性 start:
這個屬性僅用於 <ol> 來指示起始編號。
例如：
HTML
<ol start="5">
<li>第五個列表元素</li>
<li>第六個列表元素</li>
</ol>
嵌套列表
列表可以是嵌套的，這允許創建更複雜的結構。
嵌套列表的範例：
HTML
<ul>
<li>第一個列表元素</li>
<ul type="circle">
<li>嵌套第一個元素</li>
<li>嵌套第二個元素</li>
</ul>
<li>第二個列表元素</li>
<li>第三個列表元素</li>
</ul>
重要！
CSS 屬性
list-style-type 提供比屬性
type 更多的標記類型。 此外，屬性
type 被認為是過時的。
1.3 列表樣式化
可以使用 CSS 來樣式化列表，更改標記的顏色、類型和間距。
樣式化範例：
CSS
ul.custom-list {
list-style-type: katakana; /* 日語片假名 */
color: blue; /* 文本顏色 */
}
ol.custom-list {
list-style-type: hiragana-iroha; /* 日語 iroha 排序系統 */
color: green; /* 文本顏色 */
}
HTML
<ul class="custom-list">
<li>第一個列表元素</li>
<li>第二個列表元素</li>
</ul>
<ol class="custom-list">
<li>第一個列表元素</li>
<li>第二個列表元素</li>
</ol>
因此，使用 <ul>、<ol> 和 <li> 有助於 結構化內容並提高網頁上的可讀性。
GO TO FULL VERSION