语义化HTML:ul、ol和dl
语义化HTML:ul、ol和dl
我爱睡觉 发表于7个月前
语义化HTML:ul、ol和dl
  • 发表于 7个月前
  • 阅读 10
  • 收藏 0
  • 点赞 0
  • 评论 0

标题:腾讯云 新注册用户域名抢购1元起>>>   

一、语义化元素                          

  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/

 

  • 点赞
  • 收藏
  • 分享
粉丝 2
博文 740
码字总数 0