文档章节

语义化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

没有更多内容

加载失败,请刷新页面

加载更多

day152-2018-11-19-英语流利阅读

“超级食物”竟然是营销噱头? Daniel 2018-11-19 1.今日导读 近几年来,超级食物 superfoods 开始逐渐走红。不难发现,越来越多的轻食餐厅也在不断推出以超级食物为主打食材的健康料理,像是...

飞鱼说编程
22分钟前
1
0
SpringBoot源码:启动过程分析(二)

接着上篇继续分析 SpringBoot 的启动过程。 SpringBoot的版本为:2.1.0 release,最新版本。 一.时序图 一样的,我们先把时序图贴上来,方便理解: 二.源码分析 回顾一下,前面我们分析到了下...

Jacktanger
昨天
1
0
Apache防盗链配置,Directory访问控制,FilesMatch进行访问控制

防盗链配置 通过限制referer来实现防盗链的功能 配置前,使用curl -e 指定referer [root@test-a test-webroot]# curl -e "http://www.test.com/1.html" -x127.0.0.1:80 "www.test.com/1.jpg......

野雪球
昨天
2
0
RxJava threading

因为Rx针对异步系统设计,并且Rx也自然支持多线程,所以新的Rx开发人员有时会假设Rx默认是多线程的。在其他任何事情之前,重要的是澄清Rx默认是单线程的。 除非另有说明,否则每次调用onNex...

woshixin
昨天
0
0
Python的安装及文件类型、变量

一、为什么学习python 服务于大数据、人工智能、自动化运维。 简单易学 代码简洁 薪资高 近几年越来越火 二、Python的安装 linux 系统默认安装, CentOS7 默认安装了python2.7 安装ipython y...

枫叶云
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部