博学谷 - html笔记05 - 列表标签

最新推荐文章于 2022-03-22 00:32:43 发布

hecr_mingong

最新推荐文章于 2022-03-22 00:32:43 发布

阅读量314

点赞数

分类专栏： HTML 文章标签： html

本文链接：https://blog.csdn.net/hecr_mingong/article/details/107008228

版权

HTML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.特点
整齐、整洁、有序，它作为布局会更加自由和方便

2.无序列表
特点：

各个列表项之间没有顺序级别之分，是并列关系
<ul></ul>中只能嵌套<li></li>
<li></li>之间可以放所有元素

demo：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>无序列表</title>
</head>
<body>
    <ul>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ul>
</body>
</html>

效果：
在这里插入图片描述
3.有序列表
特点：

各个列表项之间有先后顺序
<ol></ol>中只能嵌套<li></li>
<li></li>中可以放所有元素

demo：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>有序列表</title>
</head>
<body>
    <ol>
        <li>列表一
            <ul>
                <li>无序列表</li>
                <li>无序列表</li>
            </ul>
        </li>
        <li>列表二</li>
        <li>列表三</li>
    </ol>  
</body>
</html>

效果：
在这里插入图片描述
4.自定义列表
使用场景：
用于对术语或者名称进行解释描述

特点：

<dl></dl>中只能包含<dt></dt>和<dd></dd>标签，不限数量
<dt></dt>和<dd></dd>中可以有其他标签

demo：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义列表</title>
</head>
<body>
    <dl>
        <dt>搜索</dt>
        <dd>百度</dd>
        <dd>搜狗</dd>
    </dl>
</body>
</html>

效果：
在这里插入图片描述
5.文章参考链接
a. https://www.boxuegu.com/
b. http://www.divcss5.com/html/h88.shtml

hecr_mingong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
博学谷 - html笔记05 - 列表标签

1.特点整齐、整洁、有序，它作为布局会更加自由和方便2.无序列表特点：各个列表项之间没有顺序级别之分，是并列关系<ul></ul>中只能嵌套<li></li><li></li>之间可以放所有元素demo：<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta n
复制链接

扫一扫

专栏目录