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

dl dt dd的用法-页面制作

阅读更多
一般我们在做列表的时候通常只会用到ul和li标签,至于DL一般都很少用到,它也属于列表类的标签,下面说一下大概的用法:
<dl>标记定义了一个定义列表,定义列表中的条目是通过使用<dt>标记(“definition title”,定义标题)和<dd>标记(“definition description”,定义描述)创建的。<dt>给出了术语名,<dd>标记给出了术语的定义。
也就是说<dt>用来创建列表中的上层项目,<dd>用来创建列表中最下层项目,<dt>和<dd>都必须放在<dl>< /dl>标志对之间。
<dl>
<dt>我们在做列表标题</dt>
<dd>我们在做列表</dd>
<dd>我们在做列表</dd>
<dd>我们在做列表</dd>
<dd>我们在做列表</dd>
</dl>

DIV CSS网页布局中常用的列表元素ul ol li dl dt dd释义,块级元素div尽量少用,和table一样,嵌套越少越好

ol 有序列表。

<ol>
<li>……</li>
<li>……</li>
<li>……</li>
</ol>
  表现为:
1……
2……
3……
  ul 无序列表,表现为li前面是大圆点而不是123
<ul>
<li>……</li>
<li>……</li>
</ul>
  很多人容易忽略 dl dt dd的用法
    dl 内容块
  dt 内容块的标题
  dd 内容
   或者这么说
dl就是定义一个列表
dt说明白了就是这个列表的标题
dd就是内容,能缩进


  可以这么写:
<dl>
<dt>标题</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
  dt 和dd中可以再加入 ol ul li和p
  理解这些以后,在使用div布局的时候,会方便很多


dl:代表HTML自定义列表
dt:代表HTML自定义列表组
dd:HTML自定义列表描述

dt主要放label部分,dd主要放input或其他。

注意:和label布局一样,有IE的3px BUG。
HTML代码
http://www.cyhd.net/appdesign/2008/0520/article_1095.html
分享到:
评论

