![HTML网页制作：[4]如何使用列表](https://search.52zhanxing.com/aiimages/HTML网页制作：[4]如何使用列表.png)
一.无序列表的使用
无序列表的标记为：ul。所有的列表均在<ul>和</ul>之间。 那么无序列表用来干什么呢？ 就是一堆有关系却没有先后顺序的数据排列在一起。 比如吃的：花生、香蕉、西瓜等,都是能吃的，但没有先后顺序，就用无序列表来表示。
来吧，一起来看看代码。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <ul> <li>香蕉</li> <li>花生</li> <li>西瓜</li> <li>黄瓜</li> </ul> </map> </body> </html>
打开刚写网页后，可以看到效果。每一行前，都有一个小圆圈表示。 由此可见，他们是无序的。
不过无序列表前面的小圆圈是可以更改的，更改的方法就是：type参数。 <ul type="参数"> 参数： 1）disc:默认值，圆圈 2）circle：空心的圆圈 3）square:空心的正方形
举个例子： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <ul type="circle"> <li>香蕉</li> <li>花生</li> <li>西瓜</li> <li>黄瓜</li> </ul> </map> </body> </html>
入下图所示，前面的圆圈已经发生了变化
二.有序列表的使用
有序列表：<ol></ol>. 和无序列表一样的用法。有序列表是有先后顺序排列的，比如：1,2,3......或者a,b,c,d......
举个例子： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <ol> <li>第一排</li> <li>第二排</li> <li>第三排</li> <li>第四排</li> </ol> </map> </body> </html>
自然，有序列表前面的数字也是可以更改的，可以使数字、字母、罗马数字等。 <ol type="参数"> 参数： 1）1：代表数字1,2,3 2）a:代表小写字母a,b,c 3）A:代表大写字母A,B,C 4）i:消息罗马数字 5）I：大写罗马数字
举个例子： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head><body> <ol type="A"> <li>第一排</li> <li>第二排</li> <li>第三排</li> <li>第四排</li> </ol> </map> </body> </html>
效果图如下