DL，DT，DD，比传统table更语义，解析更快的table列表方式

最新推荐文章于 2023-07-07 00:19:43 发布
最新推荐文章于 2023-07-07 00:19:43 发布
阅读量5.8k 收藏 2
点赞数 3
分类专栏： XML/JSON/Html/CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yaerfeng/article/details/10251791
版权

使用dl,dt,dd替代传统的table布局

<!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>-dl dt dd表格</title>
<style>
dl,dt,dd{
    margin:0;
    background:#fff5fa;
    font-size:14px;
    }
dl{
    margin:0 auto;
    width:50%;
    border:1px solid #f8b3d0;
    border-bottom:none;
    }
dt{
    font-weight:800;
    background:#ff99cc;
    color:#fff;
    }
dt,dd{
    line-height:30px;
    padding:0 0 0 10px;
    border-bottom:1px solid #f8b3d0;
    height:30px;
    overflow:hidden
    }
dd{
    text-indent:3em;
    }
.fff{
    background:#fff
    }
dt span,dd span{
    display:block;
    float:right;
    font-size:14px;
    border-left:1px solid #f8b3d0;
    text-indent:0em;
    width:80px;
    text-align:center;
    }

</style>
</head>
<body>
<dl class=hb>
<dt><span>下载地址</span><span>更新时间</span>热门IT资源下载</dt>
<dd class=fff><span>——</span><span>11.2</span>Delphi发邮件（SendDLL.dll）应用例子</dd>
<dd><span>——</span><span>11.3</span>EasyCrm 客户资源管理系统 v2011 2.0</dd>
<dd class=fff><span>——</span><span>11.4</span>爱考.NET在线考试系统</dd>
<dd><span>——</span><span>11.5</span>蓝色漂亮的管理员登录页模板</dd>
<dd class=fff><span>——</span><span>11.6</span>如此简洁美观的管理登录模板页</dd>
<dd><span>——</span><span>11.13</span>Delphi 学校学生信息查询系统</dd>
<dd class=fff><span>——</span><span>11.30</span>Delphi图片管理，Access源代码版</dd></dl>
</body>
</html>


