1)有序列表标签<ol>
和列表标签相关的标签有两类,<ol>和<li>标签。<ol>和</ol>标签定义总的列表区域。<li>和</li>表示的是
在列表区域中的列表项。列表区域内可以包含多个列表项。浏览器在显示列表项时会自动为每个列表项添加序号。
具体的例子和示意图如下:
<!DOCTYPE html>
<html>
<head>
<title>Test Lists</title>
</head>
<body>
<h1>中国古代著名诗人</h1>
<ol>
<li>李白</li>
<li>杜甫</li>
<li>王勃</li>
<li>李商隐</li>
</ol>
</body>
</html>
![](https://i-blog.csdnimg.cn/blog_migrate/ada822696da67493950deb99433336ef.png)
2)无序列表标签<ul>
无序列表标签和有序列表标签的唯一区别就是有序列表标签的每个列表项都是有编号的,而无序列表标签
则没有编号,编号位置显示的是圆点。其他的都是一样的。下面是例子和示意图。
<!DOCTYPE html>
<html>
<head>
<title>Unordered Lists</title>
</head>
<body>
<h1>Some random thoughts</h1>
<p>underneath are things i randomly thought</p>
<ul>
<li>sleep</li>
<li>do sports</li>
<li>watch TV</li>
<li>play computer games</li>
</ul>
</body>
</html>
![](https://i-blog.csdnimg.cn/blog_migrate/82ad360c03c8f47d5151d822afcfbc3b.png)
3)标签嵌套
<ul>、<ol>和<li>内部都可以互相嵌套,这样就可以形成多级标签。下面是例子和示意图.
<!DOCTYPE html>
<html>
<head>
<title>Nested lists</title>
</head>
<body>
<ol>
<li>Dad's interests
<ul>
<li>football</li>
<li>knitting</li>
</ul>
</li>
<li>Mom's interests
<ul>
<li>hating football</li>
<li>skydiving</li>
</ul>
</li>
</ol>
<ul>
<li>Favorite Boys' Names
<ol>
<li>孟星魂</li>
<li>郭靖</li>
<li>狄云</li>
</ol>
</li>
<li>Favorite Girls' Names
<ol>
<li>木婉清</li>
<li>小昭</li>
<li>双儿</li>
</ol>
</li>
</ul>
<ul>
<ol>
<li>孟星魂</li>
<li>郭靖</li>
<li>狄云</li>
</ol>
</ul>
</body>
</html>
![](https://i-blog.csdnimg.cn/blog_migrate/5452ed7e6de937d07f13b47db24e0464.png)
参考文献: