---
# System prepended metadata

title: HTML 項目列表清單
tags: [<ol>, <ul>, <li>, HTML]

---

{%hackmd @dzif24x25/IBXIWNXgTju0h2AKtSaLkA %}

###### tags: `HTML` `<li>` `<ul>` `<ol>`

# HTML 項目列表清單

## `<li>` 清單項目

在`<ul>`和`<ol>`內部排列，不限數量

## `<ul>` 無序清單 (unordered lists)

### 範例：

```htmlembedded=
<ul>
    <li>星期一</li>
    <li>星期二</li>
    <li>星期三</li>
</ul>
```

<div style="background-color: #000000; color: #FFFFFF;border-radius: 1rem 1rem 0rem 0rem; padding: 0.7rem 1.75rem 0.7rem 1.75rem; font-size: 2rem">
    範例結果
</div>
<div style="border: 1px solid #000000; border-radius: 1rem; padding: 1.75rem; border-radius: 0rem 0rem 1rem 1rem">
    
<ul>
    <li>星期一</li>
    <li>星期二</li>
    <li>星期三</li>
</ul>

</div>

## `<ol>` 有序清單 (ordered lists)


### 範例：

```htmlembedded=
<ol>
    <li>步驟一</li>
    <li>步驟二</li>
    <li>步驟三</li>
</ol>
```

<div style="background-color: #000000; color: #FFFFFF;border-radius: 1rem 1rem 0rem 0rem; padding: 0.7rem 1.75rem 0.7rem 1.75rem; font-size: 2rem">
    範例結果
</div>
<div style="border: 1px solid #000000; border-radius: 1rem; padding: 1.75rem; border-radius: 0rem 0rem 1rem 1rem">
    
<ol>
    <li>步驟一</li>
    <li>步驟二</li>
    <li>步驟三</li>
</ol>

</div>

:::info
點此前往簡報 https://hackmd.io/@dzif24x25/BJ5efGJ7n
:::