7.列表标签

ybi8bo007

已于 2023-06-30 16:24:31 修改

阅读量52

点赞数

分类专栏：前端基础——HTML 文章标签： html css html5

于 2023-05-21 15:06:44 首次发布

本文链接：https://blog.csdn.net/m0_74891783/article/details/130792056

版权

前端基础——HTML 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

什么是列表？
表格是用来显示数据的，那么列表就是用来布局的
列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便
根据使用情景不同，列表可以分为三大类:无序列表、有序列表和自定义列表

7.1无序列表（重点）

< ul>标签表示HTML页面中项目的无序列表, 一般会以项目符号呈现列表项,而列表项使用< li>标签定义。
无序列表的基本语法格式如下:

<ul>
        <li>列表项1</1i>
        <li>列表项2</1i>
        <li>列表项3</1i>
            ...
</ul>

注意：

1.无序列表的各个列表项之间没有顺序级别之分,是并列的。
2. < ul> < /ul>中只能嵌套< li>< /li> ,直接在< ul> < /ul>标签中输入其他标签或者文字的做法是不被允许的。
3. < li>与< /li>之间相当于一个容器,可以容纳所有元素。
4.无序列表会带有自己的样式属性，但在实际使用时，我们会使用CSS来设置
如：

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

在这里插入图片描述

7.2有序列表（理解）

有序列表即为有排列顺序的列表,其各个列表项会按照一定的顺序排列定义。
在HTML标签中，< ol> 标签用于定义有序列表,列表排序以数字来显示,并且使用< li>标签来定义列表项。
有序列表的基本语法格式如下:

<ol>
        <li>列表项1</1i>
        <li>列表项2</1i>
        <li>列表项3</1i>
            ...
</ol>

注意：

< ol> < /ol>中只能嵌套< li> < /li>, 直接在< ol> < /ol>标签中输入其他标签或者文字的做法是不被允许的。
< li>与< /li>之间相当于一个容器,可以容纳所有元素。
有序列表会带有自己样式属性,但在实际使用时,我们会使用CSS来设置。

如：

<!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>《奔跑吧》1000</li>
        <li>《王牌对王牌》 500</li>
        <li>《潮流合伙人》100</li>
    </ol>
</body>
</html>

可以看到有序列表标签自带序号1，2，3……
在这里插入图片描述

7.3自定义列表(重点)

自定义列表的使用场景:
自定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号。

在HTML标签中，< dl> 标签用于定义描述列表(或定义列表) , 该标签会与< dt> (定义项目/名字)和< dd> (描述每一个项目名字)一起使用。
其基本语法如下:

<dl>
        <dt>名词1</dt>
        <dd>名词1解释1</dd>
        <dd>名词1解释2</dd>
</d1>

注意：

< dl> < /dl>里面只能包含< dt>和< dd>
< dt>和< dd>个数没有限制,经常是一个< dt>对应多个< dd>
< dt>与< dd>是兄弟关系不是包含关系

如：

<!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>

        <dt>汽水</dt>
        <dd>可乐</dd>
        <dd>雪碧</dd>
        <dd>芬达</dd>
    </d1>
</body>
</html>

在这里插入图片描述

7.4列表总结

在这里插入图片描述

注意，什么时候用无序列表，什么时候用自定义列表：
（1）如果遇到这种布局：上面是一个小标题，下面有几个围绕它来说明的，我们就用自定义列表< dl>
（2）遇到几个标题之间排列地非常整齐，并且没有先后顺序之分，我们就可以用无序列表< ul>

ybi8bo007

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
7.列表标签

HTML—列表标签
复制链接

扫一扫

专栏目录

7.列表标签

7.1无序列表（重点）

7.2有序列表（理解）

7.3自定义列表(重点)

7.4列表总结

“相关推荐”对你有帮助么？