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. javascript之cookie对象

    属性 name          唯一必须设置的属性,表示cookie的名称 expires       指定cookie的存活周期,如不设置,浏览器关闭自动失效 path           决定c ...

  2. UNIX网络编程——常用服务器模型总结

    下面有9种服务器模型分别是: 迭代服务器. 并发服务器,为每个客户fork一个进程. 预先派生子进程,每个子进程都调用accept,accept无上锁保护. 预先派生子进程,以文件锁的方式保护acce ...

  3. EBS的性能调优

         metalink    Tuning performance on eBusiness suite (Doc ID 744143.1) 这篇文档描述了如何调查电子商务套件的整体性能下降. ...

  4. 【Unity Shaders】Mobile Shader Adjustment—— 什么是高效的Shader

    本系列主要参考<Unity Shaders and Effects Cookbook>一书(感谢原书作者),同时会加上一点个人理解或拓展. 这里是本书所有的插图.这里是本书所需的代码和资源 ...

  5. java设计模式---状态模式

    在阎宏博士的<JAVA与模式>一书中开头是这样描述状态(State)模式的: 状态模式,又称状态对象模式(Pattern of Objects for States),状态模式是对象的行为 ...

  6. iOS中 断点下载详解 韩俊强的博客

    布局如下: 基本拖拉属性: #import "ViewController.h" #import "AFNetworking.h" @interface Vie ...

  7. MySQL慢查询优化 EXPLAIN详解

            我们平台过一段时间就会把生产数据库的慢查询导出来分析,要嘛修改写法,要嘛新增索引.以下是一些笔记.总结整理 慢查询排查         show status;  // 查询mysql ...

  8. nginx 配置open_cache_file 静态文件的缓存

    open_file_cache max=65535 inactive=30s 最多缓存多少个文件,缓存多少时间open_file_cache_min_uses 1 在30S中没有使用到这个配置的次数的 ...

  9. Java进阶(二十一)java 空字符串与null区别

    java 空字符串与null区别 1.类型 null表示的是一个对象的值,而并不是一个字符串.例如声明一个对象的引用,String a = null ; ""表示的是一个空字符串, ...

  10. Java-ServletRequestEvent-ServletRequestAttributeEvent

    /** * Events of this kind indicate lifecycle * events for a ServletRequest. * The source of the even ...