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

2022年10月11日16:05:28 科技 1456

列表标签

列表在各种页面内容展示形式中, 使用频率非常高。

HTML中列表分为以下三种:左边我们称之为有序列表,中间我们称之为无序列表,右边我们称之为自定义列表。这节课我们先来学习有序列表。

零基础教你学前端——14、有序列表 - 天天要闻

看几个例子, markdown 文件中的目录, 购物购票指南, 仪器的使用操作步骤, 百度热搜榜等都是通过列表显示的。

零基础教你学前端——14、有序列表 - 天天要闻

我们发现 这些列表有一个共同特点 每一条内容的前面,都有数字序号。

在HTML中 把这些有顺序的列表清单称为有序列表 它们可以表达显示顺序操作步骤 排行等信息。

有序列表由两个元素组成 元素 ol 和元素 li , 二者是父子关系。 li 标签必须被包裹在 ol 中使用,ol 是由order list 的缩写, 表示有序列表 li 是 list item 的缩写 表示列表, 两个都是双标签。

零基础教你学前端——14、有序列表 - 天天要闻

有序列表的语法是


零基础教你学前端——14、有序列表 - 天天要闻

这里再次强调 为了遵循 W3C 的语法标准,ol 里面只能嵌套 li 如果需要嵌套其他的标签 需放置到 li 标签里面。

这里在 li 标签中放置一些文本。

来做一个案例:要把大象装冰箱,总共分几步?3步!


零基础教你学前端——14、有序列表 - 天天要闻

打开编辑器, 新建 order_list.html文件, 补全基本代码, 在body 里面使用 ctrl + 斜杠( / ) 实现一个注释, 在注释里面添加, 这是有序列表的介绍

本案例需要使用一个ol , 里面包裹三个li, 分别把三个步骤的内容, 输入到对应的 li 标签里面, 把冰箱门打开, 把大象装进去, 把冰箱门带上, 保存。

在浏览器中打开页面, 清楚的看到, 三个步骤前面都自动的添加了序号 1 2 3

零基础教你学前端——14、有序列表 - 天天要闻

零基础教你学前端——14、有序列表 - 天天要闻

在这里列表前面的序号被称之为项目符号,默认有序列表的项目符号取值为自然数,从 1 开始。

需要注意 W3C标准为了兼顾多语种需求 规定了有序列表的项目符号是可以设置的 通过给 ol 标签添加 type 属性来定义 type属性的值可以设置列表项目的符号 需要大家熟记的 type的取值有五种:分别是 A/a/I/i/1 大写A 小写a 大写I 小写 i 数字 1 各自表示 英文字母顺序、 罗马数字顺序、 阿拉伯数字顺序。


零基础教你学前端——14、有序列表 - 天天要闻

返回编辑器, 给 ol 标签, 添加属性type, 属性值设置为大写的字母A (A), 保存。

回到浏览器, 刷新, 原来数字显示的项目符号, 变成了大写 A 开头的字母。

零基础教你学前端——14、有序列表 - 天天要闻

通过给 ol 添加另外一个属性 start 就可以实现起始序号, start 取值为数字序号 不需要添加任何单位。

零基础教你学前端——14、有序列表 - 天天要闻

返回编辑器中 给 ol 再添加一个 start 属性, 取值为6,保存。

零基础教你学前端——14、有序列表 - 天天要闻

回到浏览器 刷新 , 有序列表的项目符号从原来 A 开始 变成了从 F 开始。

零基础教你学前端——14、有序列表 - 天天要闻

文章配套视频:

https://www.bilibili.com/video/BV1oU4y1278g?p=15

科技分类资讯推荐

从聊天机器人到协作伙伴:AI智能体如何重塑企业工作 - 天天要闻

从聊天机器人到协作伙伴:AI智能体如何重塑企业工作

Scott White至今仍对人工智能从新奇技术转变为真正工作伙伴的速度感到惊叹。仅仅一年多前,这位Anthropic公司Claude AI产品负责人目睹了早期AI编程工具甚至无法完成一行代码的窘境。如今,尽管并非专业程序员,他却能亲自构建
小米 16 系列迎最新爆料,Pro 系列镜头模组大改,横向延伸全尺寸设计 - 天天要闻

小米 16 系列迎最新爆料,Pro 系列镜头模组大改,横向延伸全尺寸设计

近日,包括数码闲聊站在内等多个消息源,就下一代旗舰新机纷纷进行了最新爆料,其中小米 16 系列也在近日迎来了最新消息。根据最新爆料来看,小米 16 系列将会在以往的标准版、Pro 版、Ultra 的基础上新增一款 Pro Max 型号。但一一对应来看,新款的小米 16 Pro 即对标标准版 , 为大家熟悉的 6.3 英寸小尺寸旗舰机型。而 1...
魅族 22 系列手机本月到来,提供全新开模小尺寸旗舰版本 - 天天要闻

魅族 22 系列手机本月到来,提供全新开模小尺寸旗舰版本

伴随着时间来到 7 月,各大手机厂商的新机更新计划有所放缓,不过根据多方爆料来看,“小厂代表” 星纪魅族旗下的魅族 22 系列将会在本月与大家见面。目前魅族 22 系列仍然十分 “神秘”,欠缺主要的配置爆料与外观图片作为参考。但根据部分什么爆料者的消息来看,魅族 22 系列将会全新开模,并提供小尺寸旗舰版本可供选择...
vivo X300 Pro 更多细节曝光,大 R 角直面屏,新款大底主摄方案加持 - 天天要闻

vivo X300 Pro 更多细节曝光,大 R 角直面屏,新款大底主摄方案加持

今天数码博主数码闲聊站在与网友互动中,透露了一款搭载联发科天玑 9500 的 “大杯” 工程机的最新进展。参考爆料内容与评论区互动来看,预计为 vivo X300 Pro。除搭载联发科天玑 9500 外,据悉该机一大变化之处在于屏幕部分,根据最新消息来看将会搭载一块大 R 角直屏,不再采用曲面屏或微曲面屏设计。而这也将成为下一代...
数据驱动,柔性智能建造平台助力高效管理 - 天天要闻

数据驱动,柔性智能建造平台助力高效管理

长沙晚报掌上长沙7月1日讯(全媒体记者 刘嘉)6月30日,由长沙市智能建造产业链推进办公室与中建五局三公司联合承办的“创新驱动 智建未来”科技活动举行。该活动不仅展示了长沙在智能建造领域的创新成果,也为行业高质量发展提供了可复制的实践经验。
以前不敢想,机械革命搭配出4959元的RTX5050本,还有2.5K屏 - 天天要闻

以前不敢想,机械革命搭配出4959元的RTX5050本,还有2.5K屏

最近RTX5050本开始大面积登场,很多消费者也想知道,厂商到底能搭配出什么样配置?结果机械革命没有让大家失望,搭配出一个6199元的新品,补贴后价格4959元,再一次刷新新显卡笔记本的价格新低。同时,其配置还不是很潦草,还是很平衡的,让我们来看看。这款本配置了R9 7845HX处理器,12核心,24线程,台积电5nm工艺,Zen4...
中国移动三大核心布局 助力南亚东南亚数字经济新发展 - 天天要闻

中国移动三大核心布局 助力南亚东南亚数字经济新发展

【来源:云南网】6月30日,由云南省人民政府和云南省工业和信息化厅联合举办的面向南亚东南亚数字合作推介会在北京举行,中国移动副总经理陈怀达出席,中国移动数智化部副总经理陶涛发表主题为《建设跨境数据交易高速公路,服务数字信息大通道建设》的演讲