有序列表与嵌套使用
本文介绍了HTML中有序列表(<ol>)的基本用法，并通过实例展示了如何创建有序列表及列表项(<li>)。同时，文章还探讨了列表嵌套的概念，并通过一个具体的例子说明了如何将无序列表(<ul>)和有序列表进行嵌套使用。
我们上篇讲到了无序列表，那么今天就来看看有序列表和他们的组合嵌套使用吧。
有序列表
现在我们要做那堆杂事了，但是发现这么多杂事，先做哪个好呢？于是我们给这堆杂事弄个优先级排序，让我们能够按照顺序做下去。HTML里用<ol>标签来表示有序列表，<ol>标签的列表项依然是用<li>标签表示。
它的代码模板是这样的：
<span style="font-family:Microsoft YaHei;"><ol>
<li></li>
<li></li>
...
</ol></span>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用有序列表</title>
</head>
<body>
<h1>为有序列表添加列表项</h1>
<ol>
<li>开会</li>
<li>写报告</li>
<li>睡觉</li>
</ol>
</body>
</html>
列表嵌套
我们知道标签是可以嵌套的，所以列表也是可以嵌套的。当我们列表中的某些列表项是列表时，我们就可以用嵌套。
现在就通过一个例子来看看无序列表和有序列表是如何嵌套使用的吧：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用有序列表和无序列表</title>
</head>
<body>
<h1>省份城市</h1>
<ul>
<li>安徽省</li>
<li>北京市</li>
<li>重庆市</li>
<li>福建省</li>
<li>甘肃省
<ul>
<li>兰州市</li>
<li>嘉峪关市</li>
<li>金昌市</li>
</ul>
</li>
</ul>
</body>
</html>结果是怎样的呢？不妨前去http://www.mayacoder.com/lesson/lesson?lesson_id=31&knowledge_id=4 体验看看吧。
结果如下：
扫一扫
1058
到【灌水乐园】发言
