18-定义列表

最新推荐文章于 2022-10-29 12:11:51 发布

majiamin123

最新推荐文章于 2022-10-29 12:11:51 发布

阅读量350

点赞数

分类专栏： Html基础文章标签： html定义列表

本文链接：https://blog.csdn.net/majiamin123/article/details/100812783

版权

Html基础专栏收录该内容

23 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>18-定义列表</title>
</head>
<body>

<dl>
    <dt>北京</dt>
    <dd>中国的首都</dd>
    <dd>雾霾比较严重</dd>
    <dt>上海</dt>
    <dd>富人的集中地</dd>
</dl>

</body>
</html>

运行结果截图：
在这里插入图片描述

1、定义列表的作用：
1.1给一堆数据添加列表语义
1.2先通过dt标签定义列表中的所有标题，然后再通过dd标签给每个标题添加描述信息

2、定义列表的格式：

<dl>
    <dt></dt>
    <dd></dd>
    <dt></dt>
    <dd></dd>
</dl>

其实dt和dd都是英文的缩写
dt是英文definition title的缩写，所以dt的含义就是用来定义列表中的标题
dd是英文definition description的缩写，所以dd的含义就是用来定义标题对应的描述的

3、定义列表的应用场景
3.1做网站尾部的相关信息
3.2做图文混排

4、定义列表的注意点
4.1和ul/ol一样，dl和dt/dd是一个整体，所以他们一般情况下不会单独出现，都是一起出现
4.2和ul/ol一样，由于dl和dt/dd是一个组合标签，所以dl中建议只放dt和dd标签
4.3一个dt可以没有对应的dd，也可以有多个对应的dd,但是无论有或没有dd都不推荐使用。
推荐使用一个dt对应一个dd
4.4和li标签一样，当需要丰富界面时，我们可以在dt和dd标签中继续添加其他标签