`
369540808
  • 浏览: 197892 次
文章分类
社区版块
存档分类
最新评论

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

 
阅读更多

我们在做列表的时候通常只会用到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>中间的内容则自动向后缩进。这在腾讯新闻评论中已经使用到了


分享到：
| 二叉树遍历
评论
发表评论

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

相关推荐

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

    但是，并不是说table从此消失了，它仍然被很多人用来作为网页中数据表现的必需品，比如个人信息数据列表等。事实上，使用HTML的dl、dt、dd标签会让你节省更多的代码，更能让代码符合内容的语义化。当然，table也有它...

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

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

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

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

    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、含有教程笔记，大纲，源码，...

    CSS教程:复合型条状图表

    dl标记定义了一个定义列表，定义列表中的条目是通过使用dt标记(定义标题)和dd标记(定义描述)创建的。dt给出了术语名，dd标记给出了术语的定义信息。 也就是说dt用来创建列表中的上层项目，dd用来创建列表中最下层...

    html入门到放弃笔记

    1、编写一对 body 标记，在body标记中，嵌套一对 div标记，在 div 标记中 ，嵌套一对 a 标记，在 a标记中，嵌套一对 b 标记，b标记中，随意编写一些文本 &lt;body&gt; 这是一段测试文本 &lt;/body&gt; ...

    HTML S1 知识点总结

    市场的需求 跨平台 网页编辑工具：记事本、Dreamweaver、WebStorm 网页基本信息： &lt;!...&lt;...我的第一个网页&lt;...我的第一个网页 ...---------------------...没有顺序，每个&lt;dt&gt;标签、&lt;dd&gt;标签独占一行（块元素） 默认没有标记

    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