dl dt dd的应用

最新推荐文章于 2025-11-26 15:59:01 发布
原创 最新推荐文章于 2025-11-26 15:59:01 发布 · 157 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#java #xhtml

本文深入解析HTML自定义列表dl标签的使用方法，并通过代码示例展示如何在网页中灵活运用该标签。同时，提供样式设置代码以实现自定义显示效果。
dl 标签 -- 代表HTML自定义列表
dl标签是成对出现的,以<dl>开始,</dl>结束
自定义列表的开始使用<dl>标签,列表中每个元素的标题使用<dt>(definition term)定义,后面跟随<dd>(definition description)用于描述列表中元素的内容.
属性:
Common -- 一般属性
dl是definition lists的英文缩写
引用网址:http://www.dreamdu.com/xhtml/tag_dl/

示例：
Java代码
<dl>
<dt>www</dt>
<dd>World Wide Web的缩写.</dd>
<dt>dreamdu</dt>
<dd>梦之都.</dd>
<dt>com</dt>
<dd></dd>
<dt>com.cn</dt>
<dd></dd>
<dt>cn</dt>
<dd>这都是域名的后缀.</dd>
</dl>

<dl>
<dt>www</dt>
<dd>World Wide Web的缩写.</dd>
<dt>dreamdu</dt>
<dd>梦之都.</dd>
<dt>com</dt>
<dd></dd>
<dt>com.cn</dt>
<dd></dd>
<dt>cn</dt>
<dd>这都是域名的后缀.</dd>
</dl>

可以对其设置样式已达到想要的显示效果，如下所示：


Java代码
<html>
<head>
<title>Html中dl,dt,dd标签实例</title>
<style type="text/css">
<!--
dt {
float: left;
width: 60px;
margin: 0px;
padding: 0px;
}
dd {
float: left;
clear: none;
width: 290px;
margin: 0px;
padding: 0px;
}
dl {
width: 350px;
font-size: 9pt;
line-height: 1.5em;
position:relative;
margin: 0px;
padding: 0px;
left:15px;
}
.red {
color: #FF3300;
}
#box {
width: 500px;
background-color: #F1F1F7;
}
#box #content {
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 20px;
}
-->
</style>
</head>
<body>
<div id="box">
<div id="content">
<img src="" align="left" title="商品名" alt="鲜花">
<dl>
<dt>商品名称：</dt>
<dd><strong>[郁金香] </strong>忧惠：<span class="red"><em>8.5折</em></span></dd>
<dt>商品简介：</dt>
<dd>商品名称商品名称商品品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品品名称商品名称商品名称商品名称商品名称商品名称……[<span ><a href="#">详细介绍</a>]</dd>
<dt>店铺地址：</dt>
<dd>北京市海淀区</dd>
<dt>联系电话：</dt>
<dd>0000-12345678 87654321 </dd>
</dl>
</div>
</div>
</body>
</html>


自己的应用：
html部分：
<div class="list_dl">
<dl>
<dt>2010-10-11</dt>
<dd><a href="###" target="_blank">·水泵业：用优势技术实现跨越式发展</a></dd>
</dl>
<dl>
<dt>2010-10-11</dt>
<dd><a href="###" target="_blank">·水泵业：用优势技术实现跨越式发展</a></dd>
</dl>
<dl>
<dt>2010-10-11</dt>
<dd><a href="###" target="_blank">·水泵业：用优势技术实现跨越式发展</a></dd>
</dl>
<dl>
<dt>2010-10-11</dt>
<dd><a href="###" target="_blank">·水泵业：用优势技术实现跨越式发展</a></dd>
</dl>
<dl>
<dt>2010-10-11</dt>
<dd><a href="###" target="_blank">·水泵业：用优势技术实现跨越式发展</a></dd>
</dl>
</div><!--list_dl end-->

