HTML&CSS基础学习笔记1.13-有序列表及列表嵌套

时间：2022-11-18 22:05:43

我们上篇讲到了无序列表，那么今天就来看看有序列表和他们的组合嵌套使用吧。


有序列表

现在我们要做那堆杂事了，但是发现这么多杂事，先做哪个好呢？于是我们给这堆杂事弄个优先级排序，让我们能够按照顺序做下去。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>


浏览器结果是：

HTML&CSS基础学习笔记1.13-有序列表及列表嵌套

列表嵌套

我们知道标签是可以嵌套的，所以列表也是可以嵌套的。当我们列表中的某些列表项是列表时，我们就可以用嵌套。

现在就通过一个例子来看看无序列表和有序列表是如何嵌套使用的吧：

<!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 体验看看吧。

结果如下：

HTML&CSS基础学习笔记1.13-有序列表及列表嵌套




标签：

相关文章