HTML 有序列表 自定义列表

有序列表

在这里插入图片描述

  1. 表示这是一个有序列表
  2. 有序列表中的列表项 # 代码示例 
<!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>

运行结果

在这里插入图片描述

自定义列表

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

自定义列表的应用场景：

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

在这里插入图片描述在这里插入图片描述

示例代码

<!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>

运行结果

在这里插入图片描述

列表总结

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

posted @   YIMENG-0  阅读(190)  评论(0)  编辑  收藏  举报
相关博文：
· HTML 表单标签
· HTML 制作表格案例
· HTML-列表标签
· html - 列表
· HTML列表
阅读排行：
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！
点击右上角即可分享
微信分享提示