列表标签解析-优快云博客

本文链接：https://blog.youkuaiyun.com/CCT912097957/article/details/105270100

列表标签

容器里面装载着文字或图表的一种形式，叫列表。

列表最大的特点就是整齐、整洁、有序。
无序列表的各个列表项之间没有顺序级别之分，是并列的。

无序列表 ul

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>无序列表</title>
</head>
<body>
    <!-- 无序列表，自动生成黑点，方块等 -->
    <h3>你喜欢的水果</h3>
    <!-- ul标签不能嵌套其他标签,li标签可以嵌套其他标签 -->
    <ul>
        <li>苹果</li>
        <li>菠萝</li>
        <li>香蕉</li>
        <li>橘子</li>
        <li>雪梨</li>
    </ul>
</body>
</html>

在这里插入图片描述

有序列表 ol

有序列表即为有排列顺序的列表，其各个列表项按照数字的顺序排列定义。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>有序列表</title>
</head>
<body>
    <h1>国家</h1>
    <ol>
        <li>中国</li>
        <li>美国</li>
        <li>日本</li>
        <li>加拿大</li>
        <li>英国</li>
    </ol>
</body>
</html>

在这里插入图片描述
所有特性基本与ul 一致，所以实际工作中，较少用 ol ，这里做个了解。

自定义列表

定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义列表</title>
</head>
<body>
    <!-- 自定义列表用的较少，一般用于网页底部  -->
    <dl>
        <dt>北京</dt>
        <dd>海淀</dd>
        <dd>昌平</dd>
        <dd>密云</dd>
        <dd>顺义</dd>
        <dd>通州</dd>
    </dl>
</body>
</html>

在这里插入图片描述
自定义列表偶尔使用多用于footer页脚。

需要注意的是：

1.ul中只能嵌套li，直接在ul标签中输入其他标签或者文字的做法是不被允许的。
2.li之间相当于一个容器，可以容纳所有元素。
3.其他列表同理。

开发中的列表标签

列表标签

有序列表 ol

自定义列表

需要注意的是：