列表 <ul>、<ol>、<dl>

用來設定無排序、有排序、定義的資訊。

無排序列表

清單中的順序毫無意義，預設樣式為黑色實心的圓點、縮排。

<ul>
  <li>蘋果</li>
  <li>葡萄</li>
  <li>哈密瓜</li>
  <li>鳳梨</li>
  <li>火龍果</li>
</ul>

有排序列表

清單中的內容有順序，預設樣式為標號數字、縮排。

<ol>
  <li>起床</li>
  <li>刷牙</li>
  <li>吃早餐</li>
  <li>換衣服</li>
  <li>出門上班去</li>
</ol>

小提醒

<ul>、<ol> 的子層嵌套只能是 <li>，不能嵌套其他元素。

定義型列表

用來表現特殊名詞的定義，預設樣式為縮排。

<!--
dl: 列表
dt: 項目
dd: 內容
-->
<dl>
  <dt>HTML</dt>
  <dd>用來描述網頁的內容和語意結構。</dd>
  <dt>CSS</dt>
  <dd>用來描述網頁的樣式和畫面如何被呈現。</dd>
  <dt>JavaScript</dt>
  <dd>用來描述網頁的行為，讓網頁可以跟使用者互動。</dd>
<dl>

小提醒

<dl> 的子層嵌套只能是 <dt>、<dl>，不能嵌套其他元素。

同場加映: 巢狀清單

巢狀清單的用法非常地普遍，請一定要熟悉它的結構及規則。

<ul>
  <li>體育新聞
    <ul>
      <li>棒球</li>
      <li>藍球</li>
      <li>高爾夫球</li>
    </ul>
  </li>
  <li>財經新聞
    <ul>
      <li>股票</li>
      <li>債券</li>
      <li>期貨</li>
    </ul>
  </li>
</ul>