七. 列表标签

最新推荐文章于 2024-05-03 22:15:47 发布

OlalalalalaO

最新推荐文章于 2024-05-03 22:15:47 发布

阅读量140

点赞数

分类专栏： # HTML

本文链接：https://blog.csdn.net/qq_38914344/article/details/115144235

版权

HTML 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

无序列表

ur ->unordered list
li ->list
没有顺序，文字前只有符号，ul内只可以放li，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>
    <h4>你喜欢的食物?</h4>
    <ul>
        <li>榴莲</li>
        <li>臭豆腐</li>
        <li>鲱鱼罐头</li>
    </ul>
    <h4>粉丝排行</h4>
</body> 
</html>

效果如下：
在这里插入图片描述

有序列表

ol -> order list
有顺序，文字前只有序号，ol内只可以放li，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>
    <h4>粉丝排行</h4>
    <Ol>
        <li>刘德华</li>
        <li>刘若英</li>
        <li>林俊杰</li>
    </Ol>
</body> 
</html>

效果如下：
在这里插入图片描述

自定义列表

dl -> definition List
dt -> definition term 定义术语
dd ->definition description 定义表述
常用于描述第一行

例

<!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>
    </dl>
</body>
</html>