当前位置: 首页 > Web前端 > HTML5

零基础教你学前端——14.有序列表

时间:2023-04-05 01:14:12 HTML5

列表在各种页面内容展示形式中的使用非常频繁。HTML中的列表分为以下三种类型:左边我们称之为有序列表,中间我们称之为无序列表,右边我们称之为自定义列表。在本课中,我们将首先学习有序列表。看几个例子,markdown文件中的目录、购物购票指南、仪器的操作步骤、百度热搜榜等都是通过列表展示出来的。我们发现这些列表有一个共同的特点,就是每一项内容前面都有一个数字序号。在HTML中,这些有序列表被称为有序列表,它们可以表达和显示顺序操作步骤和排名等信息。有序列表由两个元素组成,元素ol和元素li,它们是父子关系。li标签必须包裹在ol中。ol是orderlist的缩写,意思是有序列表。li是listitem的缩写,意思是列表。两者都是双标。这里再次强调有序列表的语法。为了遵循W3C的语法标准,ol中只能嵌套li。如果其他标签需要嵌套,则必须放在li标签中。在这里,我们在li标签内放置了一些文本。打个比方:把大象放进冰箱一共有多少步?3个步骤!打开编辑器,新建一个order_list.html文件,完成基本代码,在正文中使用ctrl+斜线(/)实现注释,在注释中添加,这就是有序列表的介绍。这种情况就需要用到一个ol,里面包裹了三个li,把三个步骤的内容分别输入对应的li标签,打开冰箱门,把大象放进去,关上冰箱门,保存。在浏览器中打开页面,可以清楚的看到三个步骤的前面自动添加了序号123。此处列表前面的序号称为项目符号。默认情况下,有序列表的项目符号是自然数。从1开始,需要注意的是,W3C标准规定可以设置有序列表的项目符号,是为了兼顾多种语言的需要。type属性的值可以通过将type属性添加到ol标签来定义。需要记住列表项的符号。type的取值有:五种:分别是A/a/I/i/1大写A小写a大写I小写i数字1分别代表英文字母顺序,罗马数字顺序,阿拉伯数字顺序。返回编辑器,在ol标签中添加属性类型,将属性值设置为大写字母A(A),保存。回到浏览器,刷新,原来编号里显示的子弹变成了大写A开头的字母。起始序号可以通过在ol中再增加一个属性start来实现,start的值为一个数字序号数而不加任何单位。返回编辑器,在ol中再添加一个start属性,设置值为6,保存。回到浏览器刷新,有序列表的项目符号从A开始到F开始。文章配套视频点我