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. vijos 1741 观光公交

    TMD这种题有什么意思啊...敲着都烦啊...感觉啥都没有用就敲完了...光考个贪心有什么意思啊. 反正不想写.NOIP遇到了...管他呢. #include<iostream> #inc ...

  2. Python命名规范

    Python 标识符 参见:https://docs.python.org/3/reference/lexical_analysis.html?highlight=identifier#identif ...

  3. linux命令：mv

    1.命令介绍: mv是move的缩写,用来移动文件或重命名文件 2.命令格式: mv [选项] 源文件 目标文件 3.命令参数: -b :若需覆盖文件,则覆盖前先行备份. -f  --force:fo ...

  4. 三色二叉树_树形DP

    Time Limit: 1000 mSec    Memory Limit : 32768 KB  Problem Description 一棵二叉树可以按照如下规则表示成一个由0.1.2组成的字符序 ...

  5. SQL float 保留两位小数

    1. SQL 数据库里类型改为numeric,小数位设置成22. 在SQL语句中转换:select convert(字段,numeric(18,2)) AS 字段3. 在DataFormatStrin ...

  6. CentOS 6.6 nginx PHP 配置

    /************************************************************************* * CentOS 6.6 nginx PHP 配置 ...

  7. 《你不知道的JavaScript》第一部分：作用域和闭包

    第1章 作用域是什么 抛出问题:程序中的变量存储在哪里?程序需要时,如何找到它们? 设计 作用域 的目的:为了更好地存储和访问变量. 作用域:根据名称查找变量的一套规则,用于确定在何处以及如何查找变量 ...

  8. nagios安装配置

     http://www.codeweblog.com/nagios%E5%AE%89%E8%A3%85%E9%85%8D%E7%BD%AE/ 上线的服务器有时会被人攻击,导致服务不可用,今天安装配置了 ...

  9. Apache、tomcat、Nginx常用配置合集

    配置文件地址: Apache: /etc/httpd/conf/httpd.conf tomcat: /usr/local/tomcat/conf/server.xml Nginx  : /usr/l ...

  10. java serializable深入了解

    声明:本文转自csdn论坛,原文地址为http://blog.csdn.net/zdw890412/article/details/7380069,对原作者表示感谢! 引言 将 Java 对象序列化为 ...