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. iOS中 最新微信支付／最全的微信支付教程详解 韩俊强的博客

    每日更新关注:http://weibo.com/hanjunqiang  新浪微博! 亲们, 首先让我们来看一下微信支付的流程吧. 1. 注册微信开放平台,创建应用获取appid,appSecret, ...

  2. 09 ListView监听 ExpandableListView的使用总结

    1.ListView的滚动监听 >setOnScrollListener 监听 //ListVIew滚动监听 lv.setOnScrollListener(new OnScrollListene ...

  3. Android开发学习之路--MediaPlayer之简单音乐播放器初体验

    很多时候我们都会用手机来播放音乐,播放视频,那么具体地要怎么实现呢,其实主要是MediaPlayer类来完成的.下面通过简单的例子来实现一首歌曲的播放吧.新建工程MediaPlayerStudy,这里 ...

  4. 远程调试Eclipse插件的设置

    1. 被调试方建立一个命令行来运行Eclipse debugEclipse.cmd: eclipse.exe -nl zh_CN -vmargs -XX:+HeapDumpOnOutOfMemoryE ...

  5. android下在屏幕适配小总结

    为什么要屏幕适配?为此我就不说了,网上处理方法要么让你用几套不同分辨率的图片,要么写几套布局文件,要么就是在xml中写dip(这个还是可以的),前面两种感觉过程工作量太大了,由加载大图片的优化思想 同 ...

  6. SwiftyiRate中文说明

    SwiftyiRate Github SwiftyiRate Swift语言实现的app内评分,简单易用. Requirements Integration Usage Initialization ...

  7. Java Map 及相应的一些操作总结

    Map是我们在开发的时候经常会用到的,大致有以下几个操作,其中putAll方法是针对集合而言的操作,故不再进行说明,下面请看一下常用的知识点吧,尤其是keySet和Values两个方法及相应值的获取方 ...

  8. EBS R12 LOG files 位置

    - Apache, OC4J and OPMN: $LOG_HOME/ora/10.1.3/Apache$LOG_HOME/ora/10.1.3/j2ee$LOG_HOME/ora/10.1.3/op ...

  9. 网易内推（Android） 拿offer

    学校BBS上师兄发网易内推,凑下热闹投了一发 一面:电话面 大概25分钟,感觉面试官气场很足,主要关注了其中一个 个人开源项目 1.自我介绍 2.说说你做的这个项目 当时谈到使用到了开源框架xtuil ...

  10. 取消选中单选框radio的三种方式

    作者: 铁锚 日期: 2013年12月21日 本文提供了三种取消选中radio的方式,代码示例如下: 本文依赖于jQuery,其中第一种,第二种方式是使用jQuery实现的,第三种方式是基于JS和DO ...