博客介绍了HTML中不同类型的列表。有序列表可通过type和start属性设置编号样式和起始数字；无序列表type属性常用值有disc、square、circle，HTML5中建议用CSS定义；还展示了自定义列表的示例。
| Type=1 | 表示列表项目用数字表示（1,2,3…..） |
| Type=a | 表示列表项目用小写字母表示(a,b,c..) |
| Type=A | 表示列表项目用大写字母表示(A,B,C..) |
| Type=i | 表示列表项目用小写罗马数字表示(i,ii,iii….) |
| Type=I | 表示列表项目用大写罗马数字表示(I,II,III…) |
<ol type=value1 start=value2>
start是编号开始的数字，如start=2则编号从2开始，如果从1开始可以省略。value2表示项目开始的数值。
<ol type="a" start="5" reversed> 反序
类型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>你好(runoob.com)</title>
</head>
<body>
<h4>编号列表：</h4>
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>大写字母列表：</h4>
<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>小写字母列表：</h4>
<ol type="a">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>罗马数字列表：</h4>
<ol type="I">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>小写罗马数字列表：</h4>
<ol type="i">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
</body>
</html>
无序列表中type属性的常用值有三个，它们呈现的效果不同:
小黑点:disc（默认值）；
方块:square；
空心圆:circle。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>您好(runoob.com)</title>
</head>
<body>
<p><b>注意：</b> 在 HTML 4中 ul 属性已废弃，HTML5 已不支持该属性，因此我们使用 CSS 代替来定义不同类型的无序列表如下：</p>
<h4>圆点列表：</h4>
<ul style="list-style-type:disc">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>圆圈列表：</h4>
<ul style="list-style-type:circle">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>正方形列表：</h4>
<ul style="list-style-type:square">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
</body>
</html>
自定义列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>你好(runoob.com)</title>
</head>
<body>
<h4>一个自定义列表：</h4>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</body>
</html>
扫一扫
1254
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
