从零开始学前端（HTML篇）：7、列表元素

最新推荐文章于 2024-05-10 15:47:34 发布

不文艺的青年

最新推荐文章于 2024-05-10 15:47:34 发布

阅读量215

点赞数

文章标签：前端 html

本文链接：https://blog.csdn.net/WuYanZu6243/article/details/126892006

版权

列表元素

有序列表

ol元素：

type属性：序号用什么表示：“1”、“i”、“A”、”a“
reversed属性：将序号倒置

<!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>
    把大象装冰箱需要几步？
    <!-- 有序列表一般很少用 -->
    <!-- 一般情况下，不会使用type属性 -->
    <!-- reversed 把序号倒置 -->
    <ol type="a" reversed>
        <li>打开冰箱</li>
        <li>大象进去</li>
        <li>关闭冰箱</li>
    </ol>
</body>
</html>

无序列表

把ol改成ul
无序列表常用于例如制作菜单、新闻列表之类的之类的

<!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>
    XXX美女择偶条件：
    <ul>
        <li>有责任心</li>
        <li>会家务</li>
        <li>孝敬老人</li>
        <li>年薪30万</li>
    </ul>
</body>
</html>

定义列表

通常用于一些术语的定义

dl元素：与ol、ul用法一样

dt元素：标题，好比其它两种列表的序号
dd元素：解释标题，好比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>
    太阳系中的行星介绍：
    <dl>
        <dt>木星</dt>
        <dd>木星（Jupiter）是距离太阳第五近的行星，也是太阳系中体积最大的行星，截至2019年已知有79颗卫星。</dd>
        <dt>地球</dt>
        <dd>地球（Earth）是太阳系由内及外的第三颗行星，也是太阳系中直径、质量和密度最大的类地行星，距离太阳约1.496亿千米（1天文单位）。</dd>
    </dl>
</body>
</html>