语义化HTML:ul、ol和dl
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/
如果您觉得本文的内容有趣就扫一下吧!捐赠互勉!
关注 - 85
粉丝 - 707
» 下一篇:HTML语义化:HTML5的新标签及IE5.5~9的部分兼容方案
【推荐】加入腾讯云自媒体扶持计划,免费领取域名&服务器
· 十年之后,区块链将重新定义“信任”
· 今日头条首次公布算法原理 称并非一切交给机器
· 全球第一款量产「屏下指纹」手机:全面屏时代最完美的解锁方式?
· 盘点CES上的电视黑科技: 模块化电视、激光电视、柔性屏幕
· 京东宣布成立三大事业群 打造积木型组织拥抱无界零售变革
» 更多新闻...
· 以操作系统的角度述说线程与进程
· 软件测试转型之路
· 门内门外看招聘
· 大道至简,职场上做人做事做管理
» 更多知识库文章...
公告
作品:
iScheme—Scheme解释器
preview.js—纯前端的图片预览组件
语义化HTML:ul、ol和dl相关推荐
- DIV+CSS中标签ul ol li dl dt dd用法
ul ol li dl dt dd都是DIV+CSS做网页长用的东西,相当于一棵树的树技,下面就了解一下这些东西的全体用法,本人用dd,dt,dd用得很少,懂得结合使用对做架构是很有好处的哦! DIV ...
- Div+CSS布局入门教程(五) 页面制作-用好border和clear 附加:1.DIV+CSS设计原则 2.DIV+CSS中标签ul ol li dl dt dd用法
这一节里面,主要就是想告诉大家如何使用好border和clear这两个属性. 首先,如果你曾用过table制作网页,你就应该知道,如果要在表格中绘制一条虚线该如何做,那需要制作一个很小的图片来填充,其 ...
- div+css布局必了解的列表元素ul ol li dl dt dd详解
dt 和dd中可以再加入 ol ul li和p,理解这些以后,在使用div布局的时候,会方便很多,其实w3c提供了很多元素辅助布局都是有它的用处的,而不尽是div. 块级元素div尽量少用,其实和ta ...
- 简述html的3种列表uloldl,语义化HTML:ul、ol和dl
一.语义化元素 1. ul标签 W3C草案: The ul element represents an unordered list of items; that is, a list in whic ...
- 【一篇文章带你掌握HTML中ul、ol和dl列表的使用 - 超详细】
前提 在项目开发过程中,列表是非常常见的,因此列表标签也是我们使用相对频繁的标签,但是当我们遇到列表的时候有没有停顿思考一下,我在这里应该使用html中的哪个列表标签才合理呢? 其实结合css样 ...
- lable、ul、ol、dl和table、fieldset标签
lable标签 有时候,我们希望点击文件的时候,鼠标的光标自动跳到输出框中.这需要使用lable功能 <div><label for="name2">姓名: ...
- html语言dl与ul,HTML中DL、UL、OL用哪个比较好
大家好~ 我是一枚正直纯洁的苦逼程序员!!!!! ul,ol,dl标签是CSS网页布局中常用的列表元素. 列表将具有相似特征或先后顺序的内容按照从上到下的顺序排列起来. 1.ul标签:无序列表始于 ...
- 论ul、ol和dl的区别
1.ul是无序列表,也就是说没有排列限制可以随意加li: <ul> <li>可以随意放置</li> <li>可以随意放置</li> < ...
- HTML 列表中的dl,dt,dd,ul,ol,li区别及应用
1.无序列表 无序列表是一个项目的列表,此列项目使用粗体圆点(通常)进行标记.无序列表始于 <ul> 标签.每个列表项始于 <li>. 2.有序列表 有序列表也是一列项目,列表 ...
最新文章
- 对信号与系统课程的意见与建议
- 在dw下安装zen coding,并对其快捷键进行修改
- 苏宁海量服务器自动化配置运维实践
- css3布局篇(双飞翼)
- Windows下断言的类型及实现
- diskgeniusv4.4.0_一文上手最新Tensorflow2.0系列|TensorFlow2.0安装
- mysql无法连接10061_Day062 连接数据库异常问题记录
- 正则 (?i,m,s,x,g)
- java8 方法引用详解_Java8中如何通过方法引用获取属性名详解
- ZYNQ7020 FPGA如何从Flash启动的详细步骤
- 时间复杂度和空间复杂度 如何计算?
- 计算机自动关机原理,电脑自动关机什么原因 电脑自动关机是怎么回事
- 宜信大数据金融云==宜信==谷文栋==金融科技行业动态系列1
- Ajax请求成功却执行error回调方法(Ajax跨域请求问题)
- 管程法实现生产者消费者问题
- SystemInfo 类
- 河南省南阳市谷歌高清卫星地图下载
- python编程图书批发商店的某本书的零售价是26.5_根据实验指导书,完成实验2的任务一与任务三,使用 实验二(实验报告).docx 完成报告并提交。_学小易找答案...
- 图·思·腾·想·人类的符号
- bugku PWN repeater