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. windows下查看端口占用情况及关闭相应的进程

    经常,我们在启动应用的时候发现系统需要的端口被别的程序占用,如何知道谁占有了我们需要的端口,很多人都比较头疼,下面就介绍一种非常简单的方法. 例如:需要查看9001端口被谁占用,并将其进程强制关闭 在 ...

  2. python爬虫如何爬知乎的话题?

    因为要做观点,观点的屋子类似于知乎的话题,所以得想办法把他给爬下来,搞了半天最终还是妥妥的搞定了,代码是python写的,不懂得麻烦自学哈!懂得直接看代码,绝对可用 #coding:utf-8 fro ...

  3. Web开发入门学习笔记

    公司web项目终于要启动了,本以为django学习可以在实战中进行,结果最终使用了Drupal框架,好吧,那我们就PHP走起,买了本<细说PHP>,先跟着过一遍Web开发入门. HTTP协 ...

  4. Python学习_01_对象

    之前关于python的知识比较零散,这一个系列的随笔将python重新学习整理一遍.学习书籍<Python核心编程>第二版. Python对象基础 python并不是一个单纯面向对象的语言 ...

  5. Dubbo(五) Dubbo入门demo——helloworld

    前言 前面我已经介绍了dubbo的一些基本工具和知识,让大家简单的了解了下RPC框架和Dubbo.接下来就是重点了,Dubbo的helloworld项目. 一.搭建项目 首先我们新建三个maven项目 ...

  6. 6.前端基于react,后端基于.net core2.0的开发之路(6) 服务端渲染(SSR)

    0.源码地址 https://gitee.com/teambp/ScaffoldClient  这个地址下载对应源码. 1.服务端渲染是啥? 就是在服务器进行页面渲染(废话),当页面展示后,显示的就是 ...

  7. vue2.0 配置sass

    一.配置sass依赖 npm install node-sass --save-dev npm install sass-loader --save-dev 二.打开build文件夹下的webpack ...

  8. September,开启一个新的征程!

    寻找梦里的未来笑对现实的无奈不能后退的时候不再傍徨的时候永远向前 路...一直都在

  9. 4、ABPZero系列教程之拼多多卖家工具 集成短信发送模块

    ABPZero并没有手机短信发送功能,现在我们来集成一个,为后面注册.登录作铺垫. 阿里云短信服务 首先需要在阿里云开通短信服务,连接地址 开通后,在签名管理中添加一个签名 在模板管理中添加一个模板, ...

  10. mongodb 的基本函数语法封装

    //这个模块里面封装了所有对数据库的常用操作 var MongoClient = require('mongodb').MongoClient; var config = require(" ...