相关推荐

    DL-Dt-DD(做表格Css实现)

    传统的HTML表格元素如`&lt;table&gt;`, `&lt;tr&gt;`, `&lt;td&gt;`等可以方便地组织和显示结构化数据,但在某些场景下,为了追求更灵活的样式控制和更好的语义化,开发者可能会选择非传统的方法,比如使用`&lt;dl&gt;`, `&lt;dt&gt;`, `&lt;dd&gt;`元素...

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

    对于小型数据列表和表单,使用`&lt;dl&gt;`, `&lt;dt&gt;`, 和 `&lt;dd&gt;` 标签是一个更好的选择,因为它更符合语义化的原则,使得内容结构更加清晰。 然而,这并不意味着`&lt;table&gt;`标签已经过时。对于展示大量结构化数据,如财务...

    DL.DT.DD实现左右的布局简单例子第1/2页

    综上所述,使用`&lt;dl&gt;`、`&lt;dt&gt;`、`&lt;dd&gt;`来实现左右布局是一种非常实用的方法。它不仅解决了`&lt;ul&gt;`带来的问题,而且使得代码更加简洁、易读。此外,这种方式还可以轻松地扩展,适应不同的应用场景。

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

    本文将详细介绍`&lt;dl&gt;`、`&lt;dt&gt;`和`&lt;dd&gt;`标签的用法和应用场景。 `&lt;dl&gt;`标签: `&lt;dl&gt;`标记定义了一个定义列表,它的主要作用是展示一对对的名词和对其的解释。这种列表不同于普通的`&lt;ul&gt;`或`&lt;ol&gt;`,因为它不强调顺序...

    CSS 之dl dt dd模拟表格实例代码

    贴出dl dt dd模拟表格实例,不推荐在实际项目中使用,可以了解dl dt dd的用法。测试浏览器:IE6\IE7\IE8\FF3.0 CSS: 复制代码代码如下: dl,dt,dd{ margin:0; background:#fff5fa; font-size:14px; } dl{ margin:0 ...

    html 标签 dl dt dd使用说明

    在一对`&lt;dl&gt;`标签之间,你可以放置一个或多个由`&lt;dt&gt;`和`&lt;dd&gt;`标签组成的对,来定义不同的项目及其描述。 `&lt;dt&gt;` 标签: `&lt;dt&gt;` 代表 "definition term",用于定义一个名词或者概念。这些术语通常会以粗体或者特殊...

    dl,dt,dd在什么时候适合使用呢

    ### 使用dl、dt、dd元素的情境分析 在HTML中,`dl`、`dt`、`dd`是一组用于创建定义列表(Definition List)的标签。这些元素可以帮助开发者更清晰地组织信息,并且在语义上具有明确的意义。下面将详细介绍这三种...

    CSS教程:用dl dt dd来制作列表

    为了解决这些问题,他们选择了使用`&lt;dl&gt;`, `&lt;dt&gt;`, 和 `&lt;dd&gt;`元素,因为这种方法可以更好地进行布局,便于未来扩展,并且需要的CSS样式更少。 布局结构如下: ```html 标题 &lt;dl&gt; &lt;dt&gt;·博客里的文章是我自己写...

    html标记完全教程

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

    DD DT DL标签使用示例

    在这个CSS样式中,`&lt;dt&gt;`被设置为左侧浮动,`&lt;dd&gt;`则设置了宽度和与`&lt;dt&gt;`的对齐方式,整个`&lt;dl&gt;`列表的样式也被调整以适应特定的页面布局。 在实际应用中,比如在线商店的产品详情页,`&lt;dl&gt;`标签常用于展示商品...

    HTML 中的 dl(dt,dd)、ul(li)、ol(li) 使用方法

    复制代码代码如下:&lt;dl&gt; &lt;dt&gt;计算机&lt;/dt&gt; &lt;dd&gt;用来计算的仪器 … …&lt;/dd&gt; &lt;dt&gt;显示器&lt;/dt&gt; &lt;dd&gt;以视觉方式显示信息的装置 … …&lt;/dd&gt;&lt;/dl&gt; HTML &lt;ul&gt; 标签 #定义和用法 &lt;ul&gt; 标签定义无序列表。 #实例 无序 HTML 列表...

    dl,dt,dd制作的CSS垂直菜单

    dl,dt,dd制作的CSS垂直菜单 在Web开发中,菜单是非常常见的交互元素,通常我们使用ul和li标签来创建水平或垂直菜单。但是,今天我们要讨论的是使用dl,dt,dd标签来创建CSS垂直菜单的方法。 dl,dt,dd标签的作用: *...

    dl,dt,dd,ul,li,ol区别及应用

    ol有序列表:&lt;ol&gt;&lt;li&gt;……&lt;/li&gt;&lt;li&gt;……&lt;/li&gt;&lt;li&gt;……&lt;/li&gt;&lt;/ol&gt;表现为:1……2……3……ul无序列表,表现为li前面是大圆点而不是123:&lt;ul&gt;&lt;li&gt;……&lt;/li&gt;&lt;li&gt;……&lt;/li&gt;&lt;/ul&gt;很多人容易忽略dldtdd的用法:dl内容块dt内容...

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

    使用`&lt;dl&gt;`, `&lt;dt&gt;`, 和 `&lt;dd&gt;` 的好处在于增强了代码的可读性和可访问性,有利于屏幕阅读器和搜索引擎理解页面内容。同时,这样的结构更易于维护和适应不同设备的布局需求。 总结,通过将原本基于`&lt;table&gt;`的广告...

    dd标签.doc

    ### HTML `&lt;dd&gt;` 标签详解 #### 一、概述 `&lt;dd&gt;` 标签在HTML中主要用于定义描述性细节或定义项的解释部分,它通常与`&lt;dl&gt;` 和`&lt;dt&gt;` ...掌握`&lt;dd&gt;` 标签及其相关标签的使用方法,对于创建高质量的网页内容至关重要。

Global site tag (gtag.js) - Google Analytics