大龙的博客

常用链接

统计

最新评论

HTML中DL、DT、DD标记的使用

<dl>标记定义了一个定义列表,定义列表中的条目是通过使用<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> 

posted on 2011-07-03 16:19 大龙 阅读(227) 评论(0)  编辑 收藏 引用


只有注册用户登录后才能发表评论。
网站导航: 博客园   IT新闻   BlogJava   知识库   博问   管理