HTML中DL、DT、DD标记的使用http://www.128kj.com/article/article11/3829155921838ADD02B3D2855361D377.htm?id=2213

转载 2007年09月26日 14:02:00
记定义了一个定义列表,定义列表中的条目是通过使用<dt>标记(“definition title”,定义标题)和<dd>标记(“definition description”,定义描述)创建的。<dt>给出了术语名,<dd>标记给出了术语的定义。

        一个定义列表中可以有多个术语名对应同一个给出的定义,也可有多重定义对应于一个术语名。同时也可以只给出术语名称而不对应定义,反之亦然。当然,这种结构往往并无实际意义,我们可以通过样式表,很轻松的实现这3个标记所达到的效果。

下面是一个例子:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<style type="text/css">
<!--
dl   { background-color:#000;color:#fff;width:100px;}
dt   { cursor:pointer;width:100%;background-color:#666;}
.expand  { overflow:visible;}
.collapse  { height:16px;overflow:hidden;}
//-->
</style>
<script language="JavaScript" type="text/javascript">
<!--
function toggleDl(dt){
 var dl=dt.parentNode;
 if("collapse"==dl.className)dl.className="expand";
 else dl.className="collapse";
}
//-->
</script>
</head>
<body>
<dl>
 <dt onclick="toggleDl(this)">根结点</dt>
 <dd>子结点1</dd>
 <dd>子结点2</dd>
 <dd>子结点3</dd>
 <dd>子结点4</dd>
</dl>
</body>
</html>

 

HTML的dl、dt、dd标记制作表格对决Table制作表

不但让网站降低了开发和维护的成本,而且代码也更语义化了。但是,并不是说table从此消失了,它仍然被很多人用来作为网页中数据表现的必需品,比如个人信息数据列表等。事实上,使用HTML的dl、dt、dd...
  • judyge
  • judyge
  • 2016年07月17日 18:09
  • 647

HTML之dl、dt、dd(也许这是你还没用过的标签,但它们非常实用)

一、dl dt dd认识 html 是一组合标签,使用了dt dd最外层就必须使用dl包裹,此组合标签我们也又叫表格标签,与table表格类似组合标签,故名我们也叫dl表格(扩展阅读:tab...
  • u014326381
  • u014326381
  • 2015年08月27日 15:12
  • 1774

dl dt dd的嵌套使用

dl dt dd的嵌套使用 dd元素中可以包含block元素,而dt中只能包含inline元素, 在dd中可以包含dl元素 效果是这样的,主要的是效果是在dd中加了一个表格,如果使用表格来实...
  • sunbingzibo
  • sunbingzibo
  • 2016年01月24日 22:22
  • 2192

DL,DT,DD,比传统table更语义,解析更快的table列表方式

使用dl,dt,dd替代传统的table布局 -dl dt dd表格 dl,dt,dd{ margin:0; background:#fff5fa; font-siz...
  • yaerfeng
  • yaerfeng
  • 2013年08月24日 09:52
  • 4090

html:自定义列表(dl>dt+dd)的使用

以前用的都有用无序列表ul>li比较多,看了授课老师的写的代码才又重新认识了自定义列表,例如以下布局用自定义列表标签就相当方便: 只需要定义四个dl标签,在dt标签内添加分别...
  • mumu42
  • mumu42
  • 2017年07月28日 19:34
  • 537

DL DD DT 下拉列表(jquery)-代码很简洁

自己写的DL DD DT 下拉列表(jquery)-代码很简洁
  • qq_17255515
  • qq_17255515
  • 2015年08月13日 18:04
  • 1696

html中dl、dt、dd标记的使用实现菜单显示|隐藏

标记定义了一个定义列表,定义列表中的条目是通过使用标记(“definition title”,定义标题)和标记(“definition description”,定义描述)创建的。给出了术语名,标记给...
  • fyqcdbdx
  • fyqcdbdx
  • 2011年11月09日 14:33
  • 4832

一个用 dl dt dd 做的表格

看到最近大家流行用dl dt dd布局,我也能照着做了一个,反照表格做的,效果如图: 代码贴出来给大家看看                 dl,div{width...
  • jiahong1219
  • jiahong1219
  • 2012年02月22日 11:12
  • 1200

DivCSS布局实例 用dl dt dd来制作列表

CSS网页布局的一大特点就是列表元素的应用,在传统的表格布局中往往将列表元素作为表格来处理,这样的方式非但不具有语义还产生了许多不必要的代码。   今天我们共同学习一款“图文混排CSS列表”的制...
  • lllljz
  • lllljz
  • 2012年06月16日 22:29
  • 1621

前端之dl dt dd vs tr td th

dl dt dd认识及dl dt dd使用方法  标签用于定义列表类型标签。 dl dt dd目录 dl dt dd介绍 结构语法 dl dt dd案例 dl dt d...
  • basycia
  • basycia
  • 2016年01月07日 21:35
  • 1273
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML中DL、DT、DD标记的使用http://www.128kj.com/article/article11/3829155921838ADD02B3D2855361D377.htm?id=2213
举报原因:
原因补充:

(最多只允许输入30个字)