7.1 在Web頁面中使用有序、無序、定義列表
（1）有序列表
有序列表中的每一個列表項之前，都以一個數字或字母作為編號。
1 <ol> 2 <li>樹莓</li> 3 <li>草莓</li> 4 <li>蘋果</li> 5 </ol>
在列表項中並沒有包含任何數字編號，這是因為我們已經使用ol元素告訴瀏覽器這是一個有序列表。當瀏覽器看到這個有序列表時，就知道在每一個列表項之前放置一個數字作為編號。
有序列表編號的默認類型是阿拉伯數字，但可以使用type屬性改變它。type屬性可能的取值：
- 1：阿拉伯數字（1,2,3...）
- a：小寫字母（a，b，c...）
- A：大寫字母（A，B，C...）
- i：小寫羅馬字母（i，ii，iii...）
- I：大寫羅馬字母（I，II，III...）
還可以使用start屬性來定義有序列表編號的起始數字或字母。默認的起始編號是數字1。要修改起始編號，只需在ol標記中添加start屬性。即使type屬性可能是其它值，而不是阿拉伯數字，但start屬性的值總是一個整數。
1 <ol type="a" start="3"> 2 <li>樹莓</li> 3 <li>草莓</li> 4 <li>蘋果</li> 5 </ol>
如果想單獨改變某個列表項的編號值——比如，在列表中想使用字母g對第三個列表項進行編號，只需在該列表項的li標記中調價value屬性即可。與start屬性一樣，value屬性的值也總是一個整數。
1 <ol type="a" start="3"> 2 <li>樹莓</li> 3 <li>草莓</li> 4 <li value="8">蘋果</li> 5 </ol>
通過在<ol>中添加reversed屬性，還可以完全反轉列表項編號的順序。在這種情況下，列表項的編號將是3,2,1，而不是默認的1,2,3。
1 <ol reversed> 2 <li>樹莓</li> 3 <li>草莓</li> 4 <li>蘋果</li> 5 </ol>
（2）無序列表
除了在無序列表中不使用數字或字母作列表項的編號之外，無序列表與有序列表非常類似。無序列表中並不依賴列表項的順序來表示重要性，無序列表在每一個列表項之前放置一個項目符號。
1 <ul> 2 <li>樹莓</li> 3 <li>草莓</li> 4 <li>蘋果</li> 5 </ul>
在無序列表中，依然使用li元素來標識列表中的每一個列表項，無序列表使用ul元素進行標識，而不是ol元素。除此之外，用於創建無序列表和有序列表的代碼相同。
（3）定義列表
在HTML中還可以創建第三種表，稱為定義列表。顧名思義，定義列表用於顯示術語及其定義。使用dl元素來創建定義列表，使用dt元素來包含定義術語，使用dd元素來包含實際的定義數據。
1 <dl> 2 <dt>W3C</dt> 3 <dd>The World Wide Web Consortium was created in 1994 to develop standards and protocols for the World Wide Web.</dd> 4 <dt>HTML</dt> 5 <dd>Hypertext Markup Language is the authoring language used to create documents for the World Wide Web.</dd> 6 </dl>
7.2 在Web頁面中組合並嵌套多種類型的列表
在一個列表中還可以嵌套另一個列表，甚至在一種類型的列表中也可以嵌套另一種類型的列表。在一個列表中包含另一個列表，就是嵌套（nesting）的列表。
1 <ol type="I"> 2 <li>Introduction</li> 3 <li>Part I 4 <ol type="A"> 5 <li>Dexcription</li> 6 <li>Example</li> 7 <ol type="1"> 8 <li>Reference One</li> 9 <li>Reference Two</li> 10 </ol> 11 </ol> 12 </li> 13 <li>Part 2</li> 14 <li>Summary</li> 15 </ol>
7.3 定義列表樣式
7.3.1 定制項目符號
格式化列表時，有三個屬性特別有用，這三個屬性只能用於格式化列表，而不能用於其它HTML元素：
- list-style-img：將列表項之前的項目符號修改為指定的圖片（可能的取值：url）
- list-style-position：標識列表項中文本行的縮進方式（可能的取值：inside、outside）
- list-style-type：改變每一個列表項之前的項目編號或所使用的字符（可能的取值：none、disc、circle、square、decimal...）
1 <ol type="1"> 2 <li style="list-style-position: inside;">Reference One</li> 3 <li style="list-style-type: square;">Reference Two</li> 4 </ol>
7.3.2 定制間距
對於列表，margin屬性和padding屬性尤為重要，margin屬性將影響整個列表項四周的間距，而padding屬性將影響該列表四周的間距。
當在ul或ol標記中添加margin屬性時，margin屬性將影響整個列表四圍的間距。但是當將其用於li標記時，margin屬性將影響每一個列表項四圍的間距。
padding屬性用於控制列表項中文本四圍與列表項邊界之間的緩沖間距。
7.3.3 定制整個列表的布局
（1）垂直導航
改變列表的布局，最常見的原因就是將列表作為一個導航欄（navigation bar）使用。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Vertical Nav</title> 5 <meta charset="utf-8"> 6 <style type="text/css"> 7 body{ 8 font-family: '微軟雅黑'; 9 font-size: 20px; 10 } 11 #navlist{ 12 border-bottom: 3px solid #ccc; 13 width: 350px; 14 padding-left: 0px; 15 margin-left: 0px; 16 } 17 #navlist li{ 18 border-top: 2px solid #666; 19 margin: 0; 20 line-height: 200%; 21 } 22 #navlist li a{ 23 color: #900; 24 padding-left: 15px; 25 text-decoration: none; 26 display: block; 27 } 28 #navlist li a:hover{ 29 color: #fff; 30 background-color: #333; 31 } 32 .active{ 33 background-color: #900; 34 color: #fff; 35 padding-left: 15px; 36 } 37 </style> 38 </head> 39 <body> 40 <ul id="navlist"> 41 <li class="active">Home</li> 42 <li><a href="">School Calendar</a></li> 43 <li><a href="">School Day Weather</a></li> 44 <li><a href="">Class Notes and Supply Lists</a></li> 45 <li><a href="">Teachers</a></li> 46 <li><a href="">School Profile</a></li> 47 <li><a href="">Bus Schedules</a></li> 48 </ul> 49 </body> 50 </html>
（2）水平導航
默認情況下列表在頁面上以垂直方式顯示，其原因在於在HTML中列表是一個塊級元素，塊級元素將自動填充可用空間。只需使用display：inline樣式屬性設置，將列表定義為一個內聯元素，而不是一個塊級元素，就可以讓列表以水平方式顯示。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Horizontal Nav</title> 5 <meta charset="utf-8"> 6 <style type="text/css"> 7 body { 8 font-family: '微軟雅黑'; 9 font-size: 20px; 10 } 11 #navlist li { 12 list-style-type: none; 13 display: inline; 14 width: 200px; 15 } 16 #navlist li a { 17 color: #fff; 18 background-color: #900; 19 padding: .2em .4em; 20 text-decoration: none; 21 22 } 23 #navlist li a:hover { 24 color: #fff; 25 background-color: #333; 26 } 27 .active { 28 border: 1px solid #900; 29 color: #000; 30 padding: .2em 1em; 31 } 32 </style> 33 </head> 34 <body> 35 <ul id="navlist"> 36 <li class="active">Home</li> 37 <li><a href="">About Usss</a></li> 38 <li><a href="">Services</a></li> 39 <li><a href="">Clients</a></li> 40 <li><a href="">Contact Us</a></li> 41 </ul> 42 </body> 43 </html>
