html之

html

是一组合标签，使用了dt dd最外层就必须使用dl包裹，此组合标签我们也又叫表格标签，与table表格类似组合标签，故名我们也叫dl表格

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

dl dt dd列表标签语法

列表标题
列表内容
列表内容
...

语法解释：
首先dt和dd是放于dl标签内，标签dt与dd处于dl下相同级。也就是dt不能放入dd内，dd不能放入dt内。在dl下，dt与dd处于同级标签。DD标签可以若干。同时不能不加dl地单独使用dt标签或dd标签。

 
北京市大学
     
清华大学
     
北京大学
     
人民大学
上海市大学
     
复旦大学
     
交通大学
     
同济大学
南京市的大学
     
南京大学
     
南航大学
     
人民大学

由于此处未添加css,所以是竖着排列的，若要形成和table一样的一行一行横着排列，css中dl和dt需要设置：float:left

区分tr th td表格用法

......

......



表格标题
表格标题
表格标题



表格内容
表格内容
表格内容

同一个例子的用dl dd 和用table的不同实现方式

例子图：

(1)用table:

Name:
Squall Li


Age:
23


Gender:
Male


Day of Birth:
26th May 1986

对应的css:

/*TABLE LIST DATA*/
table {
margin-bottom:50px;
}
table tr .title {
background:#5f9be3;
color:#fff;
font-weight:bold;
padding:5px;
width:100px;
}
table tr .text {
padding-left:10px;
}

(2)用dl dt dd:

Name: 
Squall Li
Age: 
23
Gender: 
Male
Day of Birth:
26th May 1986

对应的css:

dl {
margin-bottom:50px;
}
dl dt {
background:#5f9be3;
color:#fff;
float:left;
font-weight:bold;
margin-right:10px;
padding:5px;
width:100px;
}
dl dd {
margin:2px 0;
padding:5px 0;
}

转自:

http://www.divcss5.com/html/h88.shtml

http://www.cnblogs.com/zfang/archive/2011/10/25/2224220.html

http://www.cnblogs.com/hnyei/archive/2011/09/23/2185816.html