HTML5有序无序标签

标签分为有序标签和无序标签，有序标签为<ol><li>,无序标签分为<ul><li>

有序标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ol>
        <li>第一</li>
        <li>第二</li>
    </ol>                   <!--有序列表标签-->
    <ol type="A">           <!--type属性 更改标签序号 有五种格式-->
        <li>
            777
        </li>
        <li>666</li>
    </ol>
    <ol type="I">
        <li>水果
            <ol>
                <li>
                    苹果
                </li>
                <li>
                    香蕉
                </li>
            </ol>
        </li>
    </ol>                   <!--有序标签之间的相互嵌套-->
</body>
</html>

有序标签可以通过利用type属性改变序号样式，快捷方式为ol>li*i，其中i为所需要的标签数

无序便签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>            <!--默认-->
        <li>
            11
        </li>
        <li>22</li>

    </ul>           <!--空心-->
    <ul type="circle">
        <li>55</li>
        <li>66</li>
    </ul>
    <ul type="square">      <!--方块-->
        <li>55</li>
        <li>66</li>
    </ul>
    <ul type="none">      <!--无-->
        <li>55</li>
        <li>66</li>
    </ul>
    <ul type="square">      <!--方块-->
        <li>55
            <ul>
                <li>77</li>
            </ul>
        </li>
        <li>66
            <ol>
                <li>99</li>
            </ol>
        </li>
    </ul>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>           <!--ul>li*3  快捷方式-->
</body>
</html>

无序标签与有序标签类似，都可通过type属性改变标签样式，快捷方式为ul>li*i;

标签之间可以相互嵌套。

posted @ 2023-09-08 16:03  songs7  阅读(128)  评论(0)    收藏  举报