1、什麼是列表
- 什麼是列表？
- 什麼是有序列表？
- 什麼是無序列表？
上面寫的 3 句話就是一個列表，你懂得。。。
2、有序列表
有序列表：英文叫做 ordered list，所以標籤也是取這個詞組的首字母 ol。ol標籤括起來的範圍就是有序列表的範圍，而裏面的每一項都是一個list（列表項），所以，也是取這個單詞的一部分，li，作爲標籤名。如下：
<!--有序列表-->
<ol>
<li>蘋果</li>
<li>西瓜</li>
<li>荔枝</li>
<li>香蕉</li>
</ol>
效果如下：
這裏的1.2,3,4 並不是我寫的，而是自動生成的。
注意：
1、<ol>和</ol>標誌着有序列表的開始和結束，而<li>和</li>標籤表示
這是一個列表項。在有序列表中可以包含多個列表項。
2、有序列表的列表項是有先後順序的，一般採用數字或字母作爲順序，默認
是採用數字順序。
3、<ol>標籤和<li>標籤是配合使用，沒有單獨使用的情況。
4、在<ol>標籤內部不能*單獨*存在任何其他標籤（可以嵌套在li標籤中）
否則這一項不能作爲有序列表的一個列表項，一般情況下只能
存在<li>標籤（忽略嵌套列表）。
驗證舉例：
這裏可以看出嵌套在 li 標籤中的 a 標籤是可以生效的，也是有序號的。但是下面的單獨的 a 標籤就是沒有序號的了。
2.1有序列表type屬性值
並不是有序列表只能用1、2、3 ……來表示序列。也可以使用下面的方式：
| type屬性值 | 列表項的序號類型 |
|---|---|
| 1 | 數字1、2、3…… |
| a | 小寫英文字母a、b、c…… |
| A | 大寫英文字母A、B、C…… |
| i | 小寫羅馬數字i、ii、iii…… |
| I | 大寫羅馬數字I、II、III…… |
其實只要記住有序列表 ol 有一個type屬性就可以了，IDE會提示的（並且學習了css後，就會摒棄這個type屬性，使用CSS的list-style-type來實現）：
例子如下：
3、無序列表
有序列表英文是 ordered list，那麼往它前面加上一個否定前綴 un就成了：unordered list 就成了無序列表了。所以，它使用的就是 ul 作爲標籤名。同樣的，每一項都是一個 list （列表項），所以每一項都是用 li 表示。如下所示：
3.1無序列表的type屬性
| type屬性 | 列表項的表現形式 |
|---|---|
| circle | 空心圓 |
| dise | 實心黑點（默認值） |
| square | 實心黑正方形 |
效果舉例：
同樣的如果是忘記了有哪些屬性值，IDE會提示的（如果忘記了是什麼效果，一共就三個，一個一個試也是可以的嘛）：
4、自定義列表（描述列表）
我們依舊使用我們的習慣套路，首先從標籤的名稱入手理解它們的作用：
-
dl：英文全稱是definition list，定義列表。
-
dt：英文全稱是definition title，定義標題。
-
dd：英文全稱是definition description，定義描述，也就是定義列表具體內容。
使用案例：
注意事項：
1、<dl>標籤用來定義一個描述列表，處於最外層。
2、<dt>與<dd>爲同級元素，<dt>定義標題，<dd>定義列表項的具體內容
3、<dt>與<dd>不能相互嵌套。
4、<dt>並不一定位於<dl>子元素的第一位，根據需要可以調整位置。
怎麼理解這句話呢？我們知道 dt 定義的是標題，如果我們使用的是
圖片佔據第一位呢？這個時候就需要在 dl 裏面的列表項中嵌套一個
img 標籤了，那麼還是選 dt 嗎？顯然是不合理的，因爲圖片也是
屬於一個列表項，更具體的說，它就是一個列表項的具體內容，具體
表現。所以，選擇使用 dd 嵌套使用 img，更爲符合。
5、關於標籤自帶屬性說明
標籤自帶屬性的初衷是爲了提高開發效率。
但遺憾的是，這些屬性在實際開發通常毫無用處，不但外觀醜陋，而且它的位置也難以控制。
根本無法滿足客戶對美觀度的需求，所以還是需要通過CSS來對列表進行美化。
6、使用時機舉例
如上圖所示，三者都還可以將內容完整的體現出來，但是很明顯的是，前兩者並不是最佳的選擇，從第一個列表項可以看出：姓名是對後面所有的列表項的說明，所以選擇描述列表是最爲合適的。