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

<ol>标签-有序列表

定义和用法:

<ol>标签定义有序列表。

HTML 与 XHTML 之间的差异

在 HTML 4.01 中,ol 元素的 "compact"、"start" 以及 "type" 属性是不被赞成使用的。

在 XHTML 1.0 Strict DTD 中,ol 元素的 "compact"、"start" 以及 "type" 属性是不被支持的。

属性:

reversed -- HTML5中的新属性。

值:reversed

reversed 属性是逻辑属性。

当使用该属性时,它规定列表属性为降序 (9, 8, 7...),而不是升序 (1, 2, 3...)。

目前只有 Chrome 和 Safari 6 支持 reversed 属性。

<ul>标签  -无序列表

定义和用法:

<ul> 标签定义无序列表。

HTML 与 XHTML 之间的差异

在 HTML 4.01 中,ul 元素的 "compact" 和 "type" 属性是不被赞成使用的。

在 XHTML 1.0 Strict DTD 中,ul 元素的 "compact" 和 "type" 属性是不被支持的。

提示和注释:

提示:请使用样式来定义列表的类型。

<li>标签  --列表项目

定义和用法:

<li> 标签定义列表项目。

<li> 标签可用在有序列表 (<ol>) 和无序列表 (<ul>) 中。

HTML 与 XHTML 之间的差异

在 HTML 4.01 中,li 元素的 "type" 和 "value" 属性是不被赞成使用的。

在 XHTML 1.0 Strict DTD 中,li 元素的 "type" 和 "value" 属性是不被支持的。

css样式:

1.   list-style-type           属性设置列表项标记的类型。

值:

none 无标记
disc 默认。标记是实心圆。                                                   (无序列表)
circle 标记是空心圆。                                                            (无序列表)
square 标记是实心方块。                                                         (无序列表)
decimal 标记是数字。                                                               (有序列表)
decimal-leading-zero     0开头的数字标记。(01,02,03等。)                         (有序列表)
lower-roman  小写罗马数字(i,ii,iii,iv,v,等。)                                   (有序列表)
upper-roman 大写罗马数字(I,II,III,IV,V,等。)                                 (有序列表)
lower-alpha 小写英文字母(a,b,c,d,等。)                                     (有序列表)
upper-alpha 大写英文字母(A,B,C,D,等。)                                    (有序列表)
lower-greek 小写希腊字母(alpha,beta,gamma,等。)                    (有序列表)
lower-latin 小写拉丁字母(a,b,c,d,e,等。)                                    (有序列表)
upper-latin 大写拉丁字母(A,B,C,D,E,等。)                                   (有序列表)
hebrew 传统的希伯来编号方式。                                                (有序列表)
armenian 传统的亚美尼亚编号方式。                                             (有序列表)
georgian 传统的乔治亚编号方式(an,ban,gan,等。)                    (有序列表)
cjk-ideoguaphic 简单的表意数字。                                                         (有序列表)
hiragana  标记是: a, i, u, e, o, ka, ki, 等。(日文片假名)            (有序列表)
katakana  标记是:A, I, U, E, O, KA, KI, 等。(日文片假名)          (有序列表)
hiragana-iroha  标记是:i, ro, ha, ni, ho, he, to, 等。(日文片假名)     (有序列表)
katakana-iroha  标记是:I, RO, HA, NI, HO, HE, TO, 等。(日文片假名)(有序列表)
ul.circle {list-style-type:circle;}
ul.square {list-style-type:square;}
ol.upper-roman {list-style-type:upper-roman;}
ol.lower-alpha {list-style-type:lower-alpha;}

2.  list-style-position        设置在何处放置列表项标记。

可能的值:


inside


列表项目标记放置在文本以内,且环绕文本根据标记对齐。


outside


默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外,且环绕文本不根据标记对齐。


inherit


规定应该从父元素继承 list-style-position 属性的值。

注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。

说明

该属性用于声明列表标志相对于列表项内容的位置。外部 (outside) 标志会放在离列表项边框边界一定距离处,不过这距离在 CSS 中未定义。内部 (inside) 标志处理为好像它们是插入在列表项内容最前面的行内元素一样。

3.   list-style-image   使用图像来替换列表项的标记。

可能的值:


URL


图像的路径。


none


默认。无图形被显示。


inherit


规定应该从父元素继承 list-style-image 属性的值。

注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。

说明

这个属性指定作为一个有序或无序列表项标志的图像。图像相对于列表项内容的放置位置通常使用 list-style-position 属性控制。

注释:请始终规定一个 "list-style-type" 属性以防图像不可用。

ol
  {
  list-style-image:url("/i/arrow.gif");
  list-style-type:square;
  }

<dl>标签--定义列表

定义和用法:

<dl> 标签定义了定义列表(definition list)。

<dl> 标签用于结合 <dt> (定义列表中的项目)和 <dd> (描述列表中的项目)。

<dt>标签

定义和用法:

<dt> 标签定义了定义列表中的项目(即术语部分)。

<dt>标签表示内容块的标题。

<dd>标签

定义和用法:

<dd> 在定义列表中定义条目的定义部分。

<dd>标签表示内容块。

例子:效果图:

计算机
用来计算的仪器 ... ...
显示器
以视觉方式显示信息的装置 ... ...
<dl>
   <dt>计算机</dt>
   <dd>用来计算的仪器 ... ...</dd>
   <dt>显示器</dt>
   <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

 dl dt dd 标签的用法

