文档章节

语义化HTML:ul、ol和dl

我爱睡觉
 我爱睡觉
发布于 2017/06/24 17:41
字数 963
阅读 15
收藏 0

一、语义化元素                          

  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/

 

本文转载自:http://www.cnblogs.com/fsjohnhuang/p/4174760.html

我爱睡觉
粉丝 3
博文 2120
码字总数 0
作品 0
南昌
HTML 分组元素

学习要点 分组元素总汇 分组元素解析 分组:就是用来组织相关内容的HTML5元素,清晰有效的进行归类 一、分组元素总汇 二、分组元素解析 1、< p > 建立段落 这是一个段落 这也是一个段落 解释...

xiaoxiaobukuang
2017/09/28
0
0
CSS之列表标签

1 无序列表 无序列表,用来表示一个列表的语义,并且每个项目和每个项目之间,是不分先后的。 ul就是英语unordered list,“无序列表”的意思。 li 就是英语list item , “列表项”的意思。...

mr_伍先生
2016/12/25
0
0
目前比较全的CSS重设(reset)方法总结

在当今网页设计/开发实践中,使用CSS来为语义化的(X)HTML标记添加样式风格是重要的关键。在设计师们的梦想中都存在着这样的一个完美世界:所有的浏览器都能够理解和适用多有CSS规则,并且呈现...

晨曦之光
2012/03/09
0
0
HTML、CSS、Javascript基础及规范

百度JavaScript/HTML/CSS编码规范: JavaScript: http://gitlab.baidu.com/fe/spec/blob/master/javascript.md HTML: http://gitlab.baidu.com/fe/spec/blob/master/html.md CSS: http:/......

页疑
2014/09/19
0
0
HTML4.0标准语法--文字布局

行的控制 段(Paragraph) (可以看作是空行) 你好吗? 很好。 你好吗? 很好。 换行 你好吗? 很好。 你好吗? 很好。 不换行 请改变您浏览器窗口的宽度, 使之小于这一行的宽度, 看看这个标记...

晨曦之光
2012/03/09
56
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

这些Spring中的设计模式,你都知道吗?

设计模式作为工作学习中的枕边书,却时常处于勤说不用的尴尬境地,也不是我们时常忘记,只是一直没有记忆。 Spring作为业界的经典框架,无论是在架构设计方面,还是在代码编写方面,都堪称行...

Java填坑之路
35分钟前
1
0
Spring Aop原理之Advisor过滤

在上文(Spring Aop之Advisor解析)中我们讲到,Spring Aop对目标bean的代理主要分为三个步骤:获取所有的Advisor,过滤当前bean可应用的Advisor和使用Advisor为当前bean生成代理对象,并且上文...

爱宝贝丶
46分钟前
0
0
JMockit学习教程

1 JMockit中文网 我觉得如果仅仅是开发自测的话,把JMockit中文网认真看一遍,就可以在项目中使用JMockit了。 http://jmockit.cn/index.htm 2 JMockit中文教程 官方文档中文版。对于不喜欢看...

SuperHeroes
58分钟前
0
0
Linux服务器几乎从不采用Arch Linux?

我们见得多的Linux服务器系统一般都是什么Ubuntu Server啊,什么Cent OS啊,什么Fedora啊,或者企业采用的Red Hat啊,为什么几乎没有Arch Linux呢?下面我将从若干个方面指出Arch Linux在服务...

linux-tao
今天
0
0
js 函数柯里化 闭包

参考 https://mp.weixin.qq.com/s/GEHL3jarDdAAcr5tQGjmDg 一个统计求和的函数 需要知道整个数组的信息,然后遍历求值 function countMoney() { let money = 0 // 温馨提示:arguments...

阿豪boy
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部