一、dl dt dd认识

html <dl> <dt> <dd>是一组合标签，dl在最外层，包裹dt dd，此组合标签我们也又叫表格标签，与table表格类似组合标签，故名我们也叫dl表格。

<dl><dt></dt><dd></dd></dl>为常用 标题 + 列表型 标签。如没有对dl dt dd标签初始CSS样式，默认dd列表内容会一定缩进。

 

二、dl dt dd列表标签语法

<dl>
<dt>列表标题</dt>
<dd>列表内容</dd>
<dd>列表内容</dd>
...
</dl>

语法解释：

首先dt和dd是放于dl标签内，标签dt与dd处于dl下相同级，dt不能放入dd内，dd不能放入dt内

1) 在dl下，dt与dd处于同级标签

2) dd标签可以若干

3) 同时不能不加dl地单独使用dt标签或dd标签。

 

标题列表效果演示

代码如下： 

<html> 
	<body> 
		<h1>一个定义列表：</h1> 
		<dl> 
			<dt>米扑博客</dt> 
			<dd>网址为： blog.mimvp.com</dd> 

			<dt>米扑论坛</dt> 
			<dd>网址为： forum.mimvp.com</dd> 

			<dt>米扑代理</dt> 
			<dd>网址为： proxy.mimvp.com</dd> 
		</dl> 
	</body> 
</html>

 

运行结果：

一个定义列表：

米扑博客
网址为： blog.mimvp.com
米扑论坛
网址为： forum.mimvp.com
米扑代理
网址为： proxy.mimvp.com

 

扩展与提升
dl dt dd是一个组合型标签
标签标准用法，代码如下 

<dl> 
    <dt>标题1</dt> 
    <dd>列表1</dd> 
    <dd>列表2</dd> 
</dl>

运行结果：

标题1
列表1
列表2

同时dd内可以放置<ul>标签使用。

 

三、html dl dt dd应用实例案例

1、HTML代码片段： 

<dl>
<dt>欢迎访问米扑科技</dt>
<dd>这里有，米扑博客</dd>
<dd>这里有，米扑论坛</dd>
<dd>这里有，米扑代理</dd>
</dl>

2、dl dt dd案例截图

欢迎访问米扑科技
这里有，米扑博客
这里有，米扑论坛
这里有，米扑代理

以上为html dl dt dd列表标签示例。

 

四、DL DT DD标签总结

实践中使用dl dt dd标签最多地方，是具有标题，而标题下对应有若干列表（栏目标题+对应标题列表）。在使用时候能简洁HTML代码情况下，学会灵活使用dl dt dd，了解和掌握标签结构语法。

在以后开发div+css适当运用dl dt dd标签你将会体会到带来的便利。

 

HTML 支持有序、无序、定义列表

无序列表（ul  li）

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表始于 <ul> 标签，每个列表项始于 <li> 

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

浏览器显示如下：

  • Coffee
  • Milk

列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

 

有序列表（ol  li）

同样，有序列表也是一列项目，列表项目使用数字进行标记。

有序列表始于 <ol> 标签，每个列表项始于 <li> 标签 

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

浏览器显示如下：

  1. Coffee
  2. Milk

列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

 

定义列表（dl  dt  dd）

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以 <dl> 标签开始，每个自定义列表项以 <dt> 开始，每个自定义列表项的定义以 <dd> 开始。 

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

浏览器显示如下：

Coffee
Black hot drink
Milk
White cold drink

定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

 

列表标签

标签 描述
<ol> 定义有序列表。
<ul> 定义无序列表。
<li> 定义列表项。
<dl> 定义定义列表。
<dt> 定义定义项目。
<dd> 定义定义的描述。
<dir> 已废弃。使用 <ul> 代替它。
<menu> 已废弃。使用 <ul> 代替它。