HTML网页制作：[4]如何使用列表

2025-10-22 15:07:16

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">

<head>

<title>无标题文档</title>

</head>

<body>

<ul>

</ul>

</map>

</body>

</html>

HTML网页制作：[4]如何使用列表

3、打开刚写网页后，可以看到效果。每一行前，都有一个小圆圈表示。

由此可见，他们是无序的。

HTML网页制作：[4]如何使用列表

4、不过无序列表前面的小圆圈是可以更改的，更改的方法就是：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">

<head>

<title>无标题文档</title>

</head>

<body>

</ul>

</map>

</body>

</html>

HTML网页制作：[4]如何使用列表

6、入下图所示，前面的圆圈已经发生了变化

HTML网页制作：[4]如何使用列表

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>

<title>无标题文档</title>

</head>

<body>

<ol>

</ol>

</map>

</body>

</html>

HTML网页制作：[4]如何使用列表

3、自然，有序列表前面的数字也是可以更改的，可以使数字、字母、罗马数字等。

参数：

1）1：代表数字1,2,3

2）a:代表小写字母a,b,c

3）A:代表大写字母A,B,C

4）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>

<title>无标题文档</title>

</head><body>

</ol>

</map>

</body>

</html>

HTML网页制作：[4]如何使用列表

5、效果图如下

HTML网页制作：[4]如何使用列表

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。