第二章网站开发基础之HTML教程 - 二、常用HTML标签：dl，有标题和内容项的列表项目（块级元素）

最新推荐文章于 2023-02-28 15:19:07 发布

陈子2005

最新推荐文章于 2023-02-28 15:19:07 发布

阅读量275

点赞数 1

分类专栏：陈子-零基础网站开发教程文章标签： html css web html5 前端

本文链接：https://blog.csdn.net/klyz505/article/details/105381004

版权

陈子-零基础网站开发教程专栏收录该内容

48 篇文章 2 订阅

订阅专栏

3.dl，有标题和内容项的列表项目（块级元素）

dl标签用于显示有标题和内容项的列表项目，dl标签内嵌dt和dd标签，dt标签表述标题，dd标签表述内容。dl、dt、dd是在一起使用的，各自并不分开使用。
dl、dt、dd标签自带缩进渲染效果，但使用时通常都会用CSS重新定义新的样式以符合网页整体美观需要。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>dl标签</title>
</head>
<body>
例1（未定义新样式）：
<dl>
<dt>无题•李商隐</dt>
<dd>相见时难别亦难，东风无力百花残。</dd>
<dd>春蚕到死丝方尽，蜡炬成灰泪始干。</dd>
</dl>

例2（定义新样式）：
<style type="text/css">
.newdl{display:block;padding:0;margin:0;}
.newdl dt,.newdl dd{display:block;padding:0;margin:0;text-align:center;}
</style>
<dl class="newdl">
<dt>无题•李商隐</dt>
<dd>相见时难别亦难，东风无力百花残。</dd>
<dd>春蚕到死丝方尽，蜡炬成灰泪始干。</dd>
</dl>
</body>
</html>

效果如下：