dl列表是使用了HTML dl、dt、dd标签的数据列表。首先我们使用dl(definition list-自定义列表)标签来容纳整个数据结构,然后我们使用dt(自定义标题)标签和dd(自定义描述)标签来容纳数据中的标题和内容。

Example:

<dl>
<dt>Name: </dt>
<dd>Martin</dd>
<dt>Age: </dt>
<dd>23</dd>
<dt>Gender: </dt>
<dd>Male</dd>
<dt>Day of Birth:</dt>
<dd>13th September 1996</dd>
</dl>

效果:

传统的table数据列表我们要为每行添加tr标签,然后还要在其中为标题和数据各加一个th和td标签。

Example:

<table>
<tbody>
<tr>
<td class="title">Name:</td>
<td class="text">Martin</td>
</tr>
<tr>
<td class="title">Age:</td>
<td class="text">23</td>
</tr>
<tr>
<td class="title">Gender:</td>
<td class="text">Male</td>
</tr>
<tr>
<td class="title">Day of Birth:</td>
<td class="text">13th September 1996</td>
</tr>
</tbody>
</table>

效果:

总结:比较dl和table数据列表,dl列表更加简洁,但是table表格仍然被很多人用来作为网页中数据表现的必需品,比如个人信息数据列表等。事实上,使用HTML的dl、dt、dd标签会让你节省更多的代码,更能让代码符合内容的语义化。当然,table也有它的用武之地,那就是很大数据量的数据表,但是小型的数据列表和表单完全可以不使用table哦!

易混淆的table列表和dl表格的更多相关文章

  1. css常见的易混淆属性和值的区别(一)

    css的属性很多,每一个属性的值也很多,组合起来便有成千上万种.不同属性之间的相互组合也可以产生不同的样式,css真是一种优美的样式设计语言.下面对工作中常见的易混淆的属性和值进行总结: 1. lin ...

  2. Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)

    一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...

  3. lua中易混淆函数

    lua中易混淆的函数 ipairs和pairs: ipairs只能顺序遍历table,遇到key不是数字就会退出 pairs可以遍历table中所有元素 ----------------------- ...

  4. RWD Table Patterns – 响应式表格解决方案

    在显示复杂的表格数据的时候,相信 Web 开发人员都碰到过显示不下的情况.RWD Table Patterns 是一个很好的响应式表格解决方案.它采用移动优先以及渐进增强的设计理念,在不支持响应式的浏 ...

  5. C#中一些易混淆概念总结

    C#中一些易混淆概念 这几天一直在复习C#基础知识,过程中也发现了自己以前理解不清楚和混淆的概念.现在给大家分享出来我的笔记: 一,.NET平台的重要组成部分都是有哪些 1)FCL (所谓的.NET框 ...

  6. C#中易混淆的知识点

    C#中易混淆的知识点 一.引言 今天在论坛中看到一位朋友提出这样的一个问题,问题大致(问题的链接为:http://social.msdn.microsoft.com/Forums/zh-CN/52e6 ...

  7. a链接易混淆与form表单简易验证用法详解

    链接可以说遍布互联网,比如你想提供一个可以跳转到百度首页的链接给网友,那么代码如下: <a href="http://www.baidu.com">百度一下,你就知道& ...

  8. JavaScript中易混淆的DOM属性及方法对比

    JavaScript中易混淆的DOM属性及方法对比 ParentNode.children VS Node.prototype.childNodes ParentNode.children:该属性继承 ...

  9. [Swift-2019力扣杯春季初赛]1. 易混淆数

    给定一个数字 N,当它满足以下条件的时候返回 true: 把原数字旋转180°以后得到新的数字. 如 0, 1, 6, 8, 9 旋转 180° 以后,得到了新的数字 0, 1, 9, 8, 6 . ...

随机推荐

  1. Warning: The Copy Bundle Resources build phase contains

    在编译程序时,遇到了这样的Waring:   Warning: The Copy Bundle Resources build phase contains this target's Info.pl ...

  2. (未使用AOP)使用ThreadLocal对象把Connection和当前线程绑定, 从而使一个线程中只有一个能控制事务的对象

    每个连接都有自己的独立事务,会造成数据的不一致 这组操作应该要么一起操作成功,要么一起操作失败, 应该使用同一个连接,只有一个能控制事务的对象 需要使用ThreadLocal对象把Connection ...

  3. java保留小数位数

    System.out.println(String.format("%.5f",new Main().minRadius(n,m)));

  4. ACM心理过程

    ACM 都已经一个学期过去了,然后还是很菜很菜,比起别人真的是差到一种境界好么???因为自身的太多原因,因为学的不够精,因为懒惰,因为学习的方法,因为自身对未来的不渴望.因为自满,因为自己的自甘堕落, ...

  5. C#基础知识回顾

    值类型和引用类型 值类型存在栈上,结构,枚举,数值类型 引用类型存在堆上,数组,类,接口,委托 把值类型存到引用类型中就是封箱,耗时 引用类型中的值类型是存在堆上,不是栈上,但是作为参数传递时,还是会 ...

  6. [Xcode 实际操作]九、实用进阶-(5)使用正则表达式判断格式是否正确

    目录:[Swift]Xcode实际操作 本文将演示使用正则表达式判断邮箱的格式是否正确. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit ...

  7. 第二篇 Nosql讲解之windows下memcache的安装(一)

    memcached基本概念 1.Memcached是danga的一个项目,最早是LiveJournal服务的,最初为了加速LiveJournal访问速度而开发的,后来被很多大型的网站采用. 官方网站: ...

  8. FFT与NTT的模板

    网上相关博客不少,这里给自己留个带点注释的模板,以后要是忘了作提醒用. 以洛谷3803多项式乘法裸题为例. FFT: #include <cstdio> #include <cmat ...

  9. wmq的队伍 BIT优化dp

    http://oj.xjtuacm.com/problem/14/ wmq的队伍 发布时间: 2017年4月9日 17:06   最后更新: 2017年4月9日 17:07   时间限制: 2000m ...

  10. JVM-GC日志分析

    程序运行时配置如下参数: -Xms20M -Xmx20M -Xmn10M -verbose:gc -XX:+PrintGCDetails -XX:SurvivorRatio= -XX:+PrintGC ...