蓝天资源网
当前位置:蓝天资源网 / 技术教程 / 正文

其他技术html基础教程-列表

作者:忆笙发布时间:2021-08-30 00:43浏览数量:944次评论数量:0次

HTML基础教程为什么直接从列表开始呢?
因为芥子已经发了更基础的然后不更新所以我就直接从列表开始了。这一期先教有序列表其他下一期教。还有就是我现在也还在学习可能帖子有一些问题,有问题及时说好纠正我自己也不会误导其他人。

列表是网页中最常用的一种数据排列方式,我们在浏览网页时,会到看到各种列表的身影,如下图所示。

在HTML中,列表共有3种:有序列表、无序列表和定义列表。

在有序列表中,列表项之间有先后顺序之分。在无序列表中,列表项之间是没有先后顺序之分的。而定义列表是一组带有特殊含义的列表,一个列表项中包含“条件”和“列表”两部分。

在HTML中,有序列表中的各个列表项是有顺序的。有序列表从

开始,到结束。有序列表的列表项是有先后顺序的,一般采用数字或字母作为顺序,默认是采用数字顺序。

语法:


说明:

ol,即ordered list(有序列表);li,即list(列表项)。理解标签的语义更有利于你记忆。

在该语法中,

和标志着有序列表的开始和结束,而和标签表示这是一个列表项。一个有序列表可以包含多个列表项。

注意,ol标签和li标签是配合一起使用,不可以单独使用,而且标签的子标签只能是li标签,不能是其他标签。

举例:
有序列表

HTML
CSS
JavaScript
jQuery
Vue.js

浏览器预览效果如下图所示。

分析:
有些初学的小伙伴会问,是不是只能使用数字来表示列表项的顺序?能不能用“a、b、c”这种英文字母的形式来表示顺序呢?当然可以!这就需要用到下面介绍的type属性了。

二、type属性
在HTML中,我们可以使用type属性来改变列表项符号。默认情况下,有序列表使用数字作为列表项符号。

语法:


列表项
列表项
列表项

说明:
在有序列表中,type属性取值如下表所示。

1 阿拉伯数字:1、2、3……
a 小写英文字母:a、b、c……
A 大写英文字母:A、B、C……
i 小写罗马数字:i、ii、iii……
I 大写罗马数字:I、II、III……

对于有序列表的列表项对于有序列表的列表项符号,等学了CSS之后,我们可以放弃type属性,而使用list-style-type属性。

举例:

type属性

HTML
CSS
JavaScript
jQuery
Vue.js

浏览器预览效果如下图所示。

忆笙

忆笙 主页 联系他吧

人间山河远阔,只想与你同行。

欢迎 发表评论: