freeCodeCamp 挑战精讲：用 `＜ol＞` 与 `＜li＞` 创建 HTML 有序列表（Create an Ordered List）

freeCodeCamp 挑战精讲用ol与li创建 HTML 有序列表Create an Ordered List【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp本文以 freeCodeCamp 开源课程仓库中的真实挑战 Create an Ordered List 为主体拆解其教学意图、参考代码、通关步骤与 8 条自动化验收测试的实现逻辑。读者可以借此完整掌握 HTML 有序列表numbered list的语法、它与无序列表的差异同时理解 freeCodeCamp 挑战文件的编写结构frontmatter、seed、hints 与 solutions学会如何阅读与解读课程源码中的每一道测试断言。一、这个挑战在 freeCodeCamp 课程体系中的位置Create an Ordered List的挑战文件位于curriculum/challenges/english/blocks/basic-html-and-html5/目录属于经典的「基础 HTML 与 HTML5」课程块block。从课程结构数据可以确认它在体系中的归属链路挑战 IDbad87fee1348bd9aedf08828被登记在课程块清单 curriculum/structure/blocks/basic-html-and-html5.json 的challengeOrder中紧跟在上一题Create a Bulleted Unordered ListIDbad87fee1348bd9aedf08827之后——这正是本挑战把「无序列表ul」扩展为「有序列表ol」的教学衔接点该 block 又隶属于responsive-web-design这个 superblock见 curriculum/structure/superblocks/responsive-web-design.json而responsive-web-design位于 curriculum/structure/curriculum.json 所列出的超课程块首位是经典「响应式 Web 设计认证」路径的第一站。因此本挑战是很多学习者接触 HTML 列表语义的第一步也是最典型的「补全式」交互挑战challengeType 为 0即html对应经典编辑器视图通过测试后提交——见 packages/shared/src/config/challenge-types.ts 中的html、viewTypes与submitTypes定义。二、核心知识点有序列表ol的语法原文档给出的定义非常精炼是理解列表语义的起点HTML 提供了一种用于创建有序列表ordered list即编号列表的专门元素有序列表以开标签ol开始内部可包含任意数量的列表项lilist item最后以闭合标签/ol结束。文档中的经典示例ol liGarfield/li liSylvester/li /ol这段代码会被浏览器渲染成Garfield与Sylvester两条自动编号的列表项默认显示为「1.」「2.」。之所以叫「有序」是因为浏览器会自动为每个li维护一个递增序号顺序本身就是语义信息的一部分比如排行榜、步骤说明、TOP N 排名。与之相对上一挑战介绍的ul无序列表则用项目符号bullet呈现列表项之间没有先后次序含义。二者的元素嵌套规则一致列表项必须直接位于列表容器ol或ul之内且单个列表项可以包含文本、图片、链接乃至另一个嵌套列表等丰富内容。三、原题目标与初始代码题目要求instructions只有一句话Create an ordered list of the top 3 things cats hate the most.为「猫最讨厌的三样东西」创建一个有序列表。在 CatPhotoApp 小应用页面中已经存在一个表示「Things cats love:」猫喜欢的东西的ul无序列表学习者需要紧接着在「Top 3 things cats hate:」标题下方补上一个ol有序列表列出 3 项内容。挑战的初始代码seed如下其中题目已经给出了h2、main、a链接、图片和ul列表唯独「Top 3 things cats hate:」之后是空的h2CatPhotoApp/h2 main pClick here to view more a href#cat photos/a./p a href#img srchttps://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg altA cute orange cat lying on its back./a pThings cats love:/p ul licatnip/li lilaser pointers/li lilasagna/li /ul pTop 3 things cats hate:/p /main注意观察结构无序列表ul下有 3 个非空的lipThings cats love:/p是无序列表的前一个兄弟元素而pTop 3 things cats hate:/p之后到/main之间就是新ol的落点。四、通关步骤与标准解法解题思路分为三步在pTop 3 things cats hate:/p这一行之后、/main之前另起一行写入开标签ol并在其内部放置 3 个非空、各自闭合的li列表项内容可自由发挥比如洗澡、打针、剪指甲等写入闭合标签/ol保证标签配对完整。freeCodeCamp 挑战文件会在# --solutions--区块中附带官方参考答案。本挑战的标准解法将占位内容替换为任意三项即可结构如下h2CatPhotoApp/h2 main pClick here to view more a href#cat photos/a./p a href#img srchttps://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg altA cute orange cat lying on its back./a pThings cats love:/p ul licatnip/li lilaser pointers/li lilasagna/li /ul pTop 3 things cats hate:/p ol lihate 1/li lihate 2/li lihate 3/li /ol /main五、逐条拆解--hints--自动化测试断言本挑战的验收不依赖人工检查而是由浏览器内运行的测试脚本对 DOM 与源代码做断言。把这些断言读懂就等于理解了「什么才算是合格答案」。1. 有序列表必须紧跟指定标题const previousElement document.querySelector(ol).previousElementSibling; assert.match(previousElement.textContent, /Top 3 things cats hate:/i);逻辑页面里必须存在ol取其「前一个兄弟元素」且其文本需匹配/Top 3 things cats hate:/ii忽略大小写。也就是说新列表必须放在正确的位置不能随意挪到页面其他地方。2. 无序列表必须紧跟Things cats love:标题const previousElement document.querySelector(ul).previousElementSibling; assert.match(previousElement.textContent, /Things cats love:/i);防止学习者误改原有ul的位置或删除标题段落。3. 页面只能有一个ul与一个olassert.lengthOf(document.querySelectorAll(ul), 1); assert.lengthOf(document.querySelectorAll(ol), 1);querySelectorAll返回所有匹配元素的集合lengthOf断言其数量必须恰好为 1。这要求学习者在已有结构上补全而不是另起炉灶或重复添加。4.ul与ol内各需恰好 3 个liassert.lengthOf(document.querySelectorAll(ul li), 3); assert.lengthOf(document.querySelectorAll(ol li), 3);注意ul li是后代选择器它统计所有嵌套在ul内部的li。数量必须精确为 3说明「TOP 3」必须名副其实。5. 标签必须成对闭合对ul、ol、li三类元素测试都以「正反统计匹配次数」的方式校验闭合标签assert.match(code, /\/ul/g); assert.strictEqual(code.match(/\/ul/g).length, code.match(/ul/g).length);code是学习者提交的源码字符串。/\/ul/g全局统计闭合标签出现次数/ul/g统计开标签次数二者必须严格相等——防止出现漏写/ul这类「浏览器能容忍、但语义错误」的写法。ol与li采用同样的成对校验assert.match(code, /\/ol/g); assert.strictEqual(code.match(/\/ol/g).length, code.match(/ol/g).length); assert.match(code, /\/li/g); assert.match(code, /li/g); assert.strictEqual(code.match(/\/li/g).length, code.match(/li/g).length);6. 列表项内容不能为空[...document.querySelectorAll(ul li)].forEach((val) assert.isNotEmpty(__helpers.removeWhiteSpace(val.textContent)) );__helpers.removeWhiteSpace是挑战测试运行环境注入的辅助函数从用法可以推断其作用是剔除文本中的空白字符空格、换行、缩进再做isNotEmpty非空断言——即val.textContent在去除纯空白后仍有真实内容。也就是说li /li这类「空壳列表项」是不能过关的ol内的 3 个li同样适用这条规则。六、从文件结构理解 freeCodeCamp 挑战的编写规范细看这个.md文件本身它其实是一种带结构化分区的「可执行课程文档」并非普通说明文章。头部是 YAML frontmatter字段取值本挑战含义idbad87fee1348bd9aedf08828全局唯一挑战 ID也是 block 清单中challengeOrder登记的 IDtitleCreate an Ordered List挑战名称challengeType0挑战类型0对应 HTML 型挑战见 challenge-types.ts采用经典编辑器视图并以运行测试的方式提交videoUrlScrimba 视频地址关联的讲解视频forumTopicId16824对应的论坛讨论主题dashedNamecreate-an-ordered-list供 URL 使用的连字符化名称需匹配 slug 规则正文则按固定顺序使用# --description--、# --instructions--、# --hints--、# --seed--内含## --seed-contents--与# --solutions--分区分别承载「知识讲解」「任务要求」「测试断言」「初始代码」与「参考答案」。这套格式并非约定俗成而是由仓库内的工程化工具强制校验比如 curriculum/schema/challenge-schema.js 就要求challengeType必须是 0–33 之间的数字、dashedName必须通过slugRE正则校验对应的 curriculum/schema/challenge-schema.test.mjs 会逐文件跑校验快照测试。挑战构建与读取逻辑位于 curriculum/src/get-challenges.ts前端侧则由tools/client-plugins/gatsby-source-challenges负责把这类.md吸入页面数据层。对于希望为开源课程贡献新题目或复习旧题的读者而言直接对照本挑战文件与上述 schema 源码是理解「一道合格挑战长什么样」的最短路径。七、小结通过Create an Ordered List这道题可以一次掌握三重能力HTML 语义层面会用olli表达「有顺序的编号列表」并知道它与ul在语义与默认渲染上的区别代码规范层面所有开标签必须成对闭合、列表项内容不能为空、每类列表只需出现一次这些正是 freeCodeCamp 测试体系对新手 HTML 的硬性要求工程阅读层面理解了 challengeType、frontmatter、seed 与 hints 的组织方式具备阅读课程源码与自行验证题目逻辑的基础。如果你能不看答案、独立让页面通过全部 8 条断言那么这道经典的基础 HTML 挑战就算真正拿下了。【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考