使用了dt dd最外层就必须使用dl包裹,此组合标签我们也又叫表格标签,与table表格类似组合标签,故名我们也叫dl表格。
为常用标题+列表型标签。如没有对dl dt dd标签初始CSS样式,默认dd列表内容会一定缩进。

首先dt和dd是放于dl标签内,标签dt与dd处于dl下相同级。也就是dt不能放入dd内,dd不能放入dt内。在dl下,dt与dd处于同级标签。DD标签可以若干。同时不能不加dl地单独使用dt标签或dd标签。

< dl></dl >用来创建一个普通的列表
< dt>< /dt>用来创建列表中的上层项目
<dd>< /dd>用来创建列表中最下层项目
< dt>< /dt>和< dd>< /dd>都必须放在< dl></dl >标志对之间。
解释下这里为什么说dt和dd分别创建上层和下层的项目。dt和dd如果不加浮动的话,是自己在一行的,也就是块元素。所以这里写的是上层和下层。

例子:

效果图:

body{font-size:12px; line-height:1.8; width:900px; marigin:auto;}
*{margin:0; padding:0;}
dl{width:350px; height:170px; padding:20px; marigin-left:20px; background:white; background-color:green;}
dt{float:left; width:60px;}
dd{float:left; width:290px;}
<dl>
<dt>商品名称:</dt>
<dd><strong>【好大的一只啊】</strong>优惠:<span>8.5折</span></dd>
<dt>商品简介:</dt>
<dd>商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称</dd>
<dt>店铺地址:</dt>
<dd>商品名称</dd>
<dt>联系电话</dt>
<dd>99999999999</dd>

浏览器兼容问题:

列表样式
IE默认为40px,通过ul、ol的margin属性设置
FF默认为40px,通过ul、ol的padding属性设置
dl无缩进,但起内部的说明元素dd默认缩进40px,而名称元素dt没有缩进。
要清除列表样式,一般可以设置
ul,
ol, dd {
  
list-style:none;     这一句是取消列表样式。
  
margin:0;
   padding:0;
}

时间: 2024-08-04 19:39:52

HTML 列表 <ol><ul><li><dl><dt><dd>的相关文章

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

HTML 列表中的dl,dt,dd,ul,li,ol区别及应用

HTML 列表中的dl,dt,dd,ul,li,ol区别及应用 工具/原料 html,dw软件 方法/步骤 1 无序列表 无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记. 无序列表始于 <ul> 标签.每个列表项始于 <li>. 2 有序列表 同样,有序列表也是一列项目,列表项目使用数字进行标记. 有序列表始于 <ol> 标签.每个列表项始于 <li> 标签. 3 定义列表 自定义列表不仅仅是一列项目,而是项目及其注释的组合. 自定

ol,li,ul,dl,dt,dd

块级元素div尽量少用,其实和table一样,嵌套越少越好,它也是会影响速度的! ol 有序列表. <ol> <li>……</li> <li>……</li> <li>……</li> </ol> 表现为: 1…… 2…… 3…… ul 无序列表,表现为li前面是大圆点而不是123 <ul> <li>……</li> <li>……</li> </ul&

dl,dt,dd标签的使用

dl就是定义一个列表 dt说明白了就是这个列表的标题dd就是内容,能缩进和UL,OL性质差不多 <dl> <dt>标题标题</dt> <dd>内容内容</dd> <dd>内容内容</dd> </dl> dl,dt,dd是一个解释型的列表比较常用的如: <dl> <dd><img src=”图片路径” alt=”" /></dd> <dt>图片

css , dl , dt , dd 的使用. calc

dl .dt, dd 虽然很少使用, 但是 有时使用会有 更好的效果: 一: 展示图片: ------------------------- 代码: 1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>dl,dt,dd的使用</title> 6 <style type=&quo

html系列教程--ol ul li

<li> 标签:配合ol,ul实现有序,无序列表以及导航实现. demo: <ol>    <li>Coffee</li>    <li>Tea</li>    <li>Milk</li> </ol> <ul>    <li>Coffee</li>    <li>Tea</li>    <li>Milk</li> &

html中,dl,dt,dd怎么使用

1,定义:<dl> <dt> <dd>是一组合标签,使用了dt dd最外层就必须使用dl包裹,此组合标签我们也又叫表格标签,与table表格类似组合标签,故名我们也叫dl表格.<dl><dt></dt><dd></dd></dl>为常用标题+列表型标签.如没有对dl dt dd标签初始CSS样式,默认dd列表内容会一定缩进.2,用法: <dl><dt>列表标题</dt&

dl dt dd标签

<dl>标记定义了一个定义列表,定义列表中的条目是通过使用<dt>标记(“definition title”,定义标题)和<dd>标记(“definition description”,定义描述)创建的.<dt>给出了术语名,<dd>标记给出了术语的定义.也就是说<dt>用来创建列表中的上层项目,<dd>用来创建列表中最下层项目,<dt>和<dd>都必须放在<dl>< /dl>

HTML 列表中的dl,dt,dd,ul,li,ol区别

1.无序列表 无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记. 无序列表始于 <ul> 标签.每个列表项始于 <li>. 2.有序列表 同样,有序列表也是一列项目,列表项目使用数字进行标记. 有序列表始于 <ol> 标签.每个列表项始于 <li> 标签. 3.定义列表 自定义列表不仅仅是一列项目,而是项目及其注释的组合. 自定义列表以 <dl> 标签开始.每个自定义列表项以 <dt> 开始.每个自定义列表项的