為什麼先學清單？

• 條列重點（功能、規格、條件）
• 步驟流程（有順序）
• 詞彙解釋、FAQ（名詞 → 說明）
• 導覽列骨架（之後用 CSS 做外觀）

無序清單：<ul>（沒有先後順序）

語法

<ul>
  <li>支援行動版</li>
  <li>淺色/深色主題</li>
  <li>離線閱讀</li>
</ul>

何時用

• 條件、特色、要點，彼此沒有先後關係

有序清單：<ol>（有先後順序）

基本

<ol>
  <li>打開 VS Code</li>
  <li>建立 index.html</li>
  <li>貼上範例並預覽</li>
</ol>

進階屬性

<!-- 從指定數字開始 -->
<ol start="3">
  <li>第三步</li>
  <li>第四步</li>
</ol>

<!-- 反向編號（10, 9, 8...）-->
<ol reversed>
  <li>最後一步</li>
  <li>倒數第二步</li>
</ol>

<!-- 單筆覆寫編號 -->
<ol>
  <li value="10">第 10 步</li>
  <li>第 11 步</li>
</ol>

何時用

• 教學步驟、排名、時間序列（有先後）

巢狀清單（清單中的清單）

<ul>
  <li>安裝
    <ol>
      <li>下載安裝檔</li>
      <li>雙擊安裝</li>
    </ol>
  </li>
  <li>設定
    <ul>
      <li>主題：深色</li>
      <li>字型：等寬</li>
    </ul>
  </li>
</ul>

提醒：<li> 裡可以再放 ul/ol，也可以放多個段落（必要時用 <p> 包段落）。

描述清單：<dl>（名詞 → 說明）

語法

<dl>
  <dt>HTML</dt>
  <dd>用標籤描述內容結構的標記語言。</dd>

  <dt>CSS</dt>
  <dd>控制外觀與排版的樣式表。</dd>

  <dt>JavaScript</dt>
  <dd>讓頁面可以互動的語言。</dd>
</dl>

一個名詞多個說明、或多個名詞共用一個說明

<dl>
  <dt>RGB</dt>
  <dt>加色法</dt>
  <dd>以紅、綠、藍三色相加形成其他顏色。</dd>
</dl>

使用場合

• 詞彙解釋、FAQ、規格表（名詞＋描述）

導覽列骨架（先用清單，之後再做樣式）

<nav>
  <ul>
    <li><a href="./index.html" aria-current="page">首頁</a></li>
    <li><a href="./about.html">關於</a></li>
    <li><a href="./posts.html">文章</a></li>
    <li><a href="./contact.html">聯絡</a></li>
  </ul>
</nav>

aria-current="page"：標示目前所在頁（可近性較好）。外觀之後交給 CSS。

多段內容的 <li>（不是只能放一句）

<ul>
  <li>
    <h3>安裝需求</h3>
    <p>請先確認作業系統版本與磁碟空間。</p>
    <p>如遇到權限問題，改用系統管理員重新安裝。</p>
  </li>
  <li>
    <h3>相依套件</h3>
    <p>Node.js 18+、Git、瀏覽器（Chrome/Firefox）。</p>
  </li>
</ul>

常見錯誤

• 忘記把項目包在 <li> 裡，只寫 <ul> 直接塞文字
  👉 每個項目都要 <li> ... </li>
• 用 <br> 一行一行堆成「清單」
  👉 清單請用 ul/ol/dl，不是 <br>
• ol 用在沒有先後順序的內容
  👉 沒有順序就用 ul
• <li> 裡面是長段落但沒用 <p> 包起來
  👉 長內容請用 <p> 分段，結構更清楚
• 手動打數字 1. 2. 3. 當清單
  👉 讓瀏覽器幫你編號：用 <ol>，之後 CSS 再客製實際樣式

VS Code 快速產生（Emmet）

• ul>li*3 → 產三個項目
• ol>li*5 → 產五個步驟
• dl>(dt+dd)*4 → 產四組名詞＋說明

DAY4心得

• 清單是內容的基本結構，之後再用 CSS 改外觀
• ul/ol 負責「項目」，dl 負責「名詞 → 說明」
• <li> 裡可以放多段內容，必要時記得用 <p> 分段