简述html的3种列表uloldl,语义化HTML：ul、ol和dl

一、语义化元素

1. ul标签

W3C草案：

The ul element represents an unordered list of items; that is, a list in which changing the order of the items would not change the meaning of list.

语义化

• 元素：表示包含一组无序列表项内容。

在不同的浏览器默认样式均有所不同：

列表项有一些特定的CSS属性：list-style-type(列表项前的图标类型)、list-style-position(列表项前的图标的位置，值范围：outside(默认)和inside)和list-style-image(将图片作为列表项前的图标)。

其中list-style-type的值范围及效果如下(有些浏览器下部分类型无法显示)：

而list-style-image在各浏览器下存在不同程度的bug，因此多数采用在li元素下添加background-image的方式模拟。

2. ol标签

W3C草案：

The ol element represents a list (or sequence) of items; that is, a list in which the items are intentionally ordered, such that changing the order would change the meaning of the list.

语义化

1. 元素：表示包含一组有序列表项内容，若改变列表项顺序则会改变整体的含义。

HTML5中为ol标签添加了reversed(布尔类型，表示列表是上升还是下降排序)和start(整数类型，设置有序列表的起点)属性。

3. dl标签

W3C草案：

The dl element represents a description list.

语义化

用于标识定义列表项，一个 元素可对应0~N个表示定义列表项描述的

元素。示例：

前端技术点

HTML

CSS

JavaScript

Java开发

Java Web

二、 浏览器差异

1. li标签添加display:block后

在Internet Explorer 8, Opera 9, Chrome, Firefox 2 & 3, and Safari下，添加display:block会让有序或无序列表中li元素的项目编号消失。

但在IE6和IE7下，添加display:block项目符号依旧存在：

2. li标签添加float:left后

在IE6和IE7下，给列表项目(没有其他样式)添加float:left将会使列表项水平对齐，同时项目符号(或项目编号)消失。如下图所示，截自IE7浏览器

IE8和其他所有浏览器下，列表项会水平对齐，但是项目符号(或项目编号)仍然可见。

当列表项浮动的时候，我们必须记住另外一个要点，就是列表容器(ul元素)在内部仅有浮动元素时会死翘翘，这在所有的浏览器下都会以相同的方式发生，添加overflow:hidden是解决此问题的方法之一。

为了能在不同浏览器下达到大致相同的float:left效果，最好的方法是是使用display:inline。

3. IE下有"Layout"的有序列表

在IE6和IE7下，如果有序列表中的列表项有“Layout”，则有序列表的数值将不会增加，显示为“1”，如下图所示：

hasLayout属性不能被直接设置，但是如果一个元素设置了宽高，浮动，绝对定位等待就会改变haslayout。

4. IE6&7下的padding和margin

在大部分的浏览器下，为了移除项目符号或项目编号，让内容左侧对齐显示，需要设置左padding为0，但是这在IE6和IE7下并不管用，在IE6，7下需要设置左margin为0取而代之。见下图：

针对这些差异，我们可以通过css reset来最小化浏览器默认样式的差异。

三、参考

http://www.zhangxinxu.com/wordpress/2009/12/html-css%E5%88%97%E8%A1%A8%E5%85%83%E7%B4%A0uloldl%E7%9A%84%E7%A0%94%E7%A9%B6%E4%B8%8E%E5%BA%94%E7%94%A8/