dl,dt,dd标记在网页制作中的应用

来源:互联网 发布:阿里云cdn加速怎么用 编辑:程序博客网 时间:2024/05/21 20:29

        我们在做列表的时候通常只会用到ul和li标签,至于dl,dt,dd一般都很少用到,这三个标签就是属于定义列表类的标签,先来分解一下这个列表的代码:

<dl><!–DefinitionList (定义列表)–>

 <dt></dt><!–DefinitionTerm (定义项)–>

 <dd></dd><!–DefinitionDescription (定义描述)–>

</dl>

        看上面这段代码我们发现这里并没有出现<li>标签,而是由DL、DT、DD三个标签组成,根据外型以及之前的列表我们可以知道,DL是这个列表的一个容器,就像个箱子,不同的是这次箱子里不只有统一标准的单个小盒子了。而是出现两个不同的内容我们怎么理解这个DT与DD呢?从语义上来讲,DT是名称,是标题,而DD是解释,是内容。DT与DD都是盒子,DD只对应解释他上面的一个DT,不能越级或是向下解释。

        我们在制作网页过程中用到列表时一般会使用<ul>或者<ol>标签,很少用刑<dl>标签,但是这个三个标签却有着不可忽视的作用,毕竟Web标准中要尽最大可能的使用已有的标签。它们的用途是:

< dl>< /dl>用来创建一个普通的列表,

< dt>< /dt>用来创建列表中的上层项目,

< dd>< /dd>用来创建列表中最下层项目,

< dt>< /dt>和<dd>< /dd>都必须放在< dl>< /dl>标志对之间。

        有如下代码

<html><head><title>一个普通列表</title></head><body text="blue"><dl><dt>中国城市</dt><dd>北京 </dd><dd>上海 </dd><dd>广州 </dd><dt>美国城市</dt><dd>华盛顿 </dd><dd>芝加哥 </dd><dd>纽约 </dd></dl></body></html>

        我们可以看到,<dt></dt>中间的文字即时我们没有进行缩进它也会怎地向前靠拢,而<dd></dd>中间的内容则自动向后缩进。这在腾讯新闻评论中已经使用到了