HTML08：列表标签-CSDN博客

本文链接：https://blog.csdn.net/m0_62820255/article/details/130282927

一、有序列表

始于<ol>标签，每个列表项始于<li>标签

<ol>
    <li>有序列表<li>
<ol>

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <ol>
        <li>苹果</li>
        <li>橘子</li>
        <li>草莓</li>
        <li>香蕉</li>
    </ol>
</body>
</html>

属性：

1、type：

①1 表示项目列表用数字标号（1，2，3...）

②a 表示项目列表用数字标号（a，b，c...）

③A 表示项目列表用数字标号（A，B，C...）

④i 表示项目列表用数字标号（i，ii，iii...）

⑤I 表示项目列表用数字标号（I，II，III...）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <ol type="1">
        <li>苹果</li>
        <li>橘子</li>
        <li>草莓</li>
        <li>香蕉</li>
    </ol>
    
    <ol type="a">
        <li>苹果</li>
        <li>橘子</li>
        <li>草莓</li>
        <li>香蕉</li>
    </ol>

    <ol type="A">
        <li>苹果</li>
        <li>橘子</li>
        <li>草莓</li>
        <li>香蕉</li>
    </ol>

    <ol type="i">
        <li>苹果</li>
        <li>橘子</li>
        <li>草莓</li>
        <li>香蕉</li>
    </ol>
    
    <ol type="I">
        <li>苹果</li>
        <li>橘子</li>
        <li>草莓</li>
        <li>香蕉</li>
    </ol>
</body>
</html>

有序列表嵌套：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <ol type="I">
        <li>2000年</li>
        <li>
            2001年
            <ol type="i">
                <li>小明</li>
                <li>小红</li>
                <li>小强</li>
            </ol>
        </li>
        <li>2002年</li>
        <li>2003年</li>
    </ol>
</body>
</html>

二、无序列表

始于<ul>标签，每个列表项始于<li>标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <ul>
        <li>苹果</li>
        <li>橘子</li>
        <li>香蕉</li>
    </ul>
</body>
</html>

type属性：

1、disc 默认实心圆

2、circle 空心圆

3、square 小方块

4、none 不显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <ul type="disc">
        <li>苹果</li>
        <li>橘子</li>
        <li>香蕉</li>
    </ul>
    <ul type="circle">
        <li>苹果</li>
        <li>橘子</li>
        <li>香蕉</li>
    </ul>
    <ul type="square">
        <li>苹果</li>
        <li>橘子</li>
        <li>香蕉</li>
    </ul>
    <ul type="none">
        <li>苹果</li>
        <li>橘子</li>
        <li>香蕉</li>
    </ul>
</body>
</html>

无序列表的嵌套：

 <ul type="disc">
        <li>苹果</li>
        <li>
            肉类
            <ul>
                <li>牛肉</li>
                <li>羊肉</li>
                <li>兔肉</li>
            </ul>
        </li>
        <li>香蕉</li>
    </ul>