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

标签用于定义列表类型标签。

dl dt dd目录
  1. dl dt
    dd介绍
  2. 结构语法
  3. dl dt
    dd案例
  4. dl dt
    dd总结

一、dl dt dd认识
  -   TOP

html

是一组合标签,使用了dt dd最外层就必须使用dl包裹,此组合标签我们也又叫表格标签,与table表格类似组合标签,故名我们也叫dl表格(扩展阅读:table tr
td
table tr th表格布局)。为常用标题+列表型标签。如没有对dl dt dd标签初始CSS样式,默认dd列表内容会一定缩进。(扩展阅读:ul li、ol
li、li列表)

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


列表标题

列表内容

列表内容


...

语法解释:

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

标题、标题对应列表效果演示

代码如下:


  1. <</span>html>
  2. <</span>body>
  3. <</span>h1>一个定义列表:</</span>h1>
  4. <</span>dl>
  5. <</span>dt>css网站</</span>dt>
  6. <</span>dd>网址为www.divcss5.com</</span>dd>
  7. <</span>dt>div css网站</</span>dt>
  8. <</span>dd>网址为www.divcss5.com</</span>dd>
  9. <</span>dt>div+css网站</</span>dt>
  10. <</span>dd>网址为www.divcss5.com</</span>dd>
  11. </</span>dl>
  12. </</span>body>
  13. </</span>html>

演示截图

 dl dt dd标签元素语法结构与使用">

扩展与提升

dl dt dd是一个组合型标签

标签标准用法,代码如下


  1. <</span>dl>
  2. <</span>dt>标题1</</span>dt>
  3. <</span>dd>列表1</</span>dd>
  4. <</span>dd>列表2</</span>dd>
  5. </</span>dl>

同时dd内可以放置

标签使用。

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

1、HTML代码片段:


欢迎来到divcss5

这里有,html教程

这里有,css模块

这里有,css教程

2、dl dt dd案例截图

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> 标签用于定义列表类型标签. 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. [js高手之路] 跟GhostWu一起封装一个字符串工具库-扩展trim,trimLeft,trimRight方法(2)

    我们接着上一篇的继续,在上一篇我们完成了工具库的架构,本文扩展字符串去空格的方法, 一共有3个 1,trimLeft: 去除字符串左边的空格 2,trimRight: 去除字符串右边的空格 3,tri ...

  2. form注册表单圆角 demo

    form注册表单圆角 <BODY> <div class="form"> <ul class="list"> <li& ...

  3. css实现网格背景

    只使用一个渐变时,我们能创建的图案并不多,当我们把多个渐变图案组合起来,让他们透过彼此的透明区域显现时,神奇的事情就发生了!我们首先想到的是把水平和水质条纹叠加起来,就可以得到各种各样的网格. 1. ...

  4. 使用Q进行同步的Promises操作

    如何通过使用Q来并发执行多个promises呢? Q(Q(1), Q(2), Q(3)) .then(function (one, two, three) { console.log(one); co ...

  5. Mac操作系统下忘记MYSQL的密码

    1. 在系统偏好 中,中止MySQL服务.: 2. cd/usr/local/mysql/bin   sudo ./mysqld_safe --skip-grant-tables 3. 登录MySQL ...

  6. python之dictionary

    1.python3字典 字典是另一种可变容器模型,且可存储任意类型对象. 字典的每个键值(key=>value)对用冒号(:)分割,每个对之间用逗号(,)分割,整个字典包括在花括号({})中 d ...

  7. C++返回值优化RVO

    返回值优化,是一种属于编译器的技术,它通过转换源代码和对象的创建来加快源代码的执行速度.RVO = return value optimization. 测试平台:STM32F103VG + Keil ...

  8. 浅谈Android的广告欢迎界面(倒计时)

    前些时候就是别人问我他的android APP怎么做一个广告的欢迎界面,就是过几秒后自动跳转到主界面的实现. 也就是下面这种类似的效果.要插什么广告的话你就换张图吧. 那么我就思考了下,就用了andr ...

  9. 【Zookeeper】Zookeeper安装配置

    本文演示使用三台Linux服务器安装Zookeeper,使用的是zookeeper-3.4.5版本,将zookeeper-3.4.5.tar.gz上传到linux服务器, 使用如下命令解压到/usr/ ...

  10. JAVA入门 面向对象

    主要内容 1.类和对象的概念 2.什么是面向对象 3.什么对象的属性方法 4.何谓对象引用 5.实例化 类和对象的概念 万物皆对象,客观存在的事物皆为对象.我们大到名胜古迹,小道生活中的一件物品,例如 ...