HTML（五）列表详解

重生之我在20年代敲代码2024-10-17 12:08

在HTML中，列表可以分为两种，一种为有序列表。另一种为无序列表

今天就来详细讲解一下这两种列表如何实现，效果如何

1.有序列表

有序列表的标准格式如下：

html 复制代码

   <ol>
        <li>列表项一</li>
        <li>列表项二</li>
   </ol>

这里的列表项可以随意更改内容，使用示例如下：

html 复制代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>title</title>
</head>

<body>
 
    <ol>
        <li>吃饭</li>
        <li>睡觉</li>
    </ol>
    
</body>
</html>

效果图如下：

2.有序列表更改前导符

什么是前导符？

前导符就是我们在使用列表打出文字前的小标题，如上图中的 1. 2. 这些都是前导符

前导符的标准语言使用如下：

html 复制代码

 <ol type="前导符">
        <li>列表项一</li>
        <li>列表项二</li>
 </ol>

这里的前导符有五种，如下图：

接下来是实际代码演示+效果

html 复制代码

<!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中另外一种列表被称作无序列表，无序列表与有序列表极其相似，只有微小的差距

无序列表标准格式如下：

html 复制代码

    <ul>
        <li>列表项一</li>
        <li>列表项儿</li>
    </ul>

无序列表使用及效果如下：

html 复制代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>title</title>
</head>

<body>
 
    <ul>
        <li>吃饭</li>
        <li>睡觉</li>
    </ul>

</body>
</html>

4.无序列表更改前导符

这里不做演示了，与有序列表使用方法相同