# 列表標簽 列表是一系列排列好的項目，主要分成兩類：有序列表和無序列表。 有序列表是每個列表項前面有編號，呈現出順序，就像下面這樣。 ~~~ 1. 列表項 A 2. 列表項 B 3. 列表項 C ~~~ 無序列表則是列表項前面沒有編號，只有一個列表符號，默認是一個圓點。 ~~~ · 列表項 A · 列表項 B · 列表項 C ~~~ ## 1. `<ol>` `<ol>`標簽是一個有序列表容器（ordered list），會在內部的列表項前面產生數字編號。列表項的順序有意義時，比如排名，就會采用這個標簽。 ~~~html <ol> <li>列表項 A</li> <li>列表項 B</li> <li>列表項 C</li> </ol> ~~~ 上面代碼會在列表項 A、B、C 前面，分別產生1、2、3的編號。 `<ol>`標簽內部可以嵌套`<ol>`標簽或`<ul>`標簽，形成多級列表。 ~~~html <ol> <li>列表項 A</li> <li>列表項 B <ol> <li>列表項 B1</li> <li>列表項 B2</li> <li>列表項 B3</li> </ol> </li> <li>列表項 C</li> </ol> ~~~ 上面代碼中，一個有序列表內部嵌套了另一個有序列表，渲染結果如下。 ~~~ 1. 列表項 A 2. 列表項 B 1. 列表項 B1 2. 列表項 B2 3. 列表項 B3 3. 列表項 C ~~~ 該標簽有以下屬性。 - **reversed** `reversed`屬性產生倒序的數字列表。 ~~~html <ol reversed> <li>列表項 A</li> <li>列表項 B</li> <li>列表項 C</li> </ol> ~~~ 上面代碼中，列表項 A、B、C 前面，產生的編號是3、2、1。 - **start** `start`屬性的值是一個整數，表示數字列表的起始編號。 ~~~html <ol start="5"> <li>列表項 A</li> <li>列表項 B</li> <li>列表項 C</li> </ol> ~~~ 上面代碼中，列表項 A、B、C 前面，產生的編號是5、6、7。 - **type** `type`屬性指定數字編號的樣式。目前，瀏覽器支持以下樣式。 * `a`：小寫字母 * `A`：大寫字母 * `i`：小寫羅馬數字 * `I`：大寫羅馬數字 * `1`：整數（默認值） ~~~html <ol type="a"> <li>列表項 A</li> <li>列表項 B</li> <li>列表項 C</li> </ol> ~~~ 上面代碼中，列表項 A、B、C 前面的編號，分別是英文小寫字母a、b、c。 注意，即使編號是字母，`start`屬性也依然使用整數。 ~~~html <ol type="a" start="3"> <li>列表項 A</li> <li>列表項 B</li> <li>列表項 C</li> </ol> ~~~ 上面代碼中，`type`屬性指定編號采用小寫英文字母，`start`屬性等于`3`，表示從`c`開始編號。 ## 2.`<ul>` `<ul>`標簽是一個無序列表容器（unordered list），會在內部的列表項前面產生實心小圓點，作為列表符號。列表項的順序無意義時，采用這個標簽。 ~~~ <ul> <li>列表項 A</li> <li>列表項 B</li> <li>列表項 C</li> </ul> ~~~ 上面代碼的渲染結果是，列表項 A、B、C 前面，分別產生一個實心小圓點，作為列表符號。 `<ul>`標簽內部可以嵌套`<ul>`或`<ol>`，形成多級列表。 ## 3.`<li>` `<li>`表示列表項，用在`<ol>`或`<ul>`容器之中。 有序列表`<ol>`之中，`<li>`有一個`value`屬性，定義當前列表項的編號，后面列表項會從這個值開始編號。 ~~~ <ol> <li>列表項 A</li> <li value="4">列表項 B</li> <li>列表項 C</li> </ol> ~~~ 上面代碼中，`value`屬性指定第二個列表項的編號是`4`，因此三個列表項的編號，分別為1、4、5。 ## 4.`<dl>`，`<dt>`，`<dd>` `<dl>`標簽是一個塊級元素，表示一組術語的列表（description list）。術語名（description term）由`<dt>`標簽定義，術語解釋（description detail）由`<dd>`標簽定義。`<dl>`常用來定義詞匯表。 ~~~ <dl> <dt>CPU</dt> <dd>中央處理器</dd> <dt>Memory</dt> <dd>內存</dd> <dt>Hard Disk</dt> <dd>硬盤</dd> </dl> ~~~ `<dt>`和`<dd>`都是塊級元素，`<dd>`默認會在`<dt>`下方縮進顯示。上面代碼的默認渲染結果如下。 ~~~ CPU 中央處理器 Memory 內存 Hard Disk 硬盤 ~~~ 多個術語（`<dt>`）對應一個解釋（`<dd>`），或者多個解釋（`<dd>`）對應一個術語（`<dt>`），都是合法的。 ~~~ <dl> <dt>A</dt> <dt>B</dt> <dd>C</dd> <dt>D</dt> <dd>E</dd> <dd>F</dd> </dl> ~~~ 上面代碼中，`A`和`B`有共同的解釋`C`，而`D`有兩個解釋`E`和`F`。