有序列表、无序列表、定义列表_无序列表和有序列表

作者：繁依Fanyi0 | 2024-03-28 08:18:48

踩

无序列表和有序列表

有序列表、无序列表、定义列表

三种列表标签和语义

标签	语义
<u1></u1>	无序列表
<o1></o1>	有序列表
<d1></d1>	定义列表

无序列表

无序列表顾名思义就是“没有可以顺序的”列表。它使用<u1></u1>标签，ul是英文unordered list（无序列表）的简写，而在<u1></u1>标签里面，每一个列表项都是<li></li>标签，li是英文list item（列表项）的简写。

无序列表特点

1、<ul>标签和<li>标签是一对父子组合标签，二者都不可单独使用。

2、<ul>的子标签只能是<li>标签，其他任何标签都不行。

3、<li>标签只能放到<ul>或者<ol>标签中。

4、<li>标签是容器，它的内部可以放任何标签。如下面这段代码：

<body>
    <ul>
        <li>苹果</li>
        <li>香蕉</li>
        <li>葡萄</li>
        <li>
            橘子
            <p>橘子又便宜又好吃</p>
        </li>
    </ul>
</body>1
2
3
4
5
6
7
8
9
10

可以看到<li>标签里面是可以放其他标签的，比如<p>标签，网页效果如下：

在这里插入图片描述

列表的嵌套

因为<li>标签中可以放任何标签，因此可以在列表中在嵌套列表，但仍需要遵守上面的几点规则，如下面这段代码：

<body>
    <ul>
        <li>
            <h2>长沙市</h2>
            <ul>
                <li>雨花区</li>
                <li>芙蓉区</li>
                <li>天心区</li>
            </ul>            
        </li>
        <li>
            <h2>岳阳市</h2>
            <ul>
                <li>君山区</li>
                <li>岳阳县</li>
                <li>岳阳楼区</li>
            </ul>
        </li>
        </li>
    </ul>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

在这段代码中，可以看到，<ul>标签和<li>标签还是成对出现的，<ul>的子标签还是<li>标签，网页效果如下：

在这里插入图片描述

无序列表的tpye属性

无序列表是有type属性的，用来定义前导符号的样式。

值	描述
disc	默认值，实心圆
circle	空心圆
square	实心方块

但在HTML5中基本已经不用的，用css代替。

有序列表

它使用<o1></o1>标签，ol是英文ordered list（无序列表）的简写，而在<o1></o1>标签里面，每一个列表项都是<li></li>标签，li是英文list item（列表项）的简写。因此有序列表特点跟无序列表差不多。

<o1>标签的type属性

<o1>标签可以设置type属性的，用来设置编号的类型。

值	意义
a	表示小写英文字母编号
A	表示大写英文字母编号
i	表示小写罗马数字编号
I	表示大写罗马数字编号
1	表示数字编号（默认）

这个看值就很容易理解其意义。

<o1>标签的start属性

start属性值必须是一个整数且必须为阿拉伯数字，是用来指定列表标号的起始值。

<body>
    <h1>城市名称</h1>
    <ol type="A" start="3">
        <li>北京</li>
        <li>上海</li>
        <li>杭州</li>
        <li>深圳</li>
        <li>天津</li>
    </ol>
</body>1
2
3
4
5
6
7
8
9

在这里插入图片描述

可以看到城市名称按照大写英文字母编号，且从第三个字母开始。

<o1>标签的reversed属性

reversed属性指定列表中的条目是否是倒叙排列，该属性不需要值。

定义列表

需要逐条给出定义描述的列表就是定义列表。示例代码如下：

<body>
    <dl>
        <dt>无序列表</dt>
        <dd>“没有可以顺序的”列表,列表项包含在&lt;li>&lt;/li>标签对中，无序列表以&lt;ul>&lt;/ul>定义，项目前有符号缩进</dd>
        <dt>有序列表</dt>
        <dd>列表项包含在&lt;li>&lt;/li>标签对中，有序列表以&lt;ol>&lt;/ol>定义，项目前有数字或者字母缩进</dd>
        <dt>定义列表</dt>
        <dd>需要逐条给出定义描述的列表</dd>
    </dl>
</body>1
2
3
4
5
6
7
8
9

<dl>标签是英文definition list（定义列表）的简写，<dt>标签是英文data term（数据项）的简写，<dd>标签是英文data definition（数据定义）的简写。

<dt>标签和<dd>标签出现在<dl>定义列表标签中，可以交替出现，也可以不交替出现，而是分别出现在不同的定义列表中。

我们在使用定义列表时应该看语义，而不是看样式，只要语义上有’'解释说明“含义的文字，且为列表形态，就应该使用定义列表。

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