200307-HTML複習-清單

參考來源:
書籍:HTML&CSS 網站設計建置優化之道
網頁前端工程入門：CSS 選擇器 - 詳細使用介紹By 彭彭
網頁前端工程入門：基礎 HTML 教學 By 彭彭

在預設值中，瀏覽器會縮排清單，若要指定使用的編號類型，可用type屬性，但建議使用CSS list-style-type屬性。

HTML提供了三種不同的清單類型如下:

編號清單

編號清單的元素為<ol>，而清單中須加上<li>元素作為每一個項目的開始與結束
例如:

<ol>
  <li>性別</li>
  <li>年齡</li>
  <li>出生地</li>
  <li>連絡電話</li>
</ol>

以下會顯示出:

1. 性別
2. 年齡
3. 出生地
4. 連絡電話

---

項目清單

項目清單的元素為<ul>，清單內容一樣要先加上<li>屬性作為開始與結束。
例如:

<ul>
  <li>性別</li>
  <li>年齡</li>
  <li>出生地</li>
  <li>連絡電話</li>
</ul>

以下會顯示出:

• 性別
• 年齡
• 出生地
• 連絡電話

---

定義清單

項目清單的元素為<dl>，通常會由名詞和定義所組成，裡面會有<dt>與<dd>元素，
<dt>元素是用來定義名詞，<dd>這個元素是用來容納名詞的定義。
例如:

<dl> 
   <dt>驕兵之計</dt>
   <dd>故意向敵軍示弱，以助長其驕傲情緒，使其輕敵大意的計策。</dd>
   <dt>按兵不動</dt>
   <dd>按:止住。使軍隊暫不行動。現也比喻暫不開展工作。</dd>
   <dt>正氣凜然</dt>
   <dd>正氣：剛正之氣。凜然：可敬畏的樣子。形容正氣威嚴不可侵犯。</dd>
</dl>

會顯示為:

驕兵之計

故意向敵軍示弱，以助長其驕傲情緒，使其輕敵大意的計策。

按兵不動

按:止住。使軍隊暫不行動。現也比喻暫不開展工作。

正氣凜然

正氣：剛正之氣。凜然：可敬畏的樣子。形容正氣威嚴不可侵犯。

---

巢式清單

將第二個清單放在<li>元素內，製作出一個巢式清單，也可稱為次清單。
例如:

<ul>
  <li>姓名</li>
  <li>生日</li>
  <li>電話
    <ul>
      <li>住家</li>
      <li>公司</li>
      <li>手機</li>
    </ul>  
  </li>
  <li>住址</li>
</ul>

會顯示成:

• 姓名
• 生日
• 電話
  • 住家
  • 公司
  • 手機
• 住址