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

来源：互联网发布：ora27102 windows 编辑：程序博客网时间：2024/05/16 14:40

欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术！

CSS手册CSS3手册CSS论坛CSS培训CSS任务网闻

您的位置：DIVCSS5首页 > HTML >

HTML基础必学列表

html标签大全
<html>标签
html div标签
html span标签
html a超链接标签
html br换行标签
html p段落标签
html br与p区别
H1 H2 H3 H4标题标签
html px em pt长度单位
html b加粗标签
html strong加粗标签
html b与strong区别用法
html em强调标签
html i斜体标签
html u下划线标签
html s贯穿线标签
html img图片标签
html sub下标 sup上标
html nobr强制不换行
html hr水平线标签
html form表单标签
html label标签
html input标签
Html textarea文本框标签
Html select下拉表单
html checkbox多选框
html radio单选框
html font颜色
HTML iframe框架标签
html table tr td th表格
html dl dt dd标签
html font标签
html ol li列表
html ul li列表
html注释
html base标签
html title标签
html link标签
html script标签
html meta标签
html head标签
html style标签
html body标签
html5介绍
html5教程

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

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

<dl> 标签用于定义列表类型标签。

dl dt dd目录

dl dt dd介绍
结构语法
dl dt dd案例
dl dt dd总结

一、dl dt dd认识 - TOP

html <dl> <dt> <dd>是一组合标签，使用了dt dd最外层就必须使用dl包裹，此组合标签我们也又叫表格标签，与table表格类似组合标签，故名我们也叫dl表格（扩展阅读：table tr td、table tr th表格布局）。

<dl><dt></dt><dd></dd></dl>为常用标题+列表型标签。如没有对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标签。

标题、标题对应列表效果演示
代码如下：

<html> 
<body> 
<h1>一个定义列表：</h1> 
<dl> 
    <dt>css网站</dt> 
    <dd>网址为www.divcss5.com</dd> 
    <dt>div css网站</dt> 
    <dd>网址为www.divcss5.com</dd> 
    <dt>div+css网站</dt> 
    <dd>网址为www.divcss5.com</dd> 
</dl> 
</body> 
</html>

演示截图
dl dt dd使用实例演示图

扩展与提升
dl dt dd是一个组合型标签
标签标准用法，代码如下

<dl> 
    <dt>标题1</dt> 
    <dd>列表1</dd> 
    <dd>列表2</dd> 
</dl>

同时dd内可以放置<ul>标签使用。

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

1、HTML代码片段：
<dl>
<dt>欢迎来到divcss5</dt>
<dd>这里有，html教程</dd>
<dd>这里有，css模块</dd>
<dd>这里有，css教程</dd>
</dl>

2、dl dt dd案例截图

html 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

我要分享到：

上一篇：<br>与<p>标签区别
下一篇：html px em pt长度单位(像素相对长度点)知识篇

必备CSS教程 Essential CSS Tutorials

• css height
• css line-height
• css width
• css min-width
• css max-width
• css min-height
• css max-height
• css border
• css background
• css float
• css clear
• css display
• css font
• css text-transform
• css英文首字母大写
• css font-variant
• css font-weight
• css font-style
• css text-decoration
• css 删除线
• div css 虚线
• css 注释
• html 注释
• css padding
• css margin
• css 文本
• css font-size
• css font-family
• css color
• css text-align
• css text-indent
• css 超链接(css a)
• css 优化压缩
• css id(css #)
• css class(css .)
• css ul li列表
• css 圆角圆边
• css 父级子级
• css 指针概念
• css cursor
• css overflow
• html px em pt网页单位
• CSS important
• CSS position
• css z-index
• css white-space
• css img图片
• css class id
• css link与@import区别
• css 选择器
• css引入html

必备HTML基础教程 Essential HTML Tutorials

• html网页结构
• 显示文件扩展名
• html标签大全集合
• html常用标签
• 网页源代码是什么
• html字体大小
• HTML标签如何使用
• html字体颜色
• HTML utf-8和gb2312判断使用
• html 边框虚线
• html图片显示
• html空行方法
• html文件怎么打开
• html乱码原因
• div id class使用与区别
• html标签内style
• 虚拟主机相关知识
• 伪静态是什么
• DOCTYPE对网页起何作用
• 先写HTML代码还是先写CSS代码
• HTML5教程
• html是什么

CSS 特效CSS EFFECTS / CSS 模块CSS MODULE

DIVCSS5模块上图标下名称DIV CSS局部布局
DIVCSS5模块上标题下简介列表DIV CSS布局
DIVCSS5模块上标题下(左图片右简介)DIV CSS布局
DIVCSS5模块左图片右标题简介div css布局模块
DIV CSS模块新闻门户网站栏目导航布局模块
DIV CSS布局短栏目与新闻标题列表布局模块代码

0 0

ora27102 windows

原创粉丝点击

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

DIV+CSS学习与CSS资源分享平台

HTML基础必学列表

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

一、dl dt dd认识 - TOP

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

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

四、DL DT DD标签总结 - TOP

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

最新文章NEWS

相关文章RELATED

CSS 特效CSS EFFECTS / CSS 模块CSS MODULE