HTML列表

最新推荐文章于 2025-04-27 10:00:49 发布

倒霉男孩

最新推荐文章于 2025-04-27 10:00:49 发布

阅读量763

点赞数 20

分类专栏： html+css学习笔记文章标签： html 前端 css

本文链接：https://blog.csdn.net/2401_86523075/article/details/146455628

版权

html+css学习笔记专栏收录该内容

42 篇文章

订阅专栏

无序列表

一个无序列表使用<ul>开始。每一个列表项以<li>标签开始。默认情况下，列表项目被标记为子弹。
CSS list-style-type属性用于定义列表项标记的样式：
disc : 将列表项标记设置为一个子弹
circle : 将列表项标记设置为一个圆
square : 将列表项标记设置为一个正方形
none : 列表项将不被标记

<!-- 默认 -->
    <ul>
        <li>咖啡</li>
        <li>茶</li>
        <li>牛奶</li>
    </ul>
    <!-- 无序 -->
    <ul style="list-style-type: disc;">
        <li>咖啡</li>
        <li>茶</li>
        <li>牛奶</li>
    </ul>
    <ul style="list-style-type: circle;">
        <li>咖啡</li>
        <li>茶</li>
        <li>牛奶</li>
    </ul>
    <ul style="list-style-type: Square;">
        <li>咖啡</li>
        <li>茶</li>
        <li>牛奶</li>
    </ul>
    <ul style="list-style-type:none;">
        <li>咖啡</li>
        <li>茶</li>
        <li>牛奶</li>
    </ul>

有序列表

有序列表用<ol>标签开始。每个列表项使用<li>标签开始，默认情况下，列表项将标有数字。
type属性，用于定义列表项标记的类型。
type="1" : 列表项将用数字编号
type="A" ：列表项将用大写字母编号
type="a" ：列表项将用小写字母编号
type="I" : 列表项将用大写罗马数字编号
type="i" : 列表项将用小写罗马数字编号

<!-- 默认 -->
    <ol>
        <li>咖啡</li>
        <li>茶</li>
        <li>牛奶</li>
    </ol>
<!-- 有序 -->
    <ol type="1">
        <li>咖啡</li>
        <li>茶</li>
        <li>牛奶</li>
    </ol>

    <ol type="A">
        <li>咖啡</li>
        <li>茶</li>
        <li>牛奶</li>
    </ol>

    <ol type="a">
        <li>咖啡</li>
        <li>茶</li>
        <li>牛奶</li>
    </ol>

    <ol type="I">
        <li>咖啡</li>
        <li>茶</li>
        <li>牛奶</li>
    </ol>
    <ol type="i">
        <li>咖啡</li>
        <li>茶</li>
        <li>牛奶</li>
    </ol>

描述列表

一个描述列表是一个列表的术语，每个术语都有一个描述。
<dl>标签定义了描述列表，<dt>标签定义了术语，<.dd>标签描述每一个术语

<dl>
        <!-- 描述 -->
        <dt>咖啡</dt>
        <dd>苦</dd>
        <dt>牛奶</dt>
        <dd>甜</dd>
    </dl>

浏览器效果展示图

嵌套列表

列表可以嵌套，列表内可以包含新的列表，和其他的HTML元素，例如图片，链接等：

<ul>
        <!-- 嵌套 -->
        <li>咖啡</li>
        <li>茶
            <ul>
                <li>红茶</li>
                <li>绿茶</li>
            </ul>
        </li>
        <li>牛奶</li>
    </ul>

浏览器效果展示图

水平列表

水平列表的方式创建菜单：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #333;
        }
        li{
            float: left;
        }
        li a{
            display: block;
            color: white;
            text-align: center;
            padding: 16px;
            text-decoration: none;
        }
        li a:hover{
            background-color: #111;
        }
    </style>
</head>
<body>
    <br>
    <ul>
        <li><a href="#home">首页</a></li>
        <li><a href="#news">新闻</a></li>
        <li><a href="#contact">联系我们</a></li>
        <li><a href="#about">关于我们</a></li>
    </ul>
</body>
</html>

浏览器效果展示图