`

html中dl、dt、dd标签的定义及用法

    博客分类：
  • Html
HTMLJavaScriptCSS 
阅读更多

<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;;}
dt { cursor:pointer;;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>

另一个例子：

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd“>

<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<meta http-equiv=”Content-Language” content=”zh-cn” />
</head>

<body>

<h4>A Definition List:</h4>
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

</body>
</html>

<!-- .entry-content -->
分享到：
| EXT中Store加载流程
评论
发表评论

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

相关推荐

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

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

    html 标签 dl dt dd使用说明

    HTML中的`&lt;dl&gt;`, `&lt;dt&gt;`, 和 `&lt;dd&gt;` 标签是用于创建定义列表的，这种列表通常用于呈现术语、定义、属性等信息。它们在网页设计中扮演着重要角色，尤其在呈现带有标题和详细描述的数据时。下面我们将深入探讨这三个...

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

    Dt-DD(做表格Css实现).html`、`DL-Dt-Dd(替代 UL OL 方法).html`和`简单示例.html`这些文件，我们可以看到如何实际操作这些概念，观察不同的实现方法和样式调整，以了解如何在实际项目中应用DL-DT-DD实现表格。...

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

    &lt;dl&gt; 标签用于结合 &lt;dt&gt; （定义列表中的项目）和 &lt;dd&gt; （描述列表中的项目）。 #实例 复制代码代码如下:&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 DT DL标签使用示例

    总之，`&lt;dl&gt;`、`&lt;dt&gt;`和`&lt;dd&gt;`是HTML中用于创建定义列表的标签，它们提供了将术语与定义分组的逻辑结构，尤其适用于呈现信息密集型的数据或概念解释。通过合理的CSS样式，这些标签可以适应各种网页设计风格，提高...

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

    在HTML中，`dl`、`dt`、`dd`是一组用于创建定义列表（Definition List）的标签。这些元素可以帮助开发者更清晰地组织信息，并且在语义上具有明确的意义。下面将详细介绍这三种标签的用法及其适用场景。 #### 一、`...

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

    HTML中的`&lt;dl&gt;`, `&lt;dt&gt;`, 和 `&lt;dd&gt;` 标签是用于创建自定义列表的元素，这种列表主要用于定义术语和描述，而不仅仅是显示数据。与传统的`&lt;table&gt;`标签相比，它们在某些场景下可以提供更语义化的解决方案，尤其是在...

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

    本文将通过一个具体的案例来探讨如何使用HTML中的`&lt;dl&gt;`（定义列表）、`&lt;dt&gt;`（定义项）和`&lt;dd&gt;`（定义描述）标签来构建左右布局，并结合CSS进行样式调整。 #### 二、DL、DT、DD基础知识 在深入探讨之前，我们先...

    dd标签.doc

    `&lt;dd&gt;` 标签在HTML中主要用于定义描述性细节或定义项的解释部分，它通常与`&lt;dl&gt;` 和`&lt;dt&gt;` 标签一起使用来创建定义列表。在定义列表中，`&lt;dl&gt;` 标签用于包裹整个列表，`&lt;dt&gt;` 标签定义了术语或项目名称，而`&lt;dd&gt;` ...

    html标签大全标签用法详解

    `&lt;dl&gt;`, `&lt;dt&gt;`, `&lt;dd&gt;`用于定义术语和描述列表。 表格布局与响应式设计：虽然传统上HTML使用表格进行布局，但现代Web开发更倾向于使用CSS。然而，`&lt;table&gt;`在呈现数据时仍有其价值。对于响应式设计，可以利用`...

    第22章 重新定义的dl元素

    在第22章“重新定义的dl元素”中，我们将深入探讨这一元素在现代Web开发中的新用法和改进。 `&lt;dl&gt;`元素的基本结构包含`&lt;dt&gt;`（定义项）和`&lt;dd&gt;`（定义描述）子元素。`&lt;dt&gt;`用于定义一个术语或概念，而`&lt;dd&gt;`则提供...

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

    但是，今天我们要讨论的是使用dl,dt,dd标签来创建CSS垂直菜单的方法。 dl,dt,dd标签的作用： * dl标签定义了一个定义列表，其中包含 dt 和 dd 元素。 * dt标签定义了列表中的项，通常用于描述列表项的名称。 * dd...

    XHTML下用dl,dt,dd标签实现翻页的效果代码

    在XHTML中，`&lt;dl&gt;`, `&lt;dt&gt;`, 和 `&lt;dd&gt;` 标签是用来创建定义列表（Definition List）的，这种列表常用于呈现术语及其解释。然而，这些标签也可以被创造性地运用到其他场景中，例如在本例中，它们被用来实现翻页效果。...

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

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

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

    尽管使用`&lt;dl&gt;`、`&lt;dt&gt;`和`&lt;dd&gt;`来模拟表格样式有其独特之处，但文章作者明确指出，这种方法不推荐在实际项目中使用。原因在于，尽管在视觉效果上可以达到模拟表格的目的，但它缺乏表格本身的语义意义和对辅助技术的...

    html标签及用法

    &lt;dl&gt;、&lt;dt&gt;和&lt;dd&gt;用于定义术语和描述列表。 五、段落和引用 是通用容器，常用于分组其他元素；用于在行内元素中进行样式控制或分组；用于引用大段文字；用于短引号。 六、图像和媒体 标签插入图像，src属性指向...

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