[HTML/HTML5]7 使用列表
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>
