掌握HTML5的列表实验——有序列表与无序列表

最新推荐文章于 2024-04-19 12:54:59 发布

computerismylife

最新推荐文章于 2024-04-19 12:54:59 发布

阅读量740

点赞数

文章标签： html5 前端 html

本文链接：https://blog.csdn.net/computerismylife/article/details/124784168

版权

掌握HTML5的列表实验——有序列表与无序列表

总结：
有（you）序，使用ol li 标签；
无（wu）序，使用 ul li 标签。
快速获取列表方式：(我想要一个有序列表里有5条记录)
ol>li*5 按Enter键，然后同时按下shift和alt键并滑动鼠标可横向或纵向进行相同操作。
有序列表与无序列表的区别：
有序列表默认情况编号从1开始，可以通过"list-style-type=none"来去除，而无序列表的默认项目符号为实心黑圈，可以通过"list-style-typr=circle"才改为空心，或者更改为其他我们所需要的项目编号或符号。

效果图：
在这里插入图片描述

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>列表嵌套作业</title>

</head>

<body>

    <!-- 1、判断外框架是一个有序列表

                可以直接写<ol></ol>默认从1.开始升序 ；

                或者在<ol>标签内加上属性，type="1"也行；

                或者在标签内使用start="1"也行。

    -->

    <ol>    

        <li>windows 95</li>

        <li>windows 98</li>

        <li>windows NT

    <!-- 2、这里可以使用快捷键 ul>li*2 -->

            <ul style="list-style-type:disc;">

                <li>windows NT Workstation</li>

                <li>windows NT Server</li>

            </ul>

        </li>

        <li>windows 2000

    <!-- 3、根据实心圆判断这里使用无序标签，且类型为disc，用type或style="list-style-type"都行。 -->

            <ul type="disc">

                <li>windows 2000 Professional</li>

                <li>windows 2000 Server</li>

                <li>windows 2000 Advance Server</li>

            </ul>

        </li>

        <li>windows xp</li>

        <li>windows vista</li>

        <li>windows 7</li>

        <li>windows 8</li>

        <li>windows 10</li>

        <li>windows 11</li>

    </ol>

</body>

</html>