初步认识ul（无序列表）和ol（有序列表）

温婉婉

已于 2022-09-08 22:35:39 修改

阅读量3.5k

点赞数

分类专栏： HTML 文章标签： css 前端 html

于 2022-09-06 14:42:19 首次发布

本文链接：https://blog.csdn.net/weixin_48796690/article/details/126724736

版权

HTML 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

初步认识`<ul></ul>`和`<ol></ol>`

一、知识点
1.<ul></ul>是无序列表
<ol></ol>是有序列表
2. <ul> <li></li> </ul>
3. <ol> <li></li> </ol>

<!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>无序列表ul  有序列表ol</title>
</head>

<style>
    ul{
        border: 5px black solid;
        background-color: plum;
        border-radius: 25px;
    }


    ol{
        background-color: orange;
        border: 3px red solid;
    }


    .wo{
        text-decoration: none;
        color: aqua;
        font-size: 20px;
    }

</style>

<body>
    <!-- 有序列表用ul，然后ul里面写li标签-->
    <ul>
        <h1>欢迎来到首页</h1>
        <li class="aaa"><a href="../12.11学习/表格03(简历,有点难).html">个人简历</a> <img src="../12.11学习/image/lazhu.jpg" alt=""></li>
        <!-- li占一行，也算是块级元素 -->
        <li class="bbb"><a href="./京东蜡烛.html">蜡烛</a></li>
        <li class="ddd"><a href="../12.11学习/网页布局01(诗歌简介）.html">诗歌</a></li>
        <li class="ccc"><a href="../12.11学习/表格04(课后作业).html">诗人热力榜</a></li>
    </ul>

    <!-- 有序列表用ol,ol里面也写li标签 -->
    <ol>
        <li><a class="wo" href="#">我</a></li>
        <li>很</li>
        <li>爱</li>
        <li>你</li>
    </ol>
</body>
</html>