在HTML中,列表可以分为两种,一种为有序列表。另一种为无序列表
今天就来详细讲解一下这两种列表如何实现,效果如何
1.有序列表
有序列表的标准格式如下:
<ol>
<li>列表项一</li>
<li>列表项二</li>
</ol>
这里的列表项可以随意更改内容,使用示例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>title</title>
</head>
<body>
<ol>
<li>吃饭</li>
<li>睡觉</li>
</ol>
</body>
</html>
效果图如下:
2.有序列表更改前导符
什么是前导符?
前导符就是我们在使用列表打出文字前的小标题,如上图中的 1. 2. 这些都是前导符
前导符的标准语言使用如下:
<ol type="前导符">
<li>列表项一</li>
<li>列表项二</li>
</ol>
这里的前导符有五种,如下图:
接下来是实际代码演示+效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>title</title>
</head>
<body>
<ol type="a">
<li>列表项一</li>
<li>列表项二</li>
</ol>
<ol type="A">
<li>列表项一</li>
<li>列表项二</li>
</ol>
<ol type="1">
<li>列表项一</li>
<li>列表项二</li>
</ol>
<ol type="i">
<li>列表项一</li>
<li>列表项二</li>
</ol>
<ol type="I">
<li>列表项一</li>
<li>列表项二</li>
</ol>
</body>
</html>
3.无序列表
在HTML中另外一种列表被称作无序列表,无序列表与有序列表极其相似,只有微小的差距
无序列表标准格式如下:
<ul>
<li>列表项一</li>
<li>列表项儿</li>
</ul>
无序列表使用及效果如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>title</title>
</head>
<body>
<ul>
<li>吃饭</li>
<li>睡觉</li>
</ul>
</body>
</html>
4.无序列表更改前导符
这里不做演示了,与有序列表使用方法相同
标签:序列表,项一,无序,列表,HTML,前导,详解,项二 From: https://blog.csdn.net/2301_80349538/article/details/142896175