HTML学习——列表标签的使用

最新推荐文章于 2024-07-06 10:50:45 发布

qq_53979889

最新推荐文章于 2024-07-06 10:50:45 发布

阅读量741

点赞数 1

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/qq_53979889/article/details/121304504

版权

使用场景：网页中以行的方式整齐的展示数据：如数据列表、排行榜

标签名：无序标签
标签样式：<ul></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>
    <!-- 无序列表 -->
    <ul>
        <li>英雄联盟</li>
        <li>地下城与勇士</li>
        <li>穿越火线</li>
        <li>
            <p>
                绝地求生
            </p>
        </li>
    </ul>

</body>
</html>

生成样式：

说明：
里面只能包含<li></li>有顺序，使用相对较少。li里面可以包含任何标签

标签名：有序标签
标签样式：<ol></ol>
举例：

<!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>
    <!-- 有序列表 -->
    <ol>
        <li>英雄联盟</li>
        <li>地下城与勇士</li>
        <li>穿越火线</li>
        <li>绝地求生</li>
    </ol>

</body>
</html>

生成样式：

说明：
里面只能包含<li></li>有顺序，使用相对较少。li里面可以包含任何标签

标签名：有序标签
标签样式：<dl></dl>
举例：

<!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>英雄联盟</dd>
        <dd>绝地求生</dd>
        <dd>穿越火线</dd>
    </dl>

</body>
</html>

生成样式：

说明：

里面只能包含<dt></dt>和<dd></dd>，dt和dd里面可以包含任何标签（一般一个dt对应多个dd，dd一般是对dt的解释说明。）

qq_53979889

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML学习——列表标签的使用

使用场景：网页中以行的方式整齐的展示数据：如数据列表、排行榜标签名：无序标签标签样式：<ul></ul>举例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport...
复制链接

扫一扫