dl就是定义一个列表

dt说明白了就是这个列表的标题
dd就是内容,能缩进
和UL，OL性质差不多

<dl>

    <dt>标题标题</dt>

    <dd>内容内容</dd>

    <dd>内容内容</dd>

</dl>

dl,dt,dd是一个解释型的列表
比较常用的如：

<dl>

    <dd><img src=”图片路径” alt=”" /></dd>

    <dt>图片标题</dt>

</dl>

以及

<dl>

    <dt>电影标题</dt>

    <dd>主要演员：刘德华，周润发</dd>

    <dd>影片长度：90分钟</dd>

    <dd>内容介绍：……..</dd>

</dl>

除了这些功能之外，可以比用在其他很多地方

其实dl dt dd表示的就是有标题的内容快，其余和 ul li 之类的都是表示列表性的内容，而一下情况则更适合用dl dt dd

<ul>

  <li class=”title”>标题说明<li>

  <li>列表内容</li>

</ul>

可以考虑用

<dl>

  <dt>标题说明</dt>

  <dd>列表内容</dd>

</dl>

<div>

    <h3></h3>

    <p></p>

    <h3></h3>

    <p></p>

    <h3></h3>

    <p></p>

</div>

可以考虑

<dl>

    <dt></dt>

    <dd></dd>

    <dt></dt>

    <dd></dd>

    <dt></dt>

    <dd></dd>

</dl>

下面看几个例子吧：

1、使用不加任何样式的标签：

<dt>Name: </dt>

    <dd>Squall Li</dd>

    <dt>Age: </dt>

    <dd>23</dd>

    <dt>Gender: </dt>

    <dd>Male</dd>

    <dt>Day of Birth:</dt>

    <dd>26th May 1986</dd>

在浏览器中你会看到：

是不是看起来很乱。下面加点样式来看看

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        dl {

            margin-bottom:50px;

        }

        dl dt {

            background:#5f9be3;

            color:#fff;

            float:left;

            font-weight:bold;

            margin-right:10px;

            padding:5px;

            width:100px;

        }

        dl dd {

            margin:2px 0;

            padding:5px 0;

        }

    </style>

</head>

<body>

<dl>

    <dt>Name: </dt>

    <dd>Squall Li</dd>

    <dt>Age: </dt>

    <dd>23</dd>

    <dt>Gender: </dt>

    <dd>Male</dd>

    <dt>Day of Birth:</dt>

    <dd>26th May 1986</dd>

</dl>

</body>

</html>

