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

最新推荐文章于 2025-03-20 19:20:23 发布

原创最新推荐文章于 2025-03-20 19:20:23 发布

· 1.5w 阅读

85 ·

版权

文章标签：

#html5

HTML 专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了HTML中的三种列表：无序列表、有序列表和定义列表。包括它们的基本语法、常用属性及应用场景，帮助读者更好地理解和使用这些列表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

三种列表标签和语义

标签	语义
<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>

可以看到<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>

在这段代码中，可以看到，<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>

在这里插入图片描述

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

<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>