1.前端基础之列表标签

叶不休

已于 2023-12-10 21:04:53 修改

阅读量109

点赞数

分类专栏：前端文章标签：前端 html css

于 2022-12-15 17:47:04 首次发布

本文链接：https://blog.csdn.net/weixin_58694594/article/details/128331483

版权

前端专栏收录该内容

45 篇文章 0 订阅

订阅专栏

列表标签分为三大类

无序列表，有序列表和自定义列表

无序列表（重点）

ul是爹，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>无序列表</title>
</head>
<body>
    <h4>我喜欢的食物</h4>
    <ul>
        <li>苹果</li>
        <li>西瓜</li>
        <li>
            <p>菠萝</p>
        </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>
    <h4>排行榜</h4>
    <ol>
        <li>刘德华   10000</li>
        <li>周杰伦   444444</li>
        <li>周星驰   88888</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=
    , initial-scale=1.0">
    <title>自定义列表</title>
</head>
<body>
    <dl>
        <dt>关注我们</dt>
        <dd>微博</dd>
        <dd>微信</dd>
        <dd>QQ</dd>
    </dl>
</body>
</html>