9、HTML:有序列表(ol),无序列表(ul),描述列表(dl、dt、dd)详解
1、什么是列表
- 什么是列表?
- 什么是有序列表?
- 什么是无序列表?
上面写的 3 句话就是一个列表,你懂得。。。
2、有序列表
有序列表:英文叫做 ordered list,所以标签也是取这个词组的首字母 ol。ol标签括起来的范围就是有序列表的范围,而里面的每一项都是一个list(列表项),所以,也是取这个单词的一部分,li,作为标签名。如下:
<!--有序列表--><ol><li>苹果</li><li>西瓜</li><li>荔枝</li><li>香蕉</li></ol>
效果如下:
这里的1.2,3,4 并不是我写的,而是自动生成的。
注意:
1、<ol>和</ol>标志着有序列表的开始和结束,而<li>和</li>标签表示这是一个列表项。在有序列表中可以包含多个列表项。
2、有序列表的列表项是有先后顺序的,一般采用数字或字母作为顺序,默认是采用数字顺序。
3、<ol>标签和<li>标签是配合使用,没有单独使用的情况。
4、在<ol>标签内部不能*单独*存在任何其他标签(可以嵌套在li标签中)否则这一项不能作为有序列表的一个列表项,一般情况下只能存在<li>标签(忽略嵌套列表)。
验证举例:
这里可以看出嵌套在 li 标签中的 a 标签是可以生效的,也是有序号的。但是下面的单独的 a 标签就是没有序号的了。
2.1有序列表type属性值
并不是有序列表只能用1、2、3 ……来表示序列。也可以使用下面的方式:
type属性值 | 列表项的序号类型 |
---|---|
1 | 数字1、2、3…… |
a | 小写英文字母a、b、c…… |
A | 大写英文字母A、B、C…… |
i | 小写罗马数字i、ii、iii…… |
I | 大写罗马数字I、II、III…… |
其实只要记住有序列表 ol 有一个type属性就可以了,IDE会提示的(并且学习了css后,就会摒弃这个type属性,使用CSS的list-style-type来实现):
例子如下:
3、无序列表
有序列表英文是 ordered list,那么往它前面加上一个否定前缀 un就成了:unordered list 就成了无序列表了。所以,它使用的就是 ul 作为标签名。同样的,每一项都是一个 list (列表项),所以每一项都是用 li 表示。如下所示:
3.1无序列表的type属性
type属性 | 列表项的表现形式 |
---|---|
circle | 空心圆 |
dise | 实心黑点(默认值) |
square | 实心黑正方形 |
效果举例:
同样的如果是忘记了有哪些属性值,IDE会提示的(如果忘记了是什么效果,一共就三个,一个一个试也是可以的嘛):
4、自定义列表(描述列表)
我们依旧使用我们的习惯套路,首先从标签的名称入手理解它们的作用:
dl:英文全称是definition list,定义列表。
dt:英文全称是definition title,定义标题。
dd:英文全称是definition description,定义描述,也就是定义列表具体内容。
使用案例:
注意事项:
1、<dl>标签用来定义一个描述列表,处于最外层。
2、<dt>与<dd>为同级元素,<dt>定义标题,<dd>定义列表项的具体内容
3、<dt>与<dd>不能相互嵌套。
4、<dt>并不一定位于<dl>子元素的第一位,根据需要可以调整位置。怎么理解这句话呢?我们知道 dt 定义的是标题,如果我们使用的是图片占据第一位呢?这个时候就需要在 dl 里面的列表项中嵌套一个img 标签了,那么还是选 dt 吗?显然是不合理的,因为图片也是属于一个列表项,更具体的说,它就是一个列表项的具体内容,具体表现。所以,选择使用 dd 嵌套使用 img,更为符合。
5、关于标签自带属性说明
标签自带属性的初衷是为了提高开发效率。
但遗憾的是,这些属性在实际开发通常毫无用处,不但外观丑陋,而且它的位置也难以控制。
根本无法满足客户对美观度的需求,所以还是需要通过CSS来对列表进行美化。
6、使用时机举例
如上图所示,三者都还可以将内容完整的体现出来,但是很明显的是,前两者并不是最佳的选择,从第一个列表项可以看出:姓名是对后面所有的列表项的说明,所以选择描述列表是最为合适的。
9、HTML:有序列表(ol),无序列表(ul),描述列表(dl、dt、dd)详解相关推荐
- div+css布局必了解的列表元素ul ol li dl dt dd详解
dt 和dd中可以再加入 ol ul li和p,理解这些以后,在使用div布局的时候,会方便很多,其实w3c提供了很多元素辅助布局都是有它的用处的,而不尽是div. 块级元素div尽量少用,其实和ta ...
- HTML 列表中的dl,dt,dd,ul,li,ol区别及应用
HTML 列表中的dl,dt,dd,ul,li,ol区别及应用 HTML 列表中的dl,dt,dd,ul,li,ol区别及应用 工具/原料 html,dw软件 方法/步骤 1 无序列表 无序列表是 ...
- HTML 列表标签<ol><ul><dl>详解
列表标签概述 特点:整齐.整洁.有序,用来布局会更加自由和方便 列表的分类:无序列表.有序列表.自定义列表 无序列表 无序列表的基本语法格式如下: <ul><li>列表项1&l ...
- CSS-5 列表元素(ol+ul++li+dl+dt+dd)、表格元素、单元格合并、表单元素(input+label+radio+...)、Emmet语法、结构伪类(:nth-child)
目录 1_列表元素 1.1_列表的实现方式 1.2_有序列表 – ol – li 1.3_无序列表 – ul - li 1.4_定义列表 – dl – dt - dd 1.5_ 写前端代码逻辑顺序 2 ...
- DIV+CSS中标签ul ol li dl dt dd用法
ul ol li dl dt dd都是DIV+CSS做网页长用的东西,相当于一棵树的树技,下面就了解一下这些东西的全体用法,本人用dd,dt,dd用得很少,懂得结合使用对做架构是很有好处的哦! DIV ...
- html中dl标签和ul标签,html中dl,dt,dd,ul,li,ol标签区别和使用
html中dl,dt,dd,ul,li,ol标签区别和使用 时间:2013-04-12 21:48 来源:未知 | 作者:易享学习网 | 本文已影响 人 ul: unordered lists ol: ...
- Div+CSS布局入门教程(五) 页面制作-用好border和clear 附加:1.DIV+CSS设计原则 2.DIV+CSS中标签ul ol li dl dt dd用法
这一节里面,主要就是想告诉大家如何使用好border和clear这两个属性. 首先,如果你曾用过table制作网页,你就应该知道,如果要在表格中绘制一条虚线该如何做,那需要制作一个很小的图片来填充,其 ...
- 用标准dl,dt,dd标签抛弃table列表
过去有很多网页设计师喜欢将他们的网页效果图用table布局实现成网页,但是这样做会遇到一个比较麻烦的问题就是,后期调试和维护会相当的困难. 现在,越来越多的前端开发er们开始使用xHTML+CSS替代 ...
- python复制列表元素_Python学习教程:Python列表赋值,复制,深拷贝及5种浅拷贝详解...
Python学习教程:Python列表赋值,复制,深拷贝及5种浅拷贝详解 概述 在列表复制这个问题,看似简单的复制却有着许多的学问,尤其是对新手来说,理所当然的事情却并不如意,比如列表的赋值.复制.浅 ...
- HTML 列表标签、有序列表、无序列表、自定义列表dl dt dd
文章目录 有序列表 无序列表 自定义列表(重点) 总结 有序列表 有序列表即为有排列顺序的列表,其各个列表项会按照-定的顺序排列定义. 在HTML标签中, 标签用于定义有序列表,列表排序以数字来显示, ...
最新文章
- ntoskrnl损坏
- 京东全球购11·11战报:面膜售出430万片,爽肤水销售额是同期7倍
- opencv_imread出错(release/debug、X86/X64)
- UC,qq浏览器强制横屏
- antd 文本域超长问题_一款能快速批量处理SQL文本的软件:NimbleText
- EJB(四)JPA 分布式事务处理
- 求素数——多线程练习
- python必学的模块_Python必学的模块有哪些?
- 使用模拟的单元测试–测试技术5
- 安装Sarge(二) 配置基本系统
- Helm 3 完整教程(二十四):创建和使用子 chart
- webService发布在IIS服务器上
- 20个有用正则表达式
- 在线商城之购物车实现——(附完整代码)
- 软件测试面试题(面试前准备篇)
- Codeforces Problem-705A Hulk
- android远程打电话,Android打电话功能 Android实战教程第三篇之简单实现拨打电话功能...
- 微商大咖龚文祥遭查税:退出微商,微信收款有补税风险?
- Spring Boot框架
- 用于即使在太空中也能随时随地进行编码的移动应用程序
热门文章
- 一起自学SLAM算法:第4章-机器人传感器
- 人脸检测+CNN面部表情识别
- 开创性的区块链操作系统项目——内容所有权和国际象棋
- WireShark基本使用(3)第三章用户界面
- 采样点流量数据提取(代码分享):利用ECMWF开源数据
- 基坑监测日报模板_深基坑工程监测日报表.doc
- civa机器人是什么_【小学英语-Civa机器人】|和Civa机器人一起学习,快乐成长
- ganglia系统监控
- 免费资源分享(五) Unity3D 爆炸 传送 拖尾等粒子特效包
- 十年风雨,一个普通程序员的成长之路(八)不想做技术总监的项目经理,不是好程序员...