`
liudaoru
  • 浏览: 1559959 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

    博客分类：
  • Ajax
HTML 
阅读更多
<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>
分享到：
| Android Develop Challenge
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    HTML 列表中的dl,dt,dd,ul,li,ol区别及应用.doc

    HTML 列表中的dl,dt,dd,ul,li,ol区别及应用 方法/步骤 1无序列表 无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。 无序列表始于 &lt;ul&gt; 标签。每个列表项始于 。

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

    事实上，使用HTML的dl、dt、dd标签会让你节省更多的代码，更能让代码符合内容的语义化。当然，table也有它的用武之地，那就是很大数据量的数据表，但是小型的数据列表和表单完全可以不使用table哦！ 如果你仍然在...

    dl,dt,dd标记在网页中要充分利用

    我们在制作网页过程中用到列表时一般会使用或者标签，很少用刑&lt;dl&gt;标签，但是这个三个标签却有着不可忽视的作用，毕竟Web标准中要尽最大可能的使用已有的标签。它们的用途是： &lt; dl&gt;&lt; /dl&gt;用来创建一个普通的列表...

    网页制作小技巧 dl dt dd标签用法

    &lt;dl&gt;标记定义了一个定义列表，定义列表中的条目是通过使用&lt;dt&gt;标记(“definition title”，定义标题)和&lt;dd&gt;标记(“definition description”，定义描述)创建的。&lt;dt&gt;给出了术语名，&lt;dd&gt;标记给出了术语的定义。 也...

    html标记完全教程

    网页制作小技巧：dl dt dd标签用法----2008年9月15日 头部属性全接触----2008年9月15日 两个表格[Table]可以左右排放吗----2008年9月15日 marquee基本语法的全解释----2008年9月14日 HTML4.0不常用标签特性示例-...

    dl、dt、dd 标记来改造163邮箱的广告条

    打开网易邮箱的登录界面，我们会发现，在首页的底部有这样一个“最新动态”的广告条，其设计代码如下：HTML代码&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

    1.html的语法+基本结构+文档标记，对网页制作感兴趣的很有帮助，浅显易懂，只需要TXT可操作，本人已学，有笔记，大纲，源码

    3、文档设置标记上-格式标（ &lt;p&gt;&lt;center&gt;&lt;pre&gt;&lt;li&gt;&lt;ul&gt;&lt;ol&gt;&lt;dl&gt;&lt;dt&gt;&lt;dd&gt;&lt;hr&gt;&lt;div&gt;） 4、文档设置标记下-文本标记(&lt;hn&gt;&lt;font&gt;&lt;b&gt;&lt;i&gt;&lt;sub&gt;&lt;sup&gt;&lt;tt&gt;&lt;cite&gt;&lt;em&gt;&lt;strong&gt;&lt;small&gt;&lt;big&gt;) 5、含有教程笔记，大纲，源码，...

    HTML S1 知识点总结

    北大青鸟s1 HTML 知识点总结 HTML5的优势 世界知名浏览器厂商对HTML5的支持:微软 、Google、苹果、Opera、Mozilla 市场的需求 ...没有顺序，每个&lt;dt&gt;标签、&lt;dd&gt;标签独占一行（块元素） 默认没有标记

    CSS教程:复合型条状图表

    本例中使用的定义列表标签dl可能平常我们见得不多，一般我们在做列表的时候通常只会用到ul和li标签,至于dl一般都很少用到，它也属于列表类的标签，下面说一下大概的用法： dl标记定义了一个定义列表，定义列表中的...

    html入门到放弃笔记

    HTML中用于描述功能的符号称为"标记" 标记在使用时，用尖括号 "&lt;&gt;",标记的分类 1、封闭类型的标记 也称为 "双标记" , 必须成对出现 语法：&lt;标记&gt;内容标记&gt; Demo ： 1、创建 p 标记 --&lt;p&gt;...&lt;/p&gt; 2、创建 ...

    accordion:纯JS手风琴。 演示版

    使用以下标记，您必须创建一个手风琴（JS / CSS）才能一次仅显示部分的内容。 在使用CSS时，请务必遵循SUIT约定。 &lt; dl&gt; &lt; dt&gt; Section 1 &lt;/ dt&gt; &lt; dd&gt; &lt; p&gt; Section 1 Content... &lt;/ dd&gt; &lt; dt&gt; Section 2 ...

    css入门笔记

    ex:div,h1-h6,p,ul,li,ol,dl,dt,dd 2.行内元素允许修改尺寸 表单控件元素 3.本身具备width和height属性的元素 ex:img,table 注意：大部分行内元素不能修改 span,a,i,u,b,s 3.溢出处理 当内容多，元素区域小...

Magicbox
Global site tag (gtag.js) - Google Analytics