今天的文章主要讲述HTML无序列表、有序列表、自定义列表标签的基本知识，和在网页中的效果

一、列表的应用场景

场景:

在网页中按照行展示关联性的内容，如:新闻列表、排行榜、账单等

特点:

按照行的方式，整齐显示内容

种类:

无序列表、有序列表、自定义列表
请添加图片描述

无序列表

在这里插入图片描述

有序列表
在这里插入图片描述

自定义列表

二、无序列表

场景:

在网页中表示一组无顺序之分的列表，如:新闻列表。

标签组成:
标签名说明
ul表示无序列表的整体，用于包裹li标签
li表示无序列表的每一项，用于包含每一行的内容
代码:
<!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>Document</title>
</head>
<body>
    <ul>
        <li>榴莲</li>
        <li>香蕉</li>
        <li>苹果</li>
        <li>哈密瓜</li>
        <li>火龙果</li>
    </ul>
</body>
</html>
显示特点:

• 列表的每一项前默认显示圆点标识

注意点:

• ul标签中只允许包含li标签
• li标签可以包含任意内容

请添加图片描述

无序列表

小结

无序列表由几个标签组成?分别表示什么?

• ul标签:表示无序列表的整体
• li标签:表示无序列表的每一项

无序列表标签的嵌套规范是什么?

• ul标签中只允许嵌套li标签
• li标签中可以嵌套任意内容

三、有序列表

场景:

在网页中表示一组有顺序之分的列表，如:排行榜。

标签组成:
标签名说明
ol表示有序列表的整体，用于包裹li标签
li表示有序列表的每一项，用于包含每一行的内容
代码:
<!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>Document</title>
</head>
<body>
    <ol>
        <li>张三:100</li>
        <li>李四: 80</li>
    </ol>
</body>
</html>
显示特点:

• 列表的每一项前默认显示序号标识

注意点:

•ol标签中只允许包含li标签
• li标签可以包含任意内容

在这里插入图片描述

有序列表

小结

有序列表由几个标签组成?分别表示什么?

• ol标签:表示有序列表的整体
• li标签:表示有序列表的每一项

有序列表标签的嵌套规范是什么?

• ol标签中只允许嵌套li标签
• li标签中可以嵌套任意内容

四、自定义列表

场景:

在网页的底部导航中通常会使用自定义列表实现。

标签组成:
标签名说明
dl表示自定义列表的整体，用于包裹dt/dd标签
dt表示自定义列表的主题
dd表示自定义列表的针对主题的每一项内容
代码:
<!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>Document</title>
</head>
<body>
    <dl>
        <dt>帮助中心</dt>
        <dd>账户管理</dd>
        <dd>购物指南</dd>
    </dl>
</body>
</html>
显示特点:

• dd前会默认显示缩进效果

注意点:

• dl标签中只允许包含dt/dd标签
• dt/dd标签可以包含任意内容

小结

有序列表由几个标签组成?分别表示什么?

• ol标签:表示有序列表的整体
• li标签:表示有序列表的每一项

有序列表标签的嵌套规范是什么?

• ol标签中只允许嵌套li标签
• li标签中可以嵌套任意内容

在这里插入图片描述

自定义列表

小结

自定义列表由几个标签组成?分别表示什么?

• dl标签:表示自定义列表的整体
• dt标签:表示自定义列表的主题
• dd标签:表示对于主题的每一项内容

自定义列表标签的嵌套规范是什么?

• dl标签中只允许嵌套dt/dd标签
• dt/dd标签中可以嵌套任意内容

总结

无序列表最常用，有序列表偶尔用，自定义列表底部导航用

# html5
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

解锁HDC 2024之旅：从购票到报名，全程攻略

avatar 华为云开发者联盟
cover

从原始边列表到邻接矩阵Python实现图数据处理的完整指南

avatar 华为云开发者联盟
cover

华为云云原生FinOps解决方案，释放云原生最大价值

avatar 华为云开发者联盟