本文介绍了HTML中的有序列表<ol><li>和无序列表<ul><li>的使用方法。有序列表中讲解了如何通过type属性改变数字、字母、罗马数字的排序方式，以及使用start属性自定义起始序号。无序列表则展示了不同类型的项目符号。下期将探讨<a>标签和<img>地址。
话接上次。
一、有序列表<ol><li>
这是一个比较有意思的一个话题。我们先看成品：
这里头有一个难点：顺序。不难发现，在yes和no的前头，有1.和2.，这也正是我们今天所讲的：有序列表。
我们先看一下如果不用有序列表应该怎么做：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<div>我是不是一个“大聪明”？</div>
<div>1.yes</div>
<div>2.no</div>
</body>
</html>
是不是太麻烦了？
接下来，隆重推荐今天的嘉宾：有序列表。
我们来看一下用有序列表怎么写：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<div>我是不是一个“大聪明”？</div>
<ol>
<li>yes</li>
<li>no</li>
</ol>
</body>
</html>这就是有序列表。
<ol>，是支持<li>的框架模型。也就是说，没有<ol>，就没有<li>。
<li>，就是给标号。我们可以看到，第一组<li>yes</li>就是在yes前面添加一个1.；第二组<li>no</li>就是在no前面添加一个2.；
简而言之，就是在<ol>中出现的第几个li，他前面的序号就是几。
再举个栗子吧：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<ol>
<li>
<div>This is an apple</div>
</li>
<li>
<div>I like apples</div>
</li>
<li>
<div>Apples are good for our heath.</div>
</li>
</ol>
</body>
</html>请判断一下输出结果。
答案：
This is an apple
I like apples
Apples are good for our heath.
接下来，我们再看一看关于有序列表的东西。
如果我们不想用阿拉伯数字排序，想用其他的排序，该怎么办呢？
我们以小写字母为例：
//我们想要满足的效果//：
a.This is an apple
b.I like apples
c.Apples are good for our heath.
非常的简单，我们只需要在第一个<ol>后头添加一个type="a"就可以了。
看一下具体的例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<ol type="a">
<li>
<div>This is an apple</div>
</li>
<li>
<div>I like apples</div>
</li>
<li>
<div>Apples are good for our heath.</div>
</li>
</ol>
</body>
</html>同理，如果我们想用大写字母，罗马字母这些排序方式，也是非常的简单的，我们给他们都列举了出来：
<ol type="1"></ol>
<ol type="a"></ol>
<ol type="A"></ol>
<ol type="i"></ol>
<ol type="I"></ol>注意观察，第一个是按照数字排序；
第二个、第三个是按照字母排序；
第四个、第五个是按照罗马字母进行排序。
请谨记：在html语言中，一共就这五种排序方式。不会出现其他任何一种排序方式。所以，只要记住这五种方式就可以了。
那么，我们又产生了一个问题：假如我们以数字排序为例，如果我不想从1开始排序，想从10开始排序，该怎么办？
这个时候，就用到了strat组件。
<ol type="1" start="10"></ol>这就是一个从10开始排序的代码段。strat=" ”就是一个从几开始。例如，从5开始数，就是strat="5"；又或者，按照小写字母排序，想要从f开始排序，那就是strat="f"；
是不是又学费了？
这就是有序列表的全部内容了。
二、无序列表<ul><li>
相对于有序列表，无序列表就简单多了。我们是不是能猜出个大概，会输出什么？
先看程序吧：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<ul>
<li>你好呀</li>
<li>你好不好呀</li>
<li>你不好吗</li>
</ul>
</body>
</html>
你有没有猜到呢？
那么，我们可以观察到，这是前头没有序号的，取而代之的就是实心圆。
那么，我们如果不想用实心圆，想要换成其他的，该怎么办呢？
<ul type="disc"></ul>
<ul type="square"></ul>
<ul type="circle"></ul>从上至下，依次为：实心圆、实心方块、空心圆。
要注意的是，这个也只有这三种表达方式，就没有其他的了。所以，不要乱想，还有其他的（例如实心三角之类的）！
三、下期预告
a标签
img地址
好了，由于篇幅所限，所以这节课就上到这里了。下期再见！
（喜欢就点个关注呗，反正不要钱）
扫一扫
884
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
