一、語義化元素
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.W3C specification
語義化<ul>元素：表示包含一組無序列表項內容。
在不同的瀏覽器默認樣式均有所不同：
列表項有一些特定的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.W3C specification
語義化<ol>元素：表示包含一組有序列表項內容，若改變列表項順序則會改變整體的含義。
HTML5中為ol標簽添加了reversed（布爾類型，表示列表是上升還是下降排序）和start（整數類型，設置有序列表的起點）屬性。
3. dl標簽
W3C草案：
The dl element represents a description list.W3C specification
語義化<dl>元素：表示包含一組定義列表項內容。內部包含1到N個子元素<dt>用于標識定義列表項，一個<dt>元素可對應0~N個表示定義列表項描述的<dd>元素。示例：
<dl> <dt>前端技術點</dt> <dd>HTML</dd> <dd>CSS</dd> <dd>JavaScript</dd> <dt>Java開發</dt> <dd>Java Web</dd> </dl>
二、 瀏覽器差異
以下內容均來自張鑫旭的《HTML CSS列表元素ul,ol,dl的研究與應用》
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/
文章列表
留言列表
