DL DT DD标签的详细描述及示例

最新推荐文章于 2024-12-20 11:00:53 发布

原创最新推荐文章于 2024-12-20 11:00:53 发布 · 730 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#list #float #css #div

本文介绍了HTML中DL标签的基本用法及如何利用DT和DD标签来构建清晰的定义列表，通过实例展示了如何通过CSS样式调整列表的显示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们平时常用的是< ul>< li>标签，不过dd、dt标签也蛮不错，特别是发布程序的时候功能模块列表什么的可以使用它来排版。

< dl>< /dl>< dt>< /dt>< dd>< /dd>
< dl>< /dl>用来创建一个普通的列表,< dt>< /dt>用来创建列表中的上层项目，< dd>< /dd>用来创建列表中最下层项目，< dt>< /dt>和< dd>< /dd>都必须放在< dl>< /dl>标志对之间。看一下下边的例子您就会明白了：

dl ——define list——定义列表
dt ——define list title——用于生成定义列表中各列表项的标题，重复使用可以定义多个列表项的标题。
dd——define list define——用于生成定义列表各列表项的说明文字段，重复使用可以定义多个说明文字段。dd是对应dt的简短说明或解

-----下面是一个关于此标签的示例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
*{ margin:0; padding:0;}
body{ font-size:12px; line-height:1.8; padding:10px;}
dl{clear:both; margin-bottom:5px;float:left;}
dt,dd{padding:2px 5px;float:left; border:1px solid #3366FF}
dt:hover{background:#848484;cursor:pointer;}
dd:hover{background:#848484;cursor:pointer;}
dd{ position:absolute; right:5px;}
h1{clear:both;font-size:14px;}
/*限制宽度的CSS样式*/
<!--
{ margin:0; padding:0;}
body{ font-size:12px; line-height:1.8; padding:10px;}
dl{clear:both; margin-bottom:5px;float:left;width:100%}
dt,dd{padding:2px 5px;float:left; border:1px solid #3366FF}
dd{ float:right}
h1{clear:both;font-size:14px;}
div{ width:500px; float:left;}
-->
</style>
</head>
<body>
<h1>test</h1>
<div>
  <dl>
    <dt><a href="#">·我是女生！博客里的文章是我自己写的！</a></dt>
    <dd>xxx</dd>
  </dl>
  <dl>
    <dt><a href="#">·我是女生！博客里的文章是我自己写的！</a></dt>
    <dd>xxx</dd>
  </dl>
  <dl>
    <dt><a href="#">·我是女生！博客里的文章是我自己写的！</a></dt>
    <dd>xxx</dd>
  </dl>
  <dl>
    <dt><a href="#">·我是女生！博客里的文章是我自己写的！</a></dt>
    <dd>xxx</dd>
  </dl>
  <dl>
    <dt><a href="#">·我是女生！博客里的文章是我自己写的！</a></dt>
    <dd>xxx</dd>
  </dl>
  <dl>
    <dt><a href="#">·我是女生！博客里的文章是我自己写的！</a></dt>
    <dd>xxx</dd>
  </dl>
  <dl>
    <dt><a href="#">·我是女生！博客里的文章是我自己写的！</a></dt>
    <dd>xxx</dd>
  </dl>
</div>
<h1>test</h1>
<div>
  <dl>
    <dt><a href="#">·我是女生！博客里的文章是我自己写的！</a></dt>
    <dd>xxx</dd>
  </dl>
  <dl>
    <dt><a href="#">·我是女生！博客里的文章是我自己写的！</a></dt>
    <dd>xxx</dd>
  </dl>
  <dl>
    <dt><a href="#">·我是女生！博客里的文章是我自己写的！</a></dt>
    <dd>xxx</dd>
  </dl>
  <dl>
    <dt><a href="#">·我是女生！博客里的文章是我自己写的！</a></dt>
    <dd>xxx</dd>
  </dl>
  <dl>
    <dt><a href="#">·我是女生！博客里的文章是我自己写的！</a></dt>
    <dd>xxx</dd>
  </dl>
  <dl>
    <dt><a href="#">·我是女生！博客里的文章是我自己写的！</a></dt>
    <dd>xxx</dd>
  </dl>
  <dl>
    <dt><a href="#">·我是女生！博客里的文章是我自己写的！</a></dt>
    <dd>xxx</dd>
  </dl>
</div>
</body>
</html>