【前端学习笔记 HTML】列表标签

最新推荐文章于 2024-11-10 14:10:27 发布

World_2

最新推荐文章于 2024-11-10 14:10:27 发布

阅读量134

点赞数

文章标签：学习 html

本文链接：https://blog.csdn.net/weixin_44243770/article/details/127705710

版权

学习的是黑马前端课程

无序列表

<!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>无序列表</title>
</head>
<body>
    <h1>水果列表</h1>

    <ul>
        <li>苹果</li>
        <li>橘子</li>
        <li>香蕉</li>
        <li>梨</li>
    </ul>
</body>
</html>

在这里插入图片描述

有序列表

<!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>有序列表</title>
</head>
<body>
    <h1>成绩排行榜</h1>
    
    <ol>
        <li>韩梅梅100</li>
        <li>李明99</li>
        <li>张三80</li>
    </ol>
</body>
</html>

在这里插入图片描述

自定义列表

一般用于网页最底部
在这里插入图片描述


<!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>自定义列表</title>
</head>
<body>
    <dl>
        <dt>购物指南</dt>
        <dd>购物流程</dd>
        <dd>会员介绍</dd>
        <dd>常见问题</dd>
        <dd>联系客服</dd>

        <dt>售后服务</dt>
        <dd>售后政策</dd>
        <dd>价格保护</dd>
    </dl>
</body>
</html>