dl dt dd认识及dl dt dd使用方法

<dl> 标签用于定义列表类型标签。

dl dt dd目录
  1. dl dt dd介绍
  2. 结构语法
  3. dl dt dd案例
  4. dl dt dd总结
一、dl dt dd认识   -   TOP

html <dl> <dt> <dd>是一组合标签，使用了dt dd最外层就必须使用dl包裹，此组合标签我们也又叫表格标签，与table表格类似组合标签，故名我们也叫dl表格（扩展阅读：table tr td、table tr th表格布局）。

<dl><dt></dt><dd></dd></dl>为常用标题+列表型标签。如没有对dl dt dd标签初始CSS样式，默认dd列表内容会一定缩进。（扩展阅读：ul li、ol li、li列表）

二、dl dt dd列表标签语法   -   TOP

<dl>
<dt>列表标题</dt>
<dd>列表内容</dd>
<dd>列表内容</dd>
...
</dl>

语法解释：
首先dt和dd是放于dl标签内，标签dt与dd处于dl下相同级。也就是dt不能放入dd内，dd不能放入dt内。在dl下，dt与dd处于同级标签。DD标签可以若干。同时不能不加dl地单独使用dt标签或dd标签。

标题、标题对应列表效果演示
代码如下：

  1. <html>

  2. <body>

  3. <h1>一个定义列表：</h1>

  4. <dl>

  5. <dt>css网站</dt>

  6. <dd>网址为www.divcss5.com</dd>

  7. <dt>div css网站</dt>

  8. <dd>网址为www.divcss5.com</dd>

  9. <dt>div+css网站</dt>

  10. <dd>网址为www.divcss5.com</dd>

  11. </dl>

  12. </body>

  13. </html>

演示截图

扩展与提升

dl dt dd是一个组合型标签

标签标准用法，代码如下

  1. <dl>

  2. <dt>标题1</dt>

  3. <dd>列表1</dd>

  4. <dd>列表2</dd>

  5. </dl>

同时dd内可以放置<ul>标签使用。

三、html dl dt dd应用实例案例   -   TOP

1、HTML代码片段：

<dl>

<dt>欢迎来到divcss5</dt>

<dd>这里有，html教程</dd>

<dd>这里有，css模块</dd>

<dd>这里有，css教程</dd>

</dl>

2、dl dt dd案例截图

以上为html dl dt dd列表标签范例图

四、DL DT DD标签总结   -   TOP

我们实践使用dl dt dd标签最多地方，通常是具有标题，而标题下对应有若干列表简单的（栏目标题+对应标题列表）和标题对应下面有内容。在使用时候我们能简洁HTML代码情况下，学会灵活使用dl dt dd，了解和掌握标签结构语法。

在以后开发div+css适当运用dl dt dd标签你将会体会到带来的便利。

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h88.shtml

html dl dt dd标签元素语法结构与使用的更多相关文章

  1. 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认识 ...

  2. 关于H标签 DL DT DD标签的一个小故事

    看了一篇关于SEO论坛的论文,大概故事内容是:一个专业的销售公司,里面SEO  技术多多,可就是销售网站的SEO的情况极为恼火.这天,老板又招到了一个SEO,直接聘为SEO主管全权负责网站的SEO,并 ...

  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. html dl dt dd 标签语法与使用

    一.dl dt dd认识 html <dl> <dt> <dd>是一组合标 […]

  6. html-2, a img ul li ol dl dt dd 标签与列表标签的简单使用

    <!-- a:  a{ /*清除a标签的下划线*/ text-decoration: none; }  (1)超链接 href 超链接的地址 target: _self 默认 在当前中打开链接地 ...

  7. dl dt dd标签

    <dl>标记定义了一个定义列表,定义列表中的条目是通过使用<dt>标记(“definition title”,定义标题)和<dd>标记(“definition de ...

  8. dl,dt,dd标签的使用

    dl就是定义一个列表 dt说明白了就是这个列表的标题dd就是内容,能缩进和UL,OL性质差不多 <dl> <dt>标题标题</dt> <dd>内容内容& ...

  9. HTML中的ul, ol,li , dl,dt, dd标签

    ul: unordered lists ol: ordered lists li: Lists ol 有序列表. <ol><li>……</li><li> ...

随机推荐

  1. KochSnow曲线

    在这里实现了Koch曲线,而且提到我们只需要对一个等边三角形的各条边按照Koch曲线的算法进行绘图就能得到KochSnow曲线,将其实现到之前提到的绘图框架中,考虑到KochSnow的实现主要依赖Ko ...

  2. C#处理Json文件

    JSON(全称为JavaScript Object Notation) 是一种轻量级的数据交换格式.它是基于JavaScript语法标准的一个子集. JSON采用完全独立于语言的文本格式,可以很容易在 ...

  3. OLAP的一些知识——接下去的项目需要的背景

    1.维是人们观察主题的特定角度,每一个维分别用一个表来描述,称为“维表”(Dimension Table),它是对维的详细描述. 2.事实表示所关注的主题,亦由表来描述,称为“事实表”(Fact Ta ...

  4. parse,tryparse区别

    Convert.ToInt32.int.Parse(Int32.Parse).int.TryParse.(int) 四者都可以解释为将类型转换为 int,那它们的区别是什么呢? Convert.ToI ...

  5. [转]BEHAVOUR TREE

    自从开博以来,每天都会关心一下博客的访问情况,看到一些朋友的订阅或者访问,不胜欣喜,也促使我去写一些更好的博文,来和大家分享和交流,从访问 统计来看,有相当一部分是来自于搜索引擎的流量,关键字以“行为 ...

  6. MySQL数据库备份和还原的常用命令小结

    备份MySQL数据库的命令 mysqldump -hhostname -uusername -ppassword databasename > backupfile.sql 备份MySQL数据库 ...

  7. 转：服务器控件的 ID,ClientID,UniqueID 的区别

    动态加载用户控件的怪问题 动态加载用户控件的时候,会因为调用一些控件的一些属性和方法而造成控件命名混乱. 因为add 一个用户控件或者 loadcontrol 的时候 如果没有指定控件的id,clie ...

  8. Android FM模块学习之二 FM搜索频道

    最近在学习FM模块,FM是一个值得学习的模块,可以从上层看到底层.上层就是FM的按扭操作和界面显示,从而调用到FM底层驱动来实现广播收听的功能. 看看FM启动流程:如下图: 先进入FMRadio.ja ...

  9. PAT (Basic Level) Practise：1013. 数素数

    [题目连接] 令Pi表示第i个素数.现任给两个正整数M <= N <= 104,请输出PM到PN的所有素数. 输入格式: 输入在一行中给出M和N,其间以空格分隔. 输出格式: 输出从PM到 ...

  10. 支持 Firefox、Chrome 等主流浏览器的全站变灰 CSS 代码

    <style> html{ -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grays ...