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. 51nod“省选”模测第二场 B 异或约数和(数论分块)

    题意 题目链接 Sol 这题是来搞笑的吧.. 考虑一个数的贡献是\(O(\frac{N}{i})\) 直接数论分块. #include<bits/stdc++.h> #define Pai ...

  2. Dynamics 365的系统作业实体记录增长太快怎么回事?

    摘要: 本人微信公众号:微软动态CRM专家罗勇 ,回复294或者20190111可方便获取本文,同时可以在第一间得到我发布的最新博文信息,follow me!我的网站是 www.luoyong.me ...

  3. 在AndroidStudio上使用AddressSanitizer

    在AndroidStudio上使用AddressSanitizer AddressSanitizer是Google主导的一个开源内存问题检测工具.现在也开始支持Android平台,且受Google推荐 ...

  4. Hive之SerDe&Beeline

    一.SerDe SerDe:Serializer and Deserializer 序列化及反序列化,构建在数据存储和执行引擎之间,对两者实现解耦. Hive通过ROW FORMAT DELIMITE ...

  5. User Agent 大全

    一.基础知识篇: Http Header之User-Agent User Agent中文名为用户代理,是Http协议中的一部分,属于头域的组成部分,User Agent也简称UA.它是一个特殊字符串头 ...

  6. 一天一个Linux命令--dhclient

    dhclient -r #用于释放ip地址2 dhclient #获取IP地址 主要针对只有命令行的Linux机器,临时改变了网络环境,事先手动设置的ip地址 看一下自带的解释 root@ubuntu ...

  7. Cs231n-assignment 2作业笔记

    assignment 2 assignment2讲解参见: https://blog.csdn.net/BigDataDigest/article/details/79286510 http://ww ...

  8. poi包冲突问题（excel）

    1. 所需jar包 涉及的poi (1)poi-3.14.jar  (HSSF) 依赖:commons-logging-1.2.jar.log4j-1.2.17.jar.commons-codec.1 ...

  9. 如何提高 windows 的使用效率？--巧用运行命令

    windows 操作系统可以使用 win+R 运行一些命令执行任务,好处是:高效.快速.准确. 启动程序 将程序 chrome 写入以下注册表中, SOFTWARE\Microsoft\Windows ...

  10. SAP CRM 集类型（Set Type）与产品层次（Product Hierarchy）

    本文是产品与对象相关的部分SAP文档的翻译,不包含配置部分. 本文链接:https://www.cnblogs.com/hhelibeb/p/10112723.html 1,对象(Objects) 对 ...