【HTML入门】第十一课 - 列表

经海路大白狗

于 2024-07-13 16:00:00 发布

阅读量164

点赞数 9

分类专栏： WEB前端小白从这里出发文章标签： html 前端

本文链接：https://blog.csdn.net/xingyu_qie/article/details/140380448

版权

WEB前端小白从这里出发专栏收录该内容

14 篇文章 0 订阅

订阅专栏

这一下节，我们说列表相关的知识。之前我们说了表格，你看 table 表格，如果没有纵向的线，只有横向的线，是不是就跟列表很像了呢。

1 有序列表

有序的列表，就是前面带有1 2 3 序号的。而且你不用给列表加序号，也可以显示出来。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <ol>
            <li>语文</li>
            <li>数学</li>
            <li>英语</li>
        </ol>
    </body>
</html>

2 无序列表

无序列表，很明显，就是与有序列表相反，不带有前面的序号，而是一个小圆点。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <ul>
            <li>语文</li>
            <li>数学</li>
            <li>英语</li>
        </ul>
    </body>
</html>

3 嵌套起来

我们还可以将这两种列表嵌套起来

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <ol>
            <li>语文</li>
            <ul>
                <li>语文（上册）</li>
                <li>语文（下册）</li>
            </ul>
            <li>数学</li>
            <ul>
                <li>数学（上册）</li>
                <li>数学（下册）</li>
            </ul>
            <li>英语</li>
            <ul>
                <li>英语（上册）</li>
                <li>英语（中册）</li>
                <li>数学（下册）</li>
            </ul>
        </ol>
    </body>
</html>