HTML 学习笔记(七)列表

作者：菜鸟追梦旅行 | 2024-03-14 14:12:11

踩

HTML 学习笔记(七)列表

html中的列表分为以下三种：有序列表，无序列表和自定义列表

1.有序列表

有序列表由两个元素组成：元素ol和元素li，此两个元素是父子关系，li必须包裹在ol里使用，
ol里直接嵌套的只有li，其嵌套效果需要放在li的里面

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <!-- 把大象装冰箱有几步： -->
        <h2><i>把大象装冰箱有几步：</i></h2>
        <ol>
            <!-- 列表前面自动生成的序号被称为项目符号，默认其从自然数1开始 -->
            <li>把冰箱门打开</li>
            <li>把大象装进去</li>
            <li>把冰箱门带上</li>
        </ol>
        
    </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

在这里插入图片描述
列表项目符号可以通过在ol标签中加入属性type来设置：
type属性值有5种，分别是A，a，I，i，1，
分别对应了大小写的英文数字顺序，大小写的罗马数字顺序以及阿拉伯数字顺序

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <h2><i>把大象装冰箱有几步：</i></h2>
        <ol type="I">
            <li>把冰箱门打开</li>
            <li>把大象装进去</li>
            <li>把冰箱门带上</li>
        </ol>
    </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

在这里插入图片描述
通过在ol标签内添加start属性来控制项目符号的初始值

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
    
        <h2><i>把大象装冰箱有几步：</i></h2>
        <ol type="I" start="5">
            <li>把冰箱门打开</li>
            <li>把大象装进去</li>
            <li>把冰箱门带上</li>
        </ol>
    </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

在这里插入图片描述

2.无序列表

下面这种没有标准顺序，无序的排列，可以称为无序列表
在这里插入图片描述
通过标签ul和li即可实现无序列表

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <ul>
            <li>事件1</li>
            <li>事件3</li>  <!-- 可以通过按住alt+↑或者↓的方式来快速交换无序列表中的两行内容 -->
            <li>事件2</li>
        </ul>

    </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

在这里插入图片描述

通过在ul标签中添加type属性来实现对无序列表项目符号大小形状进行设置：
disc是type的默认值，即黑色实心圆，circle为空心圆圈，square是黑色实心方块，none为无项目符号

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
    
        <ul type="circle">
            <li>事件1</li>
            <li>事件3</li>  
            <li>事件2</li>
        </ul>
    </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

在这里插入图片描述

特别的，可以通过按住alt+↑或者↓的方式来快速交换无序列表中的两行内容

3.自定义列表

自定义列表由三个标签(双标签)组成： dl(定义列表)，dt(定义术语)和dd(定义描述)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <h2><i>一个自定义列表：</i></h2>
        <img src="https://www.itbaizhan.com/wiki/imgs/image-20211016131741655.png" alt="一个自定义列表" title="自定义列表">
        
        <!-- dt和dd为dl的子标签，其互为兄弟关系，不能相互嵌套，不能脱离dl存在 -->
        <dl>
            <dt>帮助中心</dt>
            <dd>用户指南</dd>
            <dd>在线客服</dd>
        </dl>

    </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/235071