css部分：
.list_dl dl,.list_dl dt,.list_dl dd{ padding:0; margin:0;}
.list_dl{ margin:20px; line-height:30px; width:602px; height:630px;}
.list_dl dt{ float:right; width:80px;border-bottom:1px dashed #d3d3d3;}
.list_dl dd{ float:left; width:518px; border-bottom:1px dashed #d3d3d3;}

效果在附件中。

最重要的就是设置浮动。一个左浮动，一个右浮动。
DL.DT.DD实现左右的布局简单例子第1/2页
10-30
### 使用DL、DT、DD实现左右布局的知识点详解 #### 一、背景介绍与问题提出 在网页设计中，常见的布局需求之一就是实现左文右图或者左标题右描述的效果。这种布局方式不仅美观，还能有效地提升用户体验。本文将通过...
html 标签 dl dt dd使用说明
09-28
在一对`<dl>`标签之间，你可以放置一个或多个由`<dt>`和`<dd>`标签组成的对，来定义不同的项目及其描述。 `<dt>` 标签： `<dt>` 代表 "definition term"，用于定义一个名词或者概念。这些术语通常会以粗体或者特殊...
DIV+CSS中标签dl dt dd常用的用法
热门推荐
黄维
11-13 6万+
用来创建一个普通的列表, 用来创建列表中的上层项目， 用来创建列表中最下层项目， 和都必须放在标志对之间。   实例一： 效果:   源码： body{ font-size:12px; line-height:1.8; width:900px; margin:auto;} *{ margin:0; padding:0;} h1{ background:
HTML 列表中的dl,dt,dd,ul,li,ol区别及应用
weixin_34195364的博客
09-03 2088
2019独角兽企业重金招聘Python工程师标准>>> ...
html:自定义列表(dl>dt+dd)的使用
mumu42的博客
07-28 9577
以前用的都有用无序列表ul>li比较多，看了授课老师的写的代码才又重新认识了自定义列表，例如以下布局用自定义列表标签就相当方便： 只需要定义四个dl标签，在dt标签内添加分别添加相应的图片，在dd标签内添加p标签或者span标签或者其他可以添加文字的标签，再给dt和dd添加浮动属性（float:left;）即可。不过值得注意的是dd标签内可以添加任意其他标签，但是dt标签
html dt dd dl英文,dl dt dd是什么的缩写
weixin_35173650的博客
06-16 6826
html中的dl dt dd这几个标签，我老是记不住，经常今天查了是什么意思，隔几天又忘记了，今天在网上找了一下dl dt dd是什么的缩写，终于找到了他们的英文原文意思，这样记忆起来就方便多了，dl就是list(列表)，dt就是terms(列表组)，dd就是描述(description)，再也不用担心以记不住了。ul是unordered lists的缩写 (无序列表)li是list item的缩...
html中dldtdd如何居中,用 dl dt dd 做表格展示数据
weixin_32027491的博客
07-07 1152
亲，现在你还在用table展示数据么？不要那么守旧哦，告诉你要接触新的布局标签了。今天闲来无事打酱油，自己做了一些效果，写点简单的放博客上，增加一点人气，嘻嘻。看到最近大家流行用dl dt dd布局，我也能照着做了一个，反照表格做的，效果如图： 代码也贴出来给大家看看：dl,div{width:800px;margin:0 auto; text-align:center;}dt{clear:bot...
html列表标记dl dt dd,HTML列表标记：dl、dt、dd分享
weixin_32691939的博客
06-26 1241
定义列表和其他类型的列表稍有不同，它由两部分组成：名称和定义。DT 指定名称，为内联元素。DD 指定定义，为块级元素。标准属性id, class, title, style, dir, lang, xml:lang事件属性onclick, ondblclick, onmousedown, onmouseup, onmouseover,onmousemove, onmouseout, onkeypr...
html dd dt dl css,CSS图文混排 采用dl dt dd
weixin_33478314的博客
06-19 469
图文混排* {margin:0;padding:0;}body {background:#fff;}#wrap {width:502px;margin:10px auto 0 auto;}#wrap dl {width:480px;margin-bottom:8px;padding:8px;border:1px solid #ddd;}#wrap dl dt {float:right;width:...
html dt和dd顺序,dl dt dd使用方法
weixin_35949264的博客
06-04 4006
网页制作中的CSS+DIV：dl,dt,dd分别表示什么意思啊标记定义了一个定义列表，定义列表中的条目是通过使用标记(“definition title”，定义标题)和标记(“definition description”，定义描述)创建的。给出了术语名，标记给出了术语的定义。 也就是说用来创建列表中的上层项目。html中,dl和dd和dt标签是什么意思,什么时候需要用定义列表的意思 一般用在图文...
php dt dd,dl dt dd 标签html教程
weixin_32490593的博客
03-16 211
dl dt dd认识�?strong>dl dt dd使用方法标签用于定义列表类型标签�?/p>一、dl dt dd认识html 是一组合标签，使用了dt dd最外层就必须使用dl包裹，此组合标签我们也又�?a href="//www.css5.com.cn/html/380.shtml" target="_blank">表格标签，与table表格类似组合标签，故名我们也叫d...
dl dt dd的嵌套使用
佳泰生活
01-24 6480
dl dt dd的嵌套使用 dd元素中可以包含block元素，而dt中只能包含inline元素， 在dd中可以包含dl元素 效果是这样的,主要的是效果是在dd中加了一个表格,如果使用表格来实现的话,有点困难,要计算表头要跨越几行,或者使用大表格套个小表格的形式, body{ font-size:12px; line-height:1.8; m
网页制作小技巧 dl dt dd标签用法
09-25
本文将详细介绍`<dl>`、`<dt>`和`<dd>`标签的用法和应用场景。 `<dl>`标签： `<dl>`标记定义了一个定义列表，它的主要作用是展示一对对的名词和对其的解释。这种列表不同于普通的`<ul>`或`<ol>`，因为它不强调顺序...
HTML的dl、dt、dd标记制作表格对决Table制作表
12-08
对于小型数据列表和表单，使用`<dl>`, `<dt>`, 和 `<dd>` 标签是一个更好的选择，因为它更符合语义化的原则，使得内容结构更加清晰。 然而，这并不意味着`<table>`标签已经过时。对于展示大量结构化数据，如财务...
MyBatis + PageHelper 分页内幕，PageHelper 是如何动态构建 LIMIT 分页 SQL 的
最新发布
日常笔记 | 干货分享 | 毕设源码 | 毕设指导 | 答辩指导
11-26 235
若依系统中有很多的表格数据、后端接口实体中并没有看到有接收分页大小和页码的属性，在系统的mapper层面SQL语句中并没有看到对应的分页限制。它是如何实现这个分页效果的呢？是将所有的数据查询出来，然后再分页吗？这样效率岂不是非常低。带着这样的疑问，稍微研究了一下这个系统的分页方法。更多详细文章后端是通过从 HttpServletRequest 对象中获取分页的页码和大小，然后创建Page分页对象，在执行sql查询的时候，动态构建分页限制条件。从而实现分页，并不是在查询到所有数据之后再进行的分页处理。
2025最新 SpringCloud 教程，Nacos-总结，笔记19
Rockandrollman的博客
11-25 173
2025最新 SpringCloud 教程，Nacos-总结，笔记19
Java原生网络编程-BIO与NIO
照母山挖洋芋
11-24 774
摘要：本文对比了Java原生JDK中的BIO(阻塞I/O)和NIO(非阻塞I/O)网络编程模型。BIO采用"一连接一线程"模式，存在线程资源浪费和性能瓶颈问题，可通过线程池优化为伪异步I/O模型。NIO通过Selector、Channel和Buffer三大核心组件实现非阻塞通信，支持单线程管理多个通道。重点介绍了NIO的Reactor模式、事件类型(OP_READ/OP_WRITE等)及服务端/客户端的不同关注点，展示了NIO相比BIO在高并发场景下的优势。（149字）
Java集合框架实战：构建高效的企业管理系统
2402_83075343的博客
11-23 1009
本文通过两个企业管理系统案例，详细解析了Java集合框架的核心应用。员工部门管理系统采用HashMap实现部门与员工的高效映射，具备智能添加、快速查询和动态统计功能；商品库存管理系统基于ArrayList实现精细化管控，包含智能录入、库存预警和价格排序等特性。文章对比了HashMap和ArrayList的特性差异，提供了集合选型的最佳实践，并探讨了系统扩展方向。这两个实战案例展示了集合框架在企业应用中的实际价值，为开发者掌握Java集合提供了实用参考。
AspectJ、Spring AOP 与 Solon AOP：Java AOP 框架的三剑客
向往自由的少年！（我是一个少年！！！）
11-26 242
本文对比了Java企业级开发中三种主流AOP实现：AspectJ、Spring AOP和Solon AOP。AspectJ功能最全面，支持字节码织入，可拦截各类连接点但配置复杂；Spring AOP基于动态代理，与Spring生态集成度高，但仅支持方法执行拦截；Solon AOP同样使用动态代理，采用纯注解驱动设计，更轻量但侵入性较强。选择建议：Spring项目优先Spring AOP，极致需求选AspectJ，轻量云原生场景考虑Solon AOP。三种方案各有侧重，可根据项目需求灵活选择。
dl dt dd
04-10
### HTML `<dl>`, `<dt>` 和 `<dd>` 标签的使用方法 `<dl>` 是定义描述列表的标签，通常用于表示术语及其对应的说明或描述。其中，`<dt>` 表示术语（Definition Term），而 `<dd>` 表示对该术语的描述（Definition Description）。这种结构非常适合展示具有明确关联性的内容对[^1]。 #### 基本语法 以下是 `<dl>`、`<dt>` 和 `<dd>` 的基本语法： ```html <dl> <dt>术语</dt> <dd>描述</dd> <dt>另一个术语</dt> <dd>该术语的描述</dd> </dl> ``` #### 默认样式行为 如果没有设置 CSS 样式，默认情况下 `<dd>` 内容会有一定的缩进效果，这有助于区分术语和描述之间的层次关系[^2]。 #### 实际应用案例 下面是一个具体的例子，展示了如何利用这些标签来构建一个功能模块列表： ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title><dl>, <dt>, <dd> 示例</title> <style> dt { font-weight: bold; } dd { margin-left: 40px; /* 调整缩进 */ } </style> </head> <body> <h3>编程语言简介</h3> <dl> <dt>Python</dt> <dd>一种高级动态脚本语言。</dd> <dt>C++</dt> <dd>一种支持面向对象编程的语言。</dd> <dt>JavaScript</dt> <dd>主要用于网页交互开发的脚本语言。</dd> </dl> </body> </html> ``` 在这个示例中，通过自定义 CSS 可以进一步优化显示效果，比如加粗术语部分或者调整描述区域的缩进距离[^3]。 #### 特殊用途场景 除了简单的术语解释外，这类标签还可以应用于更复杂的布局设计之中，例如产品特性介绍、FAQ 页面以及技术文档索引等场合。它们强调了一种语义化的表达形式，即每一个条目都有清晰的主题与其相关内容相匹配[^4]。 相关问题
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值