今日份HTML学习：有序、无序排序

HTML5列表详解：有序列表与无序列表

最新推荐文章于 2024-10-11 14:28:31 发布

原创最新推荐文章于 2024-10-11 14:28:31 发布 · 556 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #html

html、css学习专栏收录该内容

5 篇文章

订阅专栏

本文介绍了HTML中的ol和ul标签，ol用于创建带编号的有序列表，支持reversed倒序和type类型设置；ul则用于创建无序列表，样式包括实心圆、空心圆和方块，两者都可与li标签配合使用，并能互相嵌套。

一、ol标签

ol定义了一个有序列表，通常渲染为一个带编号的列表。ol与li标签一起使用，li标签来定义列表选项。ol标签的属性有reversed倒序、type列表类型。

ol和li可以嵌套使用。

    <ol>
        <li>sr</li>
        <li>ssr</li>
    </ol>
    
    <ol reversed>
        <li>sr</li>
        <li>ssr</li>
    </ol>
    
    <ol type="A">
        <li>sr</li>
        <li>ssr
            <ol type="a">
                <li>sr</li>
                <li>ssr </li>
            </ol>
        </li>
    </ol>
    <ol type="I">
        <li>sr</li>
        <li>ssr
            <ol type="i">
                <li>sr</li>
                <li>ssr </li>
            </ol>
        </li>
    </ol>

二、ul标签

ul定义无序列表。将ul标签与li标签一起使用，创建无序列表。其样式根据嵌套的层数进行改变，顺序为实心圆、空心圆、方块。

    <ul>
        <li>sr</li>
        <li>ssr</li>
        <ul>
            <li>sr</li>
            <li>ssr</li>
            <ul>
                <li>sr</li>
                <ul>
                    <li>sr</li>
                </ul>
            </ul>
        </ul>
    </ul>

ul标签可以和ol标签进行嵌套。

    <ul>
        <li>第一</li>
        <ol>
            <li>A</li>
        </ol>
        <ul>
            <li>第二</li>
            <ol>
                <li>B</li>
            </ol>
            <ul>
                <li>第三</li>
                <ol>
                    <li>C</li>
                </ol>
            </ul>
        </ul>
    </ul>