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标签总结   -   TOP

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

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

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h88.shtml

html dl dt dd标签元素语法结构与使用的更多相关文章

  1. html dl dt dd标签元素语法结构与使用

    dl dt dd认识及dl dt dd使用方法 标签用于定义列表类型标签. dl dt dd目录 dl dt dd介绍 结构语法 dl dt dd案例 dl dt dd总结 一.dl dt dd认识 ...

  2. 关于H标签 DL DT DD标签的一个小故事

    看了一篇关于SEO论坛的论文,大概故事内容是:一个专业的销售公司,里面SEO  技术多多,可就是销售网站的SEO的情况极为恼火.这天,老板又招到了一个SEO,直接聘为SEO主管全权负责网站的SEO,并 ...

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

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

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

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

  5. html dl dt dd 标签语法与使用

    一.dl dt dd认识 html <dl> <dt> <dd>是一组合标 […]

  6. html-2, a img ul li ol dl dt dd 标签与列表标签的简单使用

    <!-- a:  a{ /*清除a标签的下划线*/ text-decoration: none; }  (1)超链接 href 超链接的地址 target: _self 默认 在当前中打开链接地 ...

  7. dl dt dd标签

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

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

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

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

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

随机推荐

  1. 解决：Android编译源码根目录下/system/vold后，通过push命令将编译生成的vold文件push至system/bin下无法正常开机

    这段时间由于工作需要,在对android根目录下/system/vold进行修改编译的时候,在通过adb命令将vold文件push至/system/bin目录下,adb reboot重启手机却发现一直 ...

  2. UNIX,基础知识，文件IO，文件和目录

    2015.1.27星期二,早晨阴天,中午下雪了今天上午老师不上课,程序语句,记一下:main(void){ int c; while((c = getc(stdin)) != EOF) if(putc ...

  3. 制作部署安装包：Inno Setup

    制作部署安装包:Inno Setup 前一篇尝试Office 2003 VSTO的开发.部署有提到用VS开发一个简单的VSTO程序.打包C/S程序,我首先想到的是VS里自带的Setup Project ...

  4. Magento 自定义URL 地址重写 分类分级显示

    我们打算将URL在分类页面和产品页面分别定义为: domain.com/category/分类名.html domain.com/category/子分类名.html domain.com/goods ...

  5. nginx下面部署fast-cgi和C++【原】

    1.cgi文件的代码 #include "fcgi_stdio.h" #include <stdlib.h> #include <stdio.h> int ...

  6. socket() failed (13: Permission denied) while connecting to upstream

    /*************************************************************************** * socket() failed (13: ...

  7. 常用http请求状态码含义

    1**  ----临时响应 2**  ----成功响应 3**  ----重定向 4**  ----请求错误 5**  ----服务器错误 常用的几个如下: 200---服务器成功返回网页 301-- ...

  8. web程序调试方法

    1.火狐浏览器查看链接指向的后台方法(controller方法) f12 进入firebug 点击bug旁边的按钮 即第一排第二个按钮 将鼠标划到想要找的链接 在firebug中显示响应的后台跳转.d ...

  9. java 函数 运算符

    1. 函数的重载:多个函数名相同,根据参数列表(个数,类型)选择执行不同函数,不能按返回值类型区分. 2. 运算符: / /两头都是int类型 则做求商运算,如果一头有小数就做正常的除运算 5/2 / ...

  10. PostgreSQL增删数据命令示例

    在PostgreSQL中如何用简单的几条SQL语句生成大量的测试数据呢? 此处,我简单的写一个例子,供参考(在Postgresql9.1下面做的): (1)生成一万条测试数据的表foo mydb=# ...