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. MongoDB 提升性能的18原则（开发设计阶段）

    MongoDB 是高性能数据,但是在使用的过程中,大家偶尔还会碰到一些性能问题.MongoDB和其它关系型数据库相比,例如 SQL Server .MySQL .Oracle 相比来说,相对较新,很多 ...

  2. IDEWorkspaceChecks.plist文件是干什么用的？

    在提交PR的时候,无意间发现了在xcworkspace/xcshareddata中多了一个名为IDEWorkspaceChecks.plist的文件.自己并没有手动创建此文件,在网上查了一下,最终对其 ...

  3. .NET CORE学习笔记系列(2)——依赖注入[6]: .NET Core DI框架[编程体验]

    原文https://www.cnblogs.com/artech/p/net-core-di-06.html 毫不夸张地说,整个ASP.NET Core框架是建立在一个依赖注入框架之上的,它在应用启动 ...

  4. IDEA 相关整理

    插件部分 Lombok 日志不定义

  5. Openssl x509命令

    一.简介 x509指令是一个功能很丰富的证书处理工具.可以用来显示证书的内容,转换其格式,给CSR签名等 二.语法 openssl x509 [-inform DER|PEM|NET] [-outfo ...

  6. P1354 房间最短路问题

    传送门 可以发现,最短路一定要经过墙壁的断点. 那么把房间看作一个有向图,墙壁的断点为节点,求从起点到终点的最短路. 这道题的难点在于建图.枚举所有的断点,若可以走则加入这条边. 判断两点是否连通,即 ...

  7. C++笔记--thread pool【转】

    版权声明:转载著名出处 https://blog.csdn.net/gcola007/article/details/78750220 背景 刚粗略看完一遍c++ primer第五版,一直在找一些c+ ...

  8. Golang 入门系列(九) 如何读取YAML,JSON,INI等配置文件

    实际项目中,读取相关的系统配置文件是很常见的事情.今天就来说一说,Golang 是如何读取YAML,JSON,INI等配置文件的. 1. json使用 JSON 应该比较熟悉,它是一种轻量级的数据交换 ...

  9. MongoDB小东西

    在mongodb中,show users 和db.system.users.find() 都能查看账户的相关信息,但是这两个命令有什么区别么? db.system.users.find() 是查看全局 ...

  10. iview table行render渲染不同的组件

    table不同的行,相同的列渲染不同的组件,如图1:第一行渲染selece,第二行渲染input render:(h,params)=>{ if(params.index === 0){ //以 ...