`

HTML中DL、DT、DD、em标记的使用

 
阅读更多
http://liudaoru.iteye.com/blog/141219
<dl>标记定义了一个定义列表,定义列表中的条目是通过使用<dt>标记(“definition title”,定义标题)和<dd>标记(“definition description”,定义描述)创建的。
<dt>给出了术语名,
<dd>标记给出了术语的定义。
<em> 标签告诉浏览器把其中的文本表示为强调的内容。对于所有浏览器来说,这意味着要把这段文字用斜体来显示。 尽管现在 <em> 标签修饰的内容都是用斜体字来显示,但这些内容也具有更广泛的含义,将来的某一天,浏览器也可能会使用其他的特殊效果来显示强调的文本。如果你只想使用斜体字来显示文本的话,请使用 <i> 标签。除此之外,文档中还可以包括用来改变文本显示的级联样式定义。 除强调之外,当引入新的术语或在引用特定类型的术语或概念时作为固定样式的时候,也可以考虑使用 <em> 标签。例如,W3School 经常对重要的术语使用 <em> 标签。<em> 标签可以用来把这些名称和其他斜体字区别开来。

        一个定义列表中可以有多个术语名对应同一个给出的定义,也可有多重定义对应于一个术语名。同时也可以只给出术语名称而不对应定义,反之亦然。当然,这种结构往往并无实际意义,我们可以通过样式表,很轻松的实现这3个标记所达到的效果。

下面是一个例子:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html> 
<head> 
<title> New Document </title> 
<style type="text/css"> 
<!-- 
dl   { background-color:#000;color:#fff;width:100px;} 
dt   { cursor:pointer;width:100%;background-color:#666;} 
.expand  { overflow:visible;} 
.collapse  { height:16px;overflow:hidden;} 
//--> 
</style> 
<script language="JavaScript" type="text/javascript"> 
<!-- 
function toggleDl(dt){ 
var dl=dt.parentNode; 
if("collapse"==dl.className)dl.className="expand"; 
else dl.className="collapse"; 
} 
//--> 
</script> 
</head> 
<body> 
<dl> 
<dt onclick="toggleDl(this)">根结点</dt> 
<dd>子结点1</dd> 
<dd>子结点2</dd> 
<dd>子结点3</dd> 
<dd>子结点4</dd> 
</dl> 
</body> 
</html> 
分享到:
评论

相关推荐

    1.html的语法+基本结构+文档标记,对网页制作感兴趣的很有帮助,浅显易懂,只需要TXT可操作,本人已学,有笔记,大纲,源码

    3、文档设置标记上-格式标( &lt;p&gt;&lt;center&gt;&lt;pre&gt;&lt;li&gt;&lt;ul&gt;&lt;ol&gt;&lt;dl&gt;&lt;dt&gt;&lt;dd&gt;&lt;hr&gt;&lt;div&gt;) 4、文档设置标记下-文本标记(&lt;hn&gt;&lt;font&gt;&lt;b&gt;&lt;i&gt;&lt;sub&gt;&lt;sup&gt;&lt;tt&gt;&lt;cite&gt;&lt;em&gt;&lt;strong&gt;&lt;small&gt;&lt;big&gt;&lt;u&gt;) 5、含有教程笔记,大纲,...

    HTML S1 知识点总结

    北大青鸟s1 HTML 知识点总结 HTML5的优势 世界知名浏览器厂商对HTML5的支持:微软 、Google、苹果、Opera、Mozilla 市场的需求 ...没有顺序,每个&lt;dt&gt;标签、&lt;dd&gt;标签独占一行(块元素) 默认没有标记

    CSS里元素初始化文件html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,

    对css里的元素如:html, body, div, ... strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td的初始化

    HTML:超文本标题语言

    HTML:超文本标题语言 网页基本组成:音频,视频,链接,图片,文字 web标准的好处 1.让web的发展前景更加...&lt;/dl&gt; &lt;dl&gt;是自定义列表,&lt;dd&gt;解释&lt;dt&gt; &lt;table&gt; 表格 &lt;tr&gt; 单元格内文字 ...... ...... &lt;/table&gt;

    定义文本样式 css3与html5源码3种

    dl { width:240px; border:solid 1px #ccc; } dt { padding:8px 8px; background:#7FECAD url(images/green.gif) repeat-x; font-size:13px; text-align:left; font-weight:bold; color:#71790C; margin-...

    HTML5和CSS3价格表翻转切换动画特效.zip

    dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup,  ...

    css 清除浏览器默认样式

    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,...

    京东首页静态模板

    &lt;i class="tab-ico"&gt;&lt;/i&gt; &lt;em class="tab-text"&gt;顶部&lt;/em&gt; &lt;/a&gt; &lt;/div&gt; &lt;div data-type="link" class="J-trigger jdm-toolbar-tab jdm-tbar-tab-feedback"&gt; |keycount|cebianlan_h|feedback"&gt; ...

    HTML 网页设计

    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,nav...

    DesarrolloWeb-Grupo10:网站开发Html5,Css3和JavaScript(第10版)

    更多标签(dl,dt,dd,图,figcaption,表格,thead,tbody,tfoot,tr,th,td,标题,页眉,页脚,导航,主要,部分,文章,一旁,地址,形式,标签,输入(及其不同类型)和按钮(及其不同类型) 在Github上...

    jquery特效 幻灯片效果示例代码

    jquery特效 幻灯片效果,效果图如下: 代码如下: &lt;... /* CSS Document */ body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em{margin:0;padding

    CSS中元素的显示模式

    1.2,块级元素就是会独占一行的元素,例如:p div h ul ol dl li dt dd等 2,行内元素与块级元素有哪些区别?  2.1,行内元素不会独占一行,而块级元素会独占一行; 2.2,行内元素不能设置宽度和高度,它的宽度和...

    html中常用的标签总结(必看)

    内容详细标签: ~标题标签格式化文本下划线(underline)斜体字(italics)引用,通常为斜体&lt;em&gt;强调文本通常为斜体加重文本,通常为黑体设置字体、...&lt;dl&gt;、&lt;dt&gt;和&lt;dd&gt;是定义列表的标签和无序列表和有序列表 表格标签:

    jQuery实现拉动页面固定顶部显示且自动消失(火狐)

    回到顶部:哭泣的小丑 html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, ... tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend, input

    高效整洁CSS代码原则

    dl, dt, dd, ul, ol, li, /* list elements 列表元素 */ pre, /* text formatting elements 文本格式元素 */ form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */ th, td, /* table ...

    完美JQuery图片切换效果的简单实现

    body,ul,li,img,h3,dl,dd,dt,h1{margin:0px;padding:0px;list-style:none;} img{vertical-align: top;} /***大图切换***/ .scroll_view{margin: 0px auto;overflow:hidden;position: relative;} .photo_view li{...

    html-css:回顾一些 HTML5 + CSS 元素和属性

    莱美uso de &lt;ul&gt; e &lt;ol&gt; uso de &lt;dl&gt;, &lt;dt&gt; e &lt;dd&gt; 使用链接&lt;a&gt; propriedade max-width em 标签&lt;picture&gt; 页面上的&lt;video&gt;目录标题, , , &lt;h4&gt; ...

    css重置浏览器字体大小示例分享

    复制代码代码如下:body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p, blockquote,th,td {margin:0; padding:0; } table { border-collapse:collapse; border-spacing:0; } ...

    CSS中基代码base.css一览

    复制代码代码如下: /***** css set*****/ body, div, dl, dt, dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;} table{border-collapse:collapse;border-...

    一个仿糯米弹框效果demo

    代码如下: &lt;!doctype html&gt; ...body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td { margin:0; padding:0; } /* Default Font */ bod

Global site tag (gtag.js) - Google Analytics