在网页制作中，列表示必不可少的，且是一种非常有用的数据排列方式。这里，小编来教你如何在HTML中使用列表。常用的列表，无序列表，有序列表。
工具/原料
一台电脑
TXT文档或者DW等
一.无序列表的使用
1、无序列表的标记为：ul。所有的列表均在<ul>和</ul>之间。那么无序列表用来干什么呢？就是一堆有关系却没有先后顺序的数据排列在一起。比如吃的：花生、香蕉、西瓜等,都是能吃的，但没有先后顺序，就用无序列表来表示。
2、来吧，一起来看看代码。<!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>
![HTML网页制作：[4]如何使用列表](https://exp-picture.cdn.bcebos.com/3b8fb4d7726b0ce22214a3bcef781423bfb9b64a.jpg)
3、打开刚写网页后，可以看到效果。每一行前，都有一个小圆圈表示。由此可见，他们是无序的。
![HTML网页制作：[4]如何使用列表](https://exp-picture.cdn.bcebos.com/1562a0b9763e21c2f5257663e6e89a618725b14a.jpg)
4、不过无序列表前面的小圆圈是可以更改的，更改的方法就是：type参数。<ul type="参数">参数：1）disc:默认值，圆圈2）circle：空心的圆圈3）square:空心的正方形
5、举个例子：<!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>
![HTML网页制作：[4]如何使用列表](https://exp-picture.cdn.bcebos.com/6ca98461862541939a1b27b7df1bd10ff326ab4a.jpg)
6、入下图所示，前面的圆圈已经发生了变化
![HTML网页制作：[4]如何使用列表](https://exp-picture.cdn.bcebos.com/555acf0ff2260d9a6bfd802a622abab84340a54a.jpg)
二.有序列表的使用
1、有序列表：<ol></ol>.和无序列表一样的用法。有序列表是有先后顺序排列的，比如：1,2,3......或者a,b,c,d......
2、举个例子：<!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>
![HTML网页制作：[4]如何使用列表](https://exp-picture.cdn.bcebos.com/430174fec314f1c5f71dd6723c27ac5307889d4a.jpg)
3、自然，有序列表前面的数字也是可以更改的，可以使数字、字母、罗马数字等。<ol type="参数">参数：1）1：代表数字1,2,32）a:代表小写字母a,b,c3）A:代表大写字母A,B,C4）i:消息罗马数字5）I：大写罗马数字
4、举个例子：<!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>
![HTML网页制作：[4]如何使用列表](https://exp-picture.cdn.bcebos.com/94af5fc1b727ac53607b069f2ecadce89148994a.jpg)
5、效果图如下
![HTML网页制作：[4]如何使用列表](https://exp-picture.cdn.bcebos.com/ad121888912ca5cab51b07fb8bfc77f7990e944a.jpg)
