div学习之div中dl-dt-dd的详解
dl dt dd认识及dl dt dd使用方法
<dl> 标签用于定义列表类型标签。
- dl dt dd目录
一、dl dt dd认识 - TOP
html <dl> <dt> <dd>是一组合标签，使用了dt dd最外层就必须使用dl包裹，此组合标签我们也又叫表格标签，与table表格类似组合标签，故名我们也叫dl表格（扩展阅读：table
tr td、table tr th表格布局）。
<dl><dt></dt><dd></dd></dl>为常用标题+列表型标签。如没有对dl dt dd标签初始CSS样式，默认dd列表内容会一定缩进。（扩展阅读：ul li、ol li、li列表）
二、dl dt dd列表标签语法 - TOP
<dl>
<dt>列表标题</dt>
<dd>列表内容</dd>
<dd>列表内容</dd>
...
</dl>
语法解释：
首先dt和dd是放于dl标签内，标签dt与dd处于dl下相同级。也就是dt不能放入dd内，dd不能放入dt内。在dl下，dt与dd处于同级标签。DD标签可以若干。同时不能不加dl地单独使用dt标签或dd标签。
标题、标题对应列表效果演示
代码如下：
- <html>
- <body>
- <h1>一个定义列表：</h1>
- <dl>
- <dt>css网站</dt>
- <dd>网址为www.divcss5.com</dd>
- <dt>div css网站</dt>
- <dd>网址为www.divcss5.com</dd>
- <dt>div+css网站</dt>
- <dd>网址为www.divcss5.com</dd>
- </dl>
- </body>
- </html>
演示截图
扩展与提升
dl dt dd是一个组合型标签
标签标准用法，代码如下
- <dl>
- <dt>标题1</dt>
- <dd>列表1</dd>
- <dd>列表2</dd>
- </dl>
同时dd内可以放置<ul>标签使用。
三、html dl dt dd应用实例案例 - TOP
1、HTML代码片段：
<dl>
<dt>欢迎来到divcss5</dt>
<dd>这里有，html教程</dd>
<dd>这里有，css模块</dd>
<dd>这里有，css教程</dd>
</dl>
2、dl dt dd案例截图
以上为html dl dt dd列表标签范例图
四、DL DT DD标签总结
- 纯CSS的dl、dt、dd 属性布局的通用表单效果，几乎和表格而已的效果一模一样。对于dl、dt、dd的设置建议不要用高度（height）和行高（line-height），在FF会产生错位，建议使用dt、dd的padding属性来定位。
我们实践使用dl dt dd标签最多地方，通常是具有标题，而标题下对应有若干列表简单的（栏目标题+对应标题列表）和标题对应下面有内容。在使用时候我们能简洁HTML代码情况下，学会灵活使用dl dt dd,在以后开发div+css适当运用dl
dt dd标签你将会体会到带来的便利。文章出处和来源网址：http://www.divcss5.com/html/h88.shtml
div学习之div中dl-dt-dd的详解的更多相关文章
- css案例学习之ul li dl dt dd实现二级菜单
效果 代码实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
- DIV+CSS中标签ul ol li dl dt dd用法
ul ol li dl dt dd都是DIV+CSS做网页长用的东西,相当于一棵树的树技,下面就了解一下这些东西的全体用法,本人用dd,dt,dd用得很少,懂得结合使用对做架构是很有好处的哦! DIV ...
- Div+css中ul ol li dl dt dd使用
ol 有序列表.<ol><li>……</li><li>……</li><li>……</li></ol>表现 ...
- HTML中的ul, ol,li , dl,dt, dd标签
ul: unordered lists ol: ordered lists li: Lists ol 有序列表. <ol><li>……</li><li> ...
- 前端学习笔记系列一：15vscode汉化、快速复制行、网页背景图有效设置、 dl~dt~dd标签使用
ctrl+shift+p,调出configure display language,选择en或zh,若没有则选择安装使用其它语言,则直接呼出扩展程序搜索界面,选择,然后安装,重启即可. shift+a ...
- dl,dt,dd标记在网页中要充分利用
dl,dt,dd标记在网页中要充分利用 来源:网络整理 时间:08-05-27 点击: 点击这里收藏本文 我们在制作网页过程中用到列表时一般会使用<ul>或者<ol>标签,很少 ...
- html中的dl,dt,dd标签
html <dl> <dt> <dd>是一组合标签,使用了dt dd最外层就必须使用dl包裹,此组合标签我们也又叫表格标签,与table表格类似组合标签,故名我们也 ...
- dl dt dd标签
<dl>标记定义了一个定义列表,定义列表中的条目是通过使用<dt>标记(“definition title”,定义标题)和<dd>标记(“definition de ...
- dl,dt,dd标签的使用
dl就是定义一个列表 dt说明白了就是这个列表的标题dd就是内容,能缩进和UL,OL性质差不多 <dl> <dt>标题标题</dt> <dd>内容内容& ...
随机推荐
- DVB数字电视系统简介（DVB-C，DVB-S，DVB-T）
前一段时间在<通信原理>期末的时候研究了一下DVB数字电视系统.视音频编解码这些技术都是属于"信源"的技术,而<通信原理>研究的范围正好是它的补集,属于&q ...
- Cocos2D将v1.0的tileMap游戏转换到v3.4中一例(三)
大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请告诉我,如果觉得不错请多多支持点赞.谢谢! hopy ;) 下面看一下CatSprite中最复杂的moveToward方法, ...
- Dynamics CRM2013 更新用户数据主要电子邮件字段报数据加密错误
今天在更新用户数据中的主要邮件字段时报数据 可以进系统设置-数据管理-数据加密中开启,但前提是必须启用https访问而不能用http,在第二个框内输入秘钥点击激活就行了,我这边已经激活过了所以显示的是 ...
- javascript 把时间戳转为时间 ajax HTML拼装
这个目的是记下来,好让我以后可以看一下,这个脚本可是反反复复写了我N天啊!! 全部写下,以备后用! Date.prototype.format = function(format) { var o = ...
- Cocos2D:塔防游戏制作之旅(二)
一个象牙塔的视图 如果你并不熟悉此类型的游戏,塔防游戏是一个战略游戏,你需要购买和将武装塔放置在战略位置,去阻止一波又一波的敌人到达并摧毁你的基地 每一波敌人都更强,这些更强的对手有着更快的速度和对于 ...
- 尚学堂马士兵struts2 课堂笔记(四)
27 结果类型 主要就四种种 dispatch和rediret chain和drdirectaction <package name="resultTypes" namesp ...
- Gradle 1.12 翻译——第十七章. 从 Gradle 中调用 Ant
有关其他已翻译的章节请关注Github上的项目:https://github.com/msdx/gradledoc/tree/1.12,或访问:http://gradledoc.qiniudn.com ...
- awk 详解+实例
1. awk简介 awk是一种编程语言,用于在linux/unix下对文本和数据进行处理.数据可以来自标准输入.一个或多个文件,或其它命令的输出.它支持用户自定义函数和动态正则表达式等先进功能,是li ...
- VB.NET版机房收费系统---报表
报表,即报告情况的表格,简单的说:报表就是用表格.图表等格式来动态显示数据,可以用公式表示为:"报表 = 多样的格式 + 动态的数据". 在没有计算机以前,人们利用纸和笔来记录数据 ...
- SMEM介绍
SMEM :shared memory,是高通平台各子系统共享信息的一种机制,通过SMEM机制,PBL可以将信息传递给SBL1,SBL1可以将信息传递给RPM.LK.下面分析一个SMEM信息传递的具体 ...