前端设计（一）>>>>HTML的列表（有序列表、无序列表、自定义列表的使用)_有序列表名词解释

作者：weixin_40725706 | 2024-02-16 11:42:52

踩

有序列表名词解释

有序列表（ol）

定义：有序列表是一列项目，列表项目使用数字进行标记。有序列表始于

标签。每个列表项始于
标签。

有序列表有 type 和 start 属性。
语法格式：
1
2

<ol type=value1 start=value2>
    <li></li>        
</ol>

1
2
3
4

注：value1 表示有序列表项目符号的类型, value2 表示项目开始的数值。
type 属性如下所示：

type类型 	描述
type=1 	表示列表项目用数字表示（1，2，3...)
type=a 	表示列表项目用小写字母表示（a,b,c...)
type=A 	表示列表项目用大写字母表示（A,B,C...)
type=i 	表示列表项目用小写罗马数字表示(i,ii,iii….)
type=I 	表示列表项目用大写罗马数字表示(I,II,III…)
1
2
3
4
5
6

例子：

<!DOCTYPE html>
<html>

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



        <body>

            <h4>数字列表：</h4>
            <ol>
                <li>春</li>
                <li>夏</li>
                <li>秋</li>
                <li>冬</li>
            </ol>

            <h4>小写字母列表：</h4>
            <ol type="a">
                <li>春</li>
                <li>夏</li>
                <li>秋</li>
                <li>冬</li>
            </ol>

            <h4>大写写字母列表：</h4>
            <ol type="A">
                <li>春</li>
                <li>夏</li>
                <li>秋</li>
                <li>冬</li>
            </ol>

            <h4>小写罗马字母列表：</h4>
            <ol type="i">
                <li>春</li>
                <li>夏</li>
                <li>秋</li>
                <li>冬</li>
            </ol>

            <h4>大写罗马字母列表：</h4>
            <ol type="I">
                <li>春</li>
                <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
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

注：type 默认为数字列表，即不给 type 设置属性值时显示的为数字列表。

无序列表（ul）

定义：无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表始于

标签。每个列表项始于
。无序列表的各个列表项之间没有顺序级别之分，是并列的。

ul 的 type 属性：默认值: disc，方块: square，空心圆: circle。
语法格式：
1
2

<ul>
    <li>列表项1</li>   
    <li>列表项2</li>   
    <li>列表项3</li>
    ......
</ul>

1
2
3
4
5
6
7

注：

标记用于定义无序列表，

标记嵌套在
标记中，用于描述具体的列表项，每对
中至少应包含一对

。
例子：

<!DOCTYPE html>
<html>

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



        <body>

            <h4>Disc 项目符号列表：</h4>
            <ul type="disc">
                <li>春</li>
                <li>夏</li>
                <li>秋</li>
                <li>冬</li>
            </ul>

            <h4>Circle 项目符号列表：</h4>
            <ul type="circle">
                <li>春</li>
                <li>夏</li>
                <li>秋</li>
                <li>冬</li>
            </ul>

            <h4>Square 项目符号列表：</h4>
            <ul type="square">
                <li>春</li>
                <li>夏</li>
                <li>秋</li>
                <li>冬</li>
            </ul>

        </body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

自定义列表（dl）

定义：自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以

标签开始。每个自定义列表项以开始。每个自定义列表项的定义以

开始。自定义列表的列表项前没有任何项目符号。

语法格式：

<dl>
    <dt>名词1</dt>
    <dd>名词1解释1</dd>
    ...
    <dt>名词2</dt>
    <dd>名词2解释1</dd>
    ...
</dl>
1
2
3
4
5
6
7
8

例子：

<!DOCTYPE html>
<html>

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

    <body>

        <body>

            <h2>一个自定义列表：</h2>

            <dl>
                <dt>春天</dt>
                <dd>万物复苏 </dd>
                <dd>百花争艳 </dd>
                <dd>适合学习</dd>
                <dt>夏天</dt>
                <dd>夏日绵绵</dd>
                <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
21
22
23
24
25
26
27
28

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