dl dt dd认识及dl dt dd使用方法

<dl> 标签用于定义列表类型标签。

dl dt dd目录
  1. dl dt dd介绍
  2. 结构语法
  3. dl dt dd案例
  4. 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标签。

标题、标题对应列表效果演示

代码如下：

  1. <html>
  2. <body>
  3. <h1>一个定义列表：</h1>
  4. <dl>
  5. <dt>css网站</dt>
  6. <dd>网址为www.divcss5.com</dd>
  7. <dt>div css网站</dt>
  8. <dd>网址为www.divcss5.com</dd>
  9. <dt>div+css网站</dt>
  10. <dd>网址为www.divcss5.com</dd>
  11. </dl>
  12. </body>
  13. </html>

演示截图

 

扩展与提升

dl dt dd是一个组合型标签

标签标准用法，代码如下

  1. <dl>
  2. <dt>标题1</dt>
  3. <dd>列表1</dd>
  4. <dd>列表2</dd>
  5. </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的详解的更多相关文章

  1. css案例学习之ul li dl dt dd实现二级菜单

    效果 代码实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  2. DIV+CSS中标签ul ol li dl dt dd用法

    ul ol li dl dt dd都是DIV+CSS做网页长用的东西,相当于一棵树的树技,下面就了解一下这些东西的全体用法,本人用dd,dt,dd用得很少,懂得结合使用对做架构是很有好处的哦! DIV ...

  3. Div+css中ul ol li dl dt dd使用

    ol 有序列表.<ol><li>……</li><li>……</li><li>……</li></ol>表现 ...

  4. HTML中的ul, ol,li , dl,dt, dd标签

    ul: unordered lists ol: ordered lists li: Lists ol 有序列表. <ol><li>……</li><li> ...

  5. 前端学习笔记系列一：15vscode汉化、快速复制行、网页背景图有效设置、 dl~dt~dd标签使用

    ctrl+shift+p,调出configure display language,选择en或zh,若没有则选择安装使用其它语言,则直接呼出扩展程序搜索界面,选择,然后安装,重启即可. shift+a ...

  6. dl,dt,dd标记在网页中要充分利用

    dl,dt,dd标记在网页中要充分利用 来源:网络整理 时间:08-05-27 点击: 点击这里收藏本文 我们在制作网页过程中用到列表时一般会使用<ul>或者<ol>标签,很少 ...

  7. html中的dl,dt,dd标签

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

  8. dl dt dd标签

    <dl>标记定义了一个定义列表,定义列表中的条目是通过使用<dt>标记(“definition title”,定义标题)和<dd>标记(“definition de ...

  9. dl,dt,dd标签的使用

    dl就是定义一个列表 dt说明白了就是这个列表的标题dd就是内容,能缩进和UL,OL性质差不多 <dl> <dt>标题标题</dt> <dd>内容内容& ...

随机推荐

  1. C++对C语言的变量检测增强

    在C语言中,重复定义多个同名的全局变量是合法的 在C++中,不允许定义多个同名的全局变量 C语言中多个同名的全局变量最终会被链接到全局数据区的同一个地址空间上 demo #include <st ...

  2. shell编程——if语句

    if 语句格式 if  条件 then  Command else  Command fi                              别忘了这个结尾 If语句忘了结尾fi test.s ...

  3. Fresco图片框架内部实现原理探索

    流行的网络框架 目前流行的网络图片框架: Picasso.Universal Image Loader.Volley的(ImageLoader.NetworkImageView).Glide和Fres ...

  4. [GitHub]第七讲：GitHub issues

    文章转载自:http://blog.csdn.net/loadsong/article/details/51591701 Github 上的每个项目仓库,都有三套基础设置可供使用:一个是通过 Gith ...

  5. 平述factory reset ——从main system到重引导流程

    关于Android或linux的引导流程,网上大都是从开机开始讲述的,或者直接跳过bootloader引导阶段,直接从init进程开始说起.这里我从手机正常运行状态开始,到重启状态以及重启之后的状态略 ...

  6. UNIX环境高级编程——sigqueue、sigsuspend函数

    一.sigqueue函数 功能:新的发送信号系统调用,主要是针对实时信号提出的支持信号带有参数,与函数sigaction()配合使用. int sigqueue(pid_t pid, int sig, ...

  7. 修改GDAL库支持RPC像方改正模型

    最近在做基于RPC的像方改正模型,方便对数据进行测试,修改了GDAL库中的RPC纠正模型,使之可以支持RPC像方改正参数. 下面是RPC模型的公式,rn,cn为归一化之后的图像行列号坐标,PLH为归一 ...

  8. Chapter 2 User Authentication, Authorization, and Security（10）：创建包含数据库

    原文出处:http://blog.csdn.net/dba_huangzj/article/details/39473895,专题目录:http://blog.csdn.net/dba_huangzj ...

  9. Linux下使用GDAL进行开发（automake使用）

    首先写三个源代码文件,分别是GDALTest.cpp.Fun.cpp和Fun.h,将这三个存放在一个叫GDALTest的文件夹中,然后打开终端,切换到该目录,如下图所示(注:这个图是最后截图的,所以文 ...

  10. CE6.0 下获得 SD 卡序列号的方法

    经常在坛子里看到讨论软件加密的帖子,纯软件加密与读取硬件序列号加密是经常讨论到的. 两种方法各有优缺点. 在通过读取硬件序列号的方法来加密的方法,受硬件的限制. 一般来说,CPU和T-Flash可能存 ...