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:; padding:;}
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;
}