dl,dt,dd 描述列表

小灰灰 2020-05-15 18:57 921阅读 0赞

# dl,dt,dd 描述列表

使用`<dl>`、`<dt>`和`<dd>`三个标签可以定义描述列表。

首先从标签的名称入手理解它们的作用：

（1）.dl：英文全称是definition list，定义列表。

（2）.dt：英文全称是definition title，定义标题。

（3）.dd：英文全称是definition description，定义描述，也就是定义列表具体内容。

语法结构：

```html
<dl>
  <dt>列表标题</dt>
  <dd>列表项</dd>
  <dd>列表项</dd>
</dl>
```

结构分析如下：

（1）.`<dl>`标签用来定义一个描述列表，处于最外层。

（2）.`<dt>`与`<dd>`为同级元素，`<dt>`定义标题，`<dd>`定义列表项的具体内容。

（3）.`<dt>`与`<dd>`不能相互嵌套。

（4）.`<dt>`并不一定位于`<dl>`子元素的第一位，根据需要可以调整位置。

**代码实例如下：**

```html
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.dandelioncloud.cn/" /> 
<title>蒲公英云</title>  
</head>  
<body>  
<dl>
  <dt>蒲公英云教程</dt>
  <dd>HTML教程</dd>
  <dd>CSS教程</dd>
  <dd>JavaScript教程</dd>
</dl>
</body>  
</html>
```

上述代码定义了一个简单的列表，默认带有一定的缩进格式。

这种格式美观度实在是不尽如人意，通常会使用CSS进行修饰美化。

也可以看到`<dt>`是用来对具体项目的一个总结描述，`<dd>`定义具体项目内容。

而`<dl>`则是告诉浏览器这一块区域是一个描述列表。

```html
<dl>
  <dd><img src="log.png"/></dd>
  <dt>蒲公英云logo</dt>
</dl>
```

可以看到，`<dt>`并不一定非要位于`<dd>`的上面，`<dt>`与`<dd>`是同级元素，应用非常的灵活。

**与ul li和ol li的区别：**

ul li与ol li也可以定义列表，那么在何种场景选择使用描述列表呢。

从类表的结构就可以得出它最适合的应用场景。

无序列表与有序列表唯一区别是，默认列表前面是否具有可以表明顺序的标识。

实际项目中，可以认为它们完全一样，自带顺序标识几乎完全没用，美观度不够，且难以控制。

适用原则：

（1）.如果列表仅是罗列性质相同的项，则推荐使用无序列表与有序列列表。

（2）.如果列表有标题需求的或者总结性质需求，则推荐使用描述列表。

```html
<ul>
  <li>张三<li>
  <li>李四</li>
  <li>王五</li>
  <li>李六</li>
</ul>
```

上面是对于人的姓名的简单罗列，内容性质一致，无序列表与有序列表适用。

再来看如下代码：

```html
<ul>
  <li class="title">姓名<li>
  <li>张三<li>
  <li>李四</li>
  <li>王五</li>
  <li>李六</li>
</ul>
```

上述代码虽然也能够满足需求，不是最佳选择器。

因为第一项是对后面项的一个描述，可以使用描述列表替代：

```html
<dl>
  <dt>姓名<li>
  <dd>张三</dd>
  <dd>李四</dd>
  <dd>王五</dd>
  <dd>李六</dd>
</dl>
```

利用描述进行上述布局会更加合理。

实际应用中，基本不会使用列表自带的样式，因为实在过于丑陋，难登大雅之堂。

需要使用CSS来进行美化，以满足客户和浏览者的需要。

下面是一段利用CSS美化的描述列表代码实例：

```html
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.dandelioncloud.cn/" /> 
<title>蒲公英云</title> 
<style type="text/css">
body{
  font-size:12px;
}
dl.news{
  margin:0;
  padding:0 0 8px 0;
  color:#10478c;
  border:solid 1px #999;
}
dl.news dt{
  margin:0;
  padding:0 0.5em;
  font-weight:bold;
  position:relative;
  height:26px;
  line-height:26px;
  border-bottom:solid 1px #999;
  background:#f7f7f7;
}
dl.news dd{
  margin:0 5px;
  padding:2px 70px 0 20px;
  position:relative;
  border-bottom: dashed 1px #ddd;
}
dl.news span{
  position:absolute;
  width:70px;
  text-align:right;
  top:0;
  right:0;
}
dl.news dt span{
  font-weight:normal;
  padding:0 4px 0 0;
  color:#666;
}
dl.news dd span{
  color:#ccc;
}
a:link,a:visited{
  color:#1e50a2;
  text-decoration: none;
}
a:hover{
  color:#ba2636;
  text-decoration:underline;
}
</style>
</head>
<body>
<div style="width:300px;">
  <dl class="news">
    <dt>本站新闻<span><a href="#">更多信息</a></span></dt>
    <dd>
      <a href="#">蒲公英云分享专业前端知识</a>
      <span>2018-12</span>
    </dd>
    <dd>
      <a href="#">蒲公英云分享专业前端知识</a>
      <span>2018-12</span>
    </dd>
    <dd>
      <a href="#">蒲公英云分享专业前端知识</a>
      <span>2018-12</span>
    </dd>
    <dd>
      <a href="#">蒲公英云分享专业前端知识</a>
      <span>2018-12</span>
    </dd>
    <dd>
      <a href="#">蒲公英云分享专业前端知识</a>
      <span>2018-12</span>
    </dd>
    <dd>
      <a href="#">蒲公英云分享专业前端知识</a>
      <span>2018-12</span>
    </dd>
  </dl>
</div>
</body>
</html>
```

通过描述列表创建了一个新闻列表形式的结构，然后通过CSS代码将其进行了美化。