2021-07-14 列表与列表的嵌套（重点）

最新推荐文章于 2023-04-04 16:00:11 发布

原创最新推荐文章于 2023-04-04 16:00:11 发布 · 3.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html5

笔记专栏收录该内容

23 篇文章

订阅专栏

本文介绍了HTML5中四种类型的列表：有序列表、无序列表、自定义列表及其嵌套。强调了列表嵌套的关键在于在< li >元素中进行，以实现多级列表结构。

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

1.有序列表

<!-- type="" 控制有序列表的标志类型, 合法值如下:  1(数字),  a(小写字母),  A(大写字母),  i(小写罗马),  I(大写罗马) -->
    <ol type="a">
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
        <li type="1">列表项4</li>
        <li>列表项5</li>
        <li>列表项6</li>
    </ol>

在这里插入图片描述

2.无序列表

<!-- type="square" disc(默认值-实心圆) circle(空心圆) square(实心方块)-->
    <ul type="square">
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
        <li>列表项4</li>
        <li>列表项5</li>
        <li>列表项6</li>
    </ul>

在这里插入图片描述

3.自定义列表

<dl>
        <dt>广东</dt>
        <dd>广州</dd>
        <dd>佛山</dd>
        <dd>深圳</dd>
        <dt>湖南</dt>
        <dd>长沙</dd>
        <dd>株洲</dd>
        <dd>衡阳</dd>
    </dl>

在这里插入图片描述

4.列表的嵌套

无序列表里可以嵌套有序列表，有序列表里也可以嵌套无序列表，但是要注意，列表的嵌套在< li >中进行，从而可以实现二、三级列表。

<ul>
        <!-- 在li里面嵌套一个新的列表 -->
        <li>游戏资料
            <ol>
                <li>游戏下载</li>
                <li>新手指引</li>
                <li>资料库</li>
            </ol>
        </li>

        <li>商城/合作
            <ol>
                <li>点券充值</li>
                <li>周边商城</li>
            </ol>
        </li>

        <li>社区活动
            <ol>
                <li>官方社区</li>
                <li>官方论坛</li>
            </ol>
        </li>
        <li>赛事官网</li>
        <li>自动系统
            <ol>
                <li>联系客服</li>
                <li>账号注销</li>
            </ol>
        </li>
    </ul>