您的位置:首页> 前端教程> HTML教程
文章导航

dl,dt,dd 描述列表

2018-12-21 17:53| 作者: admin| 查看: 1457| 评论: 0|来自: 蚂蚁部落

使用<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.softwhy.com/" /> 
<title>蚂蚁部落</title>  
</head>  
<body>  
<dl>
  <dt>蚂蚁教程</dt>
  <dd>HTML教程</dd>
  <dd>CSS教程</dd>
  <dd>JavaScript教程</dd>
</dl>
</body>  
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201812/21/175442ibvjkejls0xpiplq.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

这种格式美观度实在是不尽如人意,通常会使用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.softwhy.com/" /> 
<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>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201812/21/175621ctcbdfllzl9ly281.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部