一、語義化元素

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.

語義化

元素：表示包含一組有序列表項內容，若改變列表項順序則會改變整體的含義。

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/

總結

以上是生活随笔為你收集整理的简述html的3种列表uloldl,语义化HTML：ul、ol和dl的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。