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. Thrift 入门教程

    1. 概述 thrift是一个软件框架,用来进行可扩展且跨语言的服务的开发.它结合了功能强大的软件堆栈和代码生成引擎,以构建在 C++, Java, Go,Python, PHP, Ruby, Erl ...

  2. Fragment与Activity的接口回调

    这里说一个官方推荐的写法: private OnFragmentInteractionListener mListener; @Override public void onAttach(Contex ...

  3. (最详细)小米MIX的Usb调试模式在哪里打开的教程

    当我们使用安卓手机链接pc的时候,或者使用的有些应用比如我们团队营销团队当使用的应用引号精灵,以前老版本就需要开启Usb调试模式下使用,现当新版本不需要了,如果手机没有开启Usb调试模式,pc则没法成 ...

  4. vulnhub writeup - 持续更新

    目录 wakanda: 1 0. Description 1. flag1.txt 2. flag2.txt 3. flag3.txt Finished Tips Basic Pentesting: ...

  5. Sql Server 获取本周周一

    SELECT DATEADD(Day,(@i+1)-(DATEPART(Weekday,getdate())+@@DATEFIRST-1)%7,getdate())

  6. git执行cherry-pick时修改提交信息

    git执行cherry-pick时修改提交信息 在本地分支执行cherry-pick命令时有时需要修改commit message信息,可以加参数-e实现: git cherry-pick -e co ...

  7. SpringBoot2.0之四 简单整合MyBatis

    从最开始的SSH(Struts+Spring+Hibernate),到后来的SMM(SpringMVC+Spring+MyBatis),到目前的S(SpringBoot),随着框架的不断更新换代,也为 ...

  8. JavaScript面向对象—基本数据类型和引用数据类型的区别和变量及作用域(函数和变量)

    基本类型和引用类型的值 ECMAScript 变量可能包含两种不同的数据类型的值:基本类型值和引用类型值. 基本类型值指的是那些保存在栈内存中的简单数据段,即这种值完全保存在内存中的一个位置. 而引用 ...

  9. CentOS 7 增加磁盘分区挂载（lvm）

    1.查看主机现有磁盘情况 # fdisk -l 现在主机中存在一块8G的磁盘sdb,尚未分区挂载,所以需将磁盘进行分区挂载. 2.对磁盘进行分区 # fdisk /dev/sdb   (选择要操作分区 ...

  10. 洛谷P2243 电路维修

    题目地址 转化为图论问题 对于每个交叉点(X,Y)抽象成节点.与它相邻的四个点中,可以直接连线的边权为0,否则边权为1. 用死了的SPFA解决图论问题. #include <cstring> ...