---
# System prepended metadata

title: DAY2 - 主題式列表製作，認識 ul / li tags
tags: ['Re:0 前端工程師之路 - HTML CSS 篇章']

---

# DAY2 - 主題式列表製作，認識 ul / li tags

- 當今天，你有一個主題式的清單想要分享，也許你可以使用 ul li 來製作:

```
// 架構：
    <ul>
      <li>items</li>
    </ul>
```

- 以2022-2023 目前暫時的戰績來製作中華職棒排名順序:

```
// 實作:
    <ul>
      <li>1.中信兄弟</li>
      <li>2.樂天桃猿</li>
      <li>3.味全龍</li>
      <li>4.富邦悍將</li>
      <li>5.統一獅</li>
      <li>6.台鋼雄鷹</li>
    </ul>
```

![](https://i.imgur.com/UJPhFz3.png)

- 也可以在li內包一個 anchor tag，也是常見的做法喔!

```
    <ul>
      <li>1.中信兄弟</li>
      <li>2.樂天桃猿</li>
      <li>3.味全龍</li>
      <li>
        <a href="https://www.fubonguardians.com/content/masterpage/Index"
          >4.富邦悍將</a
        >
      </li>
      <li>5.統一獅</li>
      <li>6.台鋼雄鷹</li>
    </ul>
```

![](https://i.imgur.com/hoe1uog.png)

###### tags: `Re:0 前端工程師之路 - HTML CSS 篇章`