2、下面来看一个更加具体的例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>News</title>

    <style type="text/css">

    body{

            font-size:12px;

            font-family:"SimSun";

        }

    dl.news{

              margin:0;

              padding:0 0 8px 0;

              color:#10478c;

              border:solid 1px #999;

          }

    dl.news dt{

              margin:0;

              padding:0 0.5em;

              font-weight:bold;

              position:relative;

              height:26px;

              line-height:26px;

              border-bottom:solid 1px #999;

              background:#f7f7f7;

          }

    dl.news dd{

              margin:0 5px;

              padding:2px 70px 0 20px;

              position:relative;

              height:auto;

              min-height:22px;

              _height:22px;

              line-height:18px;

              border-bottom: dashed 1px #ddd;

          background:url(http://bbs.blueidea.com/images/smilies/default/han.gif) left center no-repeat;

          }

    dl.news span{

              position:absolute;

              width:70px;

              text-align:right;

              top:0;

              right:0;

          }

    dl.news dt span{

              font-weight:normal;

              padding:0 4px 0 0;

              color:#666;

          }

    dl.news dd span{

              color:#ccc;

          }

    a:link,a:visited{

              color:#1e50a2;

              text-decoration: none;

          }

    a:hover{

              color:#ba2636;

              text-decoration:underline;

          }

    </style>

    </head>

<body>

<div style="width:300px;">

    <dl class="news">

        <dt>国内新闻<span><a href="#">更多信息</a></span></dt>

        <dd>

            <a href="#">商务部披露汇源并购案审查过程</a>

            <span>2009-02-14</span>

        </dd>

        <dd>

            <a href="#">萧万长称台日确认特殊伙伴关系</a>

            <span>2009-02-14</span>

        </dd>

        <dd>

            <a href="#">台定今年为台日特殊伙伴关系年</a>

            <span>2009-02-14</span>

        </dd>

        <dd>

            <a href="#">云南公安厅规定若出现牢头狱霸直接领导免职</a>

            <span>2009-02-14</span>

        </dd>

        <dd>

            <a href="#">出台6条警规治理队</a>

            <span>2009-02-14</span>

        </dd>

        <dd>

            <a href="#">出现假冒大相国寺高僧</a>

            <span>2009-02-14</span>

        </dd>

        <dd>

            <a href="#">著名笑星笑林涉虚假代言</a>

            <span>2009-02-14</span>

        </dd>

        <dd>

            <a href="#">福建莆田关闭模拟信号 强行推广数字电视</a>

            <span>2009-02-14</span>

        </dd>

    </dl>

    </div>

</body>

</html>

3、查看京东页面你会看到具体的一个用处，如下图：

控制台查看：

dl,dt,dd标签的使用的更多相关文章

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

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

  2. 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认识 ...

  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. 关于H标签 DL DT DD标签的一个小故事

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

  6. dl dt dd标签

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

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

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

  8. dl,dt,dd标签 VS 传统table实现数据列表

    过去有很多网页设计师喜欢将他们的网页效果图用table布局实现成网页,但是这样做会遇到一个比较麻烦的问题就是,后期调试和维护会相当的困难.现在,越来越多的前端开发er们开始使用xHTML+CSS替代最 ...

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

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

随机推荐

  1. (详细)华为荣耀V10 BKL-AL00的USB调试模式在哪里打开的步骤

    每当我们使用pc连接安卓手机的时候,如果手机没有开启Usb开发者调试模式,pc则无法成功检测到我们的手机,有时我们使用的一些功能比较强的的app比如以前我们使用的一个app引号精灵,老版本就需要开启U ...

  2. nginx 防止盗链

    1.测试盗链(www.html2.com 盗取 www.html5.com的图片) 2.防止盗链 符合盗链 —— 重写 说明:if ($invalid_referer) {,if的后面是有空格的,如果 ...

  3. 在MongoDB中创建一个索引而性能提升1000倍的小例子

    在https://www.cnblogs.com/xuliuzai/p/9965229.html的博文中我们介绍了MongoDB的常见索引的创建语法.部分同学还想看看MongoDB的威力到底有多大,所 ...

  4. 前后端分离djangorestframework—— 接入支付宝支付平台

    支付宝 简介 支付宝是什么不用多说了,本次教程适合初学者 前提准备 话不多说,干就完了 1.注册开发者账号,设置公钥私钥 首先进入支付宝开发者平台:传送门 ,有账号直接登录,没账号用你平时用来付款收钱 ...

  5. hive笔记：复杂数据类型-map结构

    map 结构 1. 语法:map(k1,v1,k2,v2,…)   操作类型:map ,map类型的数据可以通过'列名['key']的方式访问 案例: select deductions['Feder ...

  6. wxPython树控件

    1.树控件 树(tree)是一种通过层次结构展示信息的控件,如下图所示是树控件示例,左窗口中是树控件,在wxPython中树控件类是wx.TreeCtrl. wx.TreeCtrl中一个常用的方法有: ...

  7. Arch Linux安装Firefox 火狐中文版

    很多人刚安装好系统之后,刚开始内置的浏览器是火狐的英文版,很多时候因为需要账号同步的原因需要国内版本的火狐浏览器,这个时候我们应该怎么操作呢? 其实也非常的简单 首先我们 输入命令 pacman -S ...

  8. LeetCode算法题-Next Greater Element I（Java实现）

    这是悦乐书的第244次更新,第257篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第111题(顺位题号是496).你有两个数组(没有重复)nums1和nums2,其中nu ...

  9. 设置TextBlock默认样式后，其他控件的Text相关属性设置失效问题

    问题: 定义了默认TextBlock样式后,再次自定义下拉框 or 其他控件 ,当内部含有TextBlock时,设置控件的字体相关样式无效,系统始终使用TextBlock设置默认样式 解决方案: 为相 ...

  10. 《Effective Java中文版第二版》读书笔记

    说明 这里是阅读<Effective Java中文版第二版>的读书笔记,这里会记录一些个人感觉稍微有些重要的内容,方便以后查阅,可能会因为个人实力原因导致理解有误,若有发现欢迎指出.一些个 ...