(转载)http://www.jzxue.com/html/css/264I6DG6.html

我们在制作网页过程中用到列表时一般会使用<ul>或者<ol>标签,很少用刑<dl>标签,但是这个三个标签却有着不可忽视的作用,毕竟Web标准中要尽最大可能的使用已有的标签。它们的用途是:

< dl>< /dl>用来创建一个普通的列表,

< dt>< /dt>用来创建列表中的上层项目,

< dd>< /dd>用来创建列表中最下层项目,

< dt>< /dt>和< dd>< /dd>都必须放在< dl>< /dl>标志对之间。

有如下代码

  1. <html>
  2. <head>
  3. <title>一个普通列表</title>
  4. </head>
  5. <body text="blue">
  6. <dl>
  7. <dt>中国城市</dt>
  8. <dd>北京 </dd>
  9. <dd>上海 </dd>
  10. <dd>广州 </dd>
  11. <dt>美国城市</dt>
  12. <dd>华盛顿 </dd>
  13. <dd>芝加哥 </dd>
  14. <dd>纽约 </dd>
  15. </dl>
  16. </body>
  17. </html>

我们可以看到,<dt></dt>中间的文字即时我们没有进行缩进它也会怎地向前靠拢,而<dd></dd>中间的内容则自动向后缩进。这在腾讯新闻评论中已经使用到了

(转载)dl,dt,dd标记在网页中要充分利用的更多相关文章

  1. dl,dt,dd标记在网页中要充分利用

    dl,dt,dd标记在网页中要充分利用 来源:网络整理 时间:08-05-27 点击: 点击这里收藏本文 我们在制作网页过程中用到列表时一般会使用<ul>或者<ol>标签,很少 ...

  2. DIV+CSS中标签ul ol li dl dt dd用法

    ul ol li dl dt dd都是DIV+CSS做网页长用的东西,相当于一棵树的树技,下面就了解一下这些东西的全体用法,本人用dd,dt,dd用得很少,懂得结合使用对做架构是很有好处的哦! DIV ...

  3. HTML中的ul, ol,li , dl,dt, dd标签

    ul: unordered lists ol: ordered lists li: Lists ol 有序列表. <ol><li>……</li><li> ...

  4. 前端学习笔记系列一:15vscode汉化、快速复制行、网页背景图有效设置、 dl~dt~dd标签使用

    ctrl+shift+p,调出configure display language,选择en或zh,若没有则选择安装使用其它语言,则直接呼出扩展程序搜索界面,选择,然后安装,重启即可. shift+a ...

  5. Div+css中ul ol li dl dt dd使用

    ol 有序列表.<ol><li>……</li><li>……</li><li>……</li></ol>表现 ...

  6. html中的dl,dt,dd标签

    html <dl> <dt> <dd>是一组合标签,使用了dt dd最外层就必须使用dl包裹,此组合标签我们也又叫表格标签,与table表格类似组合标签,故名我们也 ...

  7. dl,dt,dd标签 VS 传统table实现数据列表

    过去有很多网页设计师喜欢将他们的网页效果图用table布局实现成网页,但是这样做会遇到一个比较麻烦的问题就是,后期调试和维护会相当的困难.现在,越来越多的前端开发er们开始使用xHTML+CSS替代最 ...

  8. HTML 列表 <ol><ul><li><dl><dt><dd>

    <ol>标签-有序列表 定义和用法: <ol>标签定义有序列表. HTML 与 XHTML 之间的差异 在 HTML 4.01 中,ol 元素的 "compact&q ...

  9. dl dt dd标签

    <dl>标记定义了一个定义列表,定义列表中的条目是通过使用<dt>标记(“definition title”,定义标题)和<dd>标记(“definition de ...

随机推荐

  1. Ant配置

    首先去官网下载一个ant的文件 http://ant.apache.org/bindownload.cgi

  2. Java排序8大算法实现

    概述 排序有内部排序和外部排序,内部排序是数据记录在内存中进行排序,而外部排序是因排序的数据很大,一次不能容纳全部的排序记录,在排序过程中需要访问外存. 我们这里说说八大排序就是内部排序. 当n较大, ...

  3. 美好头标ToolBar

    ActionBar我相信是每一位合格的程序员都用过的组件,也是每一个程序员都会抱怨的组件,因为他不能实现复杂的自定义.为此Google推出了比ActionBar更为美好的组件ToolBar. 本文重点 ...

  4. C# 如何创建接口以及使用接口的简单Demo(转载!)

    //No:1  首先,我们要封装一个接口,接口中不要实现具体的方法(说白了这就是一个架子而已!) using System;using System.Collections.Generic;using ...

  5. Swift中共有74个内建函数

    Swift中共有74个内建函数,但是在Swift官方文档(“The Swift Programming Language”)中只记录了7中.剩下的67个都没有记录.   本文将列举Swift所有的内建 ...

  6. vijos P1055奶牛浴场&& Winter Camp2002

    这道题是我在寒假的模拟赛里碰到的,现在想起来仍觉得余味无穷.题目大意大致如下:给你一个矩形并在其中划出一个最大的子矩形,当然,在这个矩形里有些地方是取不到的,也就是说我们划的这个子矩形不能包含这些点( ...

  7. extjs中gridpanel动态显示/隐藏列

    在extjs3中,大家知道用 myGrid.getColumnModel().setHidden(i,true);但到了4.0后,已经没有getColumnModel这个方法了,我们在Ext.pane ...

  8. Extjs4.2.1学习笔记[更新]

    心血来潮准备学习一下Extjs,就从官方网站http://extjs.org.cn/下载了最新版本4.2.1,开始从头学习,记一下笔记,让自己能够持之以恒. 先说一下基本文件类库引用吧, 每个项目一开 ...

  9. 实用的透明背景mark图标

  10. flask mysql

    sudo apt-get install mysql-servermysql -u root -p sudo apt-get install python-mysqldb sudo apt-get i ...