HTML 有序列表自定义列表

最新推荐文章于 2023-09-10 10:26:50 发布

CodeDoraemon

最新推荐文章于 2023-09-10 10:26:50 发布

阅读量3k

点赞数 2

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_40417070/article/details/113092128

版权

HTML 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

本文介绍了HTML中的两种列表类型：有序列表和自定义列表。有序列表用于展示具有排名或顺序的内容，如粉丝排行榜；自定义列表常用于网页底部，展示链接并提供相关解释，如关注我们的各个平台。示例代码展示了如何创建这两种列表，并解释了它们在网页设计中的应用场景。

摘要由CSDN通过智能技术生成

有序列表

在这里插入图片描述

表示这是一个有序列表
有序列表中的列表项 # 代码示例

<!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>
    <h4>粉丝排行榜</h4>
    <ol>
        <li>王 1000</li>
        <li>赵 5600</li>
        <li>李 10230</li>
        <li>孙 15600</li>
        <!-- 有序列表的运行结果中,会自动的加上一格排名 -->
        <!-- 顺序不能随意的颠倒 -->
    </ol>
</body>
</html>

运行结果

在这里插入图片描述

自定义列表

常用网站如：
在这里插入图片描述
特点：上面有一个小标题；下面的围绕着下面的来做
比如：关于我们下面有：…

自定义列表的应用场景：

对属于或者专有名词进行解释
定义列表的列表前没有任何项目

在这里插入图片描述

示例代码

<!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><a href="https://www.qq.com/" target="_blank">关注我们</a></dt>
        <dd><a href="https://open.weibo.com/" target="_blank">新浪微博</a></dd>
        <dd><a href="https://weixin.qq.com/" target="_blank">官方微信</a></dd>
        <dd><a href="https://mail.163.com/" target="_blank">联系我们</a></dd>
        
        <!-- dl -->
        <!-- dt (主题) --> 
        <!-- dd (围绕主题)-->
        <!-- 一般情况下,一个 dt 几个 dd -->
    </dl>
</body>
</html>

运行结果

在这里插入图片描述

列表总结

在这里插入图片描述
无序列表：网页的选项中之间相互没有等级之分
有序列表：网页的选项之中有排名之分
自定义列表：一般在网页的下端使用，弄一些链接进去

CodeDoraemon

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
HTML 有序列表自定义列表

有序列表表示这是一个有序列表有序列表中的列表项# 代码示例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>有序列表</title></head&g
复制链接

扫一扫