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. 顶点/片元 shader 总结

    Cg顶点程序必须在结构中传递顶点数据.几种常用的顶点结构定义在文件UnityCG.cginc中,有如下三种结构体: 1.appdata_base: 包含顶点位置,法线和一个纹理坐标.2.appdata ...

  2. 中文代码示例之Vuejs入门教程(一)

    原址: https://zhuanlan.zhihu.com/p/30917346 为了检验中文命名在主流框架中的支持程度, 在vuejs官方入门教程第一部分的示例代码中尽量使用了中文命名. 所有演示 ...

  3. 笔记-NSArray 逆序reverseObjectEnumerator 及 NSEnumerator 遍历

    //1.原始数组 NSMutableArray *array = [NSMutableArray arrayWithObjects:@"1",@"2",@&qu ...

  4. LeetCode题目总结(二)

    我的代码在github上,https://github.com/WINTERFELLS/LeetCode-Answers 这里只提供个人的解题思路,不一定是最好的. Problems 21-40 合并 ...

  5. python 模块:csv

    转自:http://www.cnblogs.com/sislcb/archive/2008/12/15/1355481.html (感谢整理) 举几个例子来介绍一下,Python 的 CSV模块的使用 ...

  6. OLAP与数据仓库------《Designing Data-Intensive Applications》读书笔记4

    由于第三章的内容比较多,这里我们拆分成两篇读书笔记来记录.上一章我们聊了聊如何数据库是如何实现存储和检索的,今天这篇我们继续来看看OLTP与OLAP存储引擎的区别与联系. 1.OLTP与OLAP 联机 ...

  7. C#WinCE程序(.NET Compact Framework 3.5)项目重构面向抽象设计

    重构关注点 遵循开闭原则 面向抽象设计 实现设备程序端可动态配置 重构的需求 领导想省事提出需求,将现有PDA程序修改为支持PC端由电器工程师根据实际的生产流程可配置,PDA程序在读取配置文件后动态生 ...

  8. Linux 文本处理工具(grep sed awk )

    ^test: 以test开头; test$: 以test结尾: ^$: 表示空行,不是空格: . :代表且只代表任意一个字符(其他功能:当前目录,加载文件): \ : 代表转义字符,表示特殊字符: * ...

  9. iOS开发证书和配置文件的使用

    提示:之前只是根据网上的流程完成了iOS项目的发布过程,对于证书和配置文件仍是一头雾水,这里参照别人的文章,简单了解一下,毕竟以后用的着. 这里有几个问题: 什么是iOS证书,它是如何与app应用关联 ...

  10. 【转】qlv文件如何转换成mp4 怎样把下载好的qlv格式视频转换成MP4格式

    狸窝  复制  收藏  保存到桌面  快速找教程方案  反馈需求  社会主义核心价值观  客服QQ41442901   马上注册 升级VIP   对于视频文件之间的转换问题,我也已经是无力吐槽了,每个 ...