yaerfeng
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
dl和dt标签是什么意思_HTML dt标签教程和示例
cunjiu9486的博客
10-14 6416
dl和dt标签是什么意思HTML provides the <dt> element in order to add a term in description or definition list. <dt> element is used inside a <dt> element and generally followed by a <dt>...
html中td,dd属性,HTML的dl、dt、dd标记制作表格对决Table制作表过
weixin_29843603的博客
06-04 2003
html中,dl和dd和dt标签是什么意思,什么时候需要用定义列表的意思 一般用在图文并排的时候 应网友提问。html中，dl,dt,dd怎么使用1，定义： 是一组合标签，使用了dt dd最外层就必须使用dl包裹，此组合标签我们也又叫表格标签，与table表格类似组合标签，故名我们也叫dl表格。 为常用标题+列表型标签。如没有对dl dt dd标签初始CSS样式，默认dd列表内容会一定缩进。CSS...
CSS之排列系列--dl, dt, dd--使用/教程/实例
热门推荐
IT利刃出鞘的博客
12-05 1万+
本文用示例介绍CSS中的dl, dt, dd的用法。 dl, dt, dd是组合标签，使用了dt dd最外层就必须使用dl包裹，此组合标签我们也又叫表格标签，与table表格类似组合标签，故名我们也叫dl表格。 为常用标题+列表型标签。若没有对dl dt dd标签初始CSS样式，默认dd列表内容会缩进。
关于HTML 列表中的dl,dt,dd,ul,li,ol区别及应用
xiaoweids的博客
07-07 878
本文主要为大家介绍一下dl,dt,dd,ul,li,ol区别，需要的朋友可以参考一下平时有时候用到div和css对网站界面进行重构,经常会用到标签ul ol li dl dt dd ,这些标签常用于列表显示内容.学会这几个标签的用途,了解一下他们的区别,对网站代码和加载速度都有很有益处的.下面,简单说一下.ul 标签定义无序列表。实例:li: Listsol有序列表:12345表现为：1……2……3……ul无序列表，表现为li前面是大圆点而不是123:12。
《HTML基础知识》2020-09-16
mqd_chan的博客
09-16 275
页面基本结构 html head body 标签类型 <tagName/> <tagName></tagName> 注释 样式：<!--需要注释的内容--> 目的：1、暂时用不到 2、解释 页面编码 【默认】iso-8859-1/gbk/gb2312/utf-8 常用标签 行内元素 【a标签】 超链接：<a...
table和dl
VAEaaaa的博客
12-12 553
我的简陋html总结（2） 1.dl标签（自定义列表） dl是自定义列表，和ul，li同属于列表标签类 <dl> <dt>这就是大哥</dt> <dd>小弟1</dd> <dd>小弟2</dd> <dd>小弟3</dd> </dl> 使用方法如图所示。 dd，dt都是块级元素，他们不能互相包含（dt的儿子中不能有d
用标准dl,dt,dd标签抛弃table列表
09-28
总结起来，尽管table在某些场景下仍然是展示大量数据的有效工具，但在创建小型数据列表和表单时，使用HTML的dl、dt、dd标签能够提供更好的可维护性、更符合语义的代码结构，以及更高效的开发体验。因此，建议开发者...
HTML的dl、dt、dd标记制作表格对决Table制作表
12-08
如果你仍然在使用传统table来创建数据列表，那么请继续往下看，看看使用HTML的dl、dt、dd标签是如何让你的工作更轻松… table数据列表 传统table的数据列表代码如下所示。我们要为每行添加tr标签，然后还要在其中为...
DL-Dt-DD(做表格Css实现)
08-15
传统的HTML表格元素如`<table>`, `<tr>`, `<td>`等可以方便地组织和显示结构化数据，但在某些场景下，为了追求更灵活的样式控制和更好的语义化，开发者可能会选择非传统的方法，比如使用`<dl>`, `<dt>`, `<dd>`元素...
我们遗忘的一些极富于语义的HTML标签
01-20
1. dl, dt, dd系列定义列表 网站重构让很多人知道了ul, ol和li，但是在列表的家族里面还有一个dl，就是“定义列表”。比如说词典里面的词的解释、定义就可以用这种列表。 如： Dog A carnivorous mammal of the ...
Table 表格,dl dt dd 标签
TK_Lumi的博客
08-15 1万+
Html常用标签一、Table 表格1.语法2.作用3.案例二、dl dt dd 标签1.简介2.语法3.案例 一、Table 表格 1.语法 <table> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> </table
前端SEO代码规范【非常齐全】
qq_42961150的博客
08-19 1915
前端SEO代码规范 什么是SEO？ 搜索引擎优化是一种利用搜索引擎的搜索规则来提高目前网站在有关搜索引擎内的自然排名的方式。SEO是指为了从搜索引擎中获得更多的免费流量，从网站结构、内容建设方案、用户互动传播、页面等角度进行合理规划，使网站更适合搜索引擎的索引原则的行为。 SEO分为站内优化和站外优化 站内优化指的是站长能控制的所有网站本身的调整，如网站结构、页面HTML代码 站外优化指的是外部链接建设及行业社群的参与互动，这些活动不是在网站本身进行的 SEO原理 页面抓取： 蜘蛛向服务器请求页面，获
一个用 dl dt dd 做的表格
02-22 2935
看到最近大家流行用dl dt dd布局，我也能照着做了一个，反照表格做的，效果如图： 代码贴出来给大家看看                 dl,div{width:800px;margin:0 auto; text-align:center;}         dt{clear:both;text-align:center;font-weight: bold
dl dt dd 标签的用法（一）
weixin_34235371的博客
02-08 2540
html标签中 是一组合标签，使用了dt dd最外层就必须使用dl包裹，此组合标签我们也又叫表格标签，与table表格类似组合标签，故名我们也叫dl表格。 为常用标题+列表型标签。如没有对dl dt dd标签初始CSS样式，默认dd列表内容会一定缩进。 一般的写法： 首先dt和dd是放于dl标签内，标签dt与dd处于dl...
html中dl，dt，dd标签的用法
Sky___Ice的专栏
05-23 1万+
dl 标签 -- 代表HTML自定义列表  dl标签是成对出现的,以开始,结束  自定义列表的开始使用标签,列表中每个元素的标题使用(definition term)定义,后面跟随(definition description)用于描述列表中元素的内容.  属性:  Common -- 一般属性  dl是definition lists的英文缩写  引用网址:http://www.dr
dl dt dd和table tr td
Blog
09-11 1325
1.dl dt dd<dl> 标签定义了定义列表（definition list）。 <dl> 标签用于结合 <dt> （定义列表中的项目）和 <dd> （描述列表中的项目）。<html> <body> <h2>一个定义列表：</h2> <dl> <dt>计算机</dt> <dd>获取新的知识、交换有价值的经验以及通过交流迸发出灵感的火花。</dd> <dt>机器交流</dt>
CSS: 简单行列用table还是dl,dt,dd?
weixin_33850015的博客
08-20 206
如果表格不复杂，只是几行几列，还是采用DL.DT.DD，如果是复杂数据显示，例如注册个人信息列表，还是建议使用table。 table数据列表： 传统table的数据列表代码如下所示。我们要为每行添加tr标签，然后还要在其中为标题和数据各加一个td标签，由于标签都是td，想要添加样式的话还要为每个td添加class属性。&lt;table&gt; &lt;tbody&gt; &lt...
dl dt dd使用场景
最新发布
09-06
在HTML中，<dl>, <dt>和<dd>是定义列表的元素，它们用于在网页上展示特定的定义和描述。下面是它们的使用场景。 <dl>元素用于创建一个定义列表（Description List），常用于展示术语及其对应的描述。它通常与<dt>和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值