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中的call()方法与apply()方法

    摘自:http://blog.csdn.net/chelen_jak/article/details/21021101 在web前端开发过程中,我们经常需要改变this指向,通常我们想到的就是用cal ...

  2. PhoneGap开发环境搭建

    项目中要用PhoneGap开发,了解了下基本规则,记录一下,以备后查.(只针对Android平台) 一.安装 在安装PhoneGap开发环境之前,需要先安装以下框架: 1.Java SDK 2.Ecl ...

  3. 微信小程序开发之picker

    一.绑定简单数组 通过bindChange控制index,使得当前选择值发生改变 示例1 data: { Data: ['A','B'], Index: 0, }, <picker class= ...

  4. Git知识总览(二) git常用命令概览

    上篇博客我们从 git clone 和 git status 两个命令开始,引出了一系列的git操作命令, 请参见:<Git知识总览(一) 从 git clone 和 git status 谈起 ...

  5. windows 驱动开发入门——驱动中的数据结构

    最近在学习驱动编程方面的内容,在这将自己的一些心得分享出来,供大家参考,与大家共同进步,本人学习驱动主要是通过两本书--<独钓寒江 windows安全编程> 和 <windows驱动 ...

  6. [译]what is bootstrap

    Question:Bootstrap的定义?有什么用?如何助力前端开发?   Answers: 它是一个在用HTML,CSS和javascript创建网站和网页应用的时候可以用到的基础内容. More ...

  7. Spring Boot快速入门(三):依赖注入

    原文地址:https://lierabbit.cn/articles/6 spring boot使用依赖注入的方式很简单,只需要给添加相应的注解即可 @Service用于标注业务层组件 @Contro ...

  8. SpringMVC的映射器、适配器、解析器

    1.处理器和适配器 1.1springmvc的映射器 根据客户端请求的url,找到处理本次请求的handler(处理器),将url和controller关联起来 1.2springmvc的适配器 对映 ...

  9. [小程序开发] 微信小程序audio音频播放组件+api_wx.createAudioContext

    引言: audio是微信小程序中的音频组件,可以轻松实现小程序中播放/停止音频等自定义动作. 附上微信小程序audio组件的相关属性说明:https://mp.weixin.qq.com/debug/ ...

  10. python子域名收集器

    今天心血来潮做了一个子域名收集器.过程是蛋疼啊!这里先感谢一下qpython群的咸鱼大佬,在换页的时候出了点毛病,讲到后面我们就知道了. 思路: 代码开始: 我们要用到的模块是 Requests Bs ...