freeCodeCamp 实战使用 HTML5 time 元素与 datetime 属性标准化页面中的时间表达【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp本文基于 freeCodeCamp 响应式网页设计认证Responsive Web Design中 Applied Accessibility应用无障碍模块的一道实战挑战标准题文件讲解 HTML5time元素与datetime属性的用法。读完本文你将掌握如何用机器可读的标准化格式标注页面中的日期与时间、如何在无障碍场景中为辅助技术提供可靠数据并能独立完成这道挑战的完整解法与测试验证。挑战背景freeCodeCamp 无障碍课程体系中的定位该挑战属于 freeCodeCamp 课程库中的Applied Accessibility模块。从课程结构文件 responsive-web-design.json 可以看到该模块是 Responsive Web Design 认证 superblock 下的第 4 个 block排在基础 HTML、基础 CSS 与应用视觉设计之后。模块内部的题目顺序由 applied-accessibility.json 中的challengeOrder数组定义。本文对应的挑战 Standardize Times with the HTML5 datetime Attribute 排在第 14 位前面紧邻 Add an Accessible Date Picker使用input typedate构建无障碍日期选择器后面则进入 Make Elements Only Visible to a Screen Reader by Using Custom CSSCSS 视觉隐藏技术。也就是说这是一条围绕日期与时间主题的连续学习链先学习表单中的日期输入控件再学习正文中对时间的语义化标注。该模块所有题目共享一个贯穿始终的 Camper Cat忍者猫主题叙事场景——本页挑战的场景是 Camper Cat 举办《真人快打》Mortal Kombat锦标赛后的问卷调查结果公告。核心概念time 元素与 datetime 属性延续日期主题HTML5 引入了time元素和datetime属性来标准化页面中的时间表达time元素一个行内inline元素用于包裹页面中的日期或时间文本datetime属性承载该日期/时间的标准化格式值。辅助技术如屏幕阅读器访问的正是这个属性值而非元素的可见文本。其核心价值在于即使正文中的时间是用非正式、口语化的方式书写例如 last Wednesdaydatetime属性仍然能提供一份标准化、无歧义的时间表述既帮助辅助设备正确播报也方便搜索引擎和脚本进行机器可读的解析。原文档给出的示例如下pMaster Camper Cat officiated the cage match between Goro and Scorpion time datetime2013-02-13last Wednesday/time, which ended in a draw./p注意可见文本是口语化的 last Wednesday但datetime2013-02-13给出了精确的 ISO 格式日期——这正是人机双友好的写法。datetime属性支持的格式在挑战的起始代码seed中恰好都有体现格式示例说明仅日期datetime2016-09-15形如YYYY-MM-DD本题要求使用日期加时间UTCdatetime2016-08-13T20:01Z完整日期时间T分隔符 Z表示 UTC 时区见 seed 中的评论区时间戳实战题目为调查结果的日期添加 time 标签任务要求Camper Cat 的《真人快打》调查结果出炉了题目要求用time标签包裹文本Thursday, September 15supth/sup并为其添加值为2016-09-15的datetime属性。起始代码seed挑战的编辑区起始代码如下节选自 挑战文件 的--seed--部分body header h1Tournaments/h1 /header article h2Mortal Kombat Tournament Survey Results/h2 !-- Only change code below this line -- pThank you to everyone for responding to Master Camper Cats survey. The best day to host the vaunted Mortal Kombat tournament is Thursday, September 15supth/sup. May the best ninja win!/p !-- Only change code above this line -- section h3Comments:/h3 article pPosted by: Sub-Zero on time datetime2016-08-13T20:01ZAugust 13supth/sup/time/p pJohnny Cage better be there, Ill finish him!/p /article article pPosted by: Doge on time datetime2016-08-15T08:12ZAugust 15supth/sup/time/p pWow, much combat, so mortal./p /article article pPosted by: The Grim Reaper on time datetime2016-08-16T00:00ZAugust 16supth/sup/time/p pLooks like Ill be busy that day./p /article /section /article footercopy; 2018 Camper Cat/footer /body可以看到页面下方的评论区已经用time datetime...正确标注了日期——这就是需要模仿的参照写法而正文中 Thursday, September 15th 这一处还是裸文本等待你的改造。参考解答将目标日期文本用time包裹并加上datetime属性后目标段落应变为pThank you to everyone for responding to Master Camper Cats survey. The best day to host the vaunted Mortal Kombat tournament is time datetime2016-09-15Thursday, September 15supth/sup/time. May the best ninja win!/p完整解答与起始代码的差异仅在于该p元素其余 header、评论区、footer 均保持不变。几个实现要点time必须恰好包裹Thursday, September 15supth/sup这段内容——包含其中的supth/sup上标标签但不要把句尾的句号或前后文字包进去datetime属性值为仅日期格式2016-09-15YYYY-MM-DD与评论区使用的完整日期时间格式不同因为此处文本只表达了某一天没有具体时刻。测试断言如何验证你的答案该挑战的自动判题逻辑位于挑战文件的--before-all--与--hints--部分通过 DOM 查询来验证答案其辅助函数结构如下const getTimeElement () { const pElement [...document.querySelectorAll(article p)] .filter(x x?.textContent?.includes(Thank you to everyone for responding to Master Camper Cats survey.)); return pElement[0] ? pElement[0].querySelector(time) : null; }; const getDatetimeAttr () { const timeElement getTimeElement(); return timeElement?.getAttribute(datetime); };从源码结构看判题器先定位包含 Thank you to everyone... 文本的article p元素再在其中查找time子元素最后读取其datetime属性值。对应的四条断言依次检查// 1. 目标段落中必须存在 time 元素 assert.exists(getTimeElement()); // 2. time 元素内部 HTML 必须精确等于目标文本含 sup 标签 assert.strictEqual(getTimeElement()?.innerHTML?.trim(), Thursday, September 15supth/sup); // 3. datetime 属性不能为空 assert(getDatetimeAttr()?.length ! 0); // 4. datetime 属性值必须精确等于 2016-09-15 assert.equal(getDatetimeAttr(), 2016-09-15);这组断言揭示了两个容易踩坑的细节断言 2 用strictEqual比较innerHTML意味着包裹范围必须分毫不差——多包一个句号、少包一个sup都会失败断言 3 与 4 分开校验属性存在和属性值正确因此即使写成了2016-09-15T00:00Z合法但非题目要求的格式第 4 条仍会失败。为什么这对无障碍很重要time元素的价值在三个层面辅助技术层面屏幕阅读器可以播报datetime属性给出的标准化时间而不是逐字朗读口语化文本语义层面time是 HTML5 的语义化元素它明确告诉浏览器这里的时间是一个时间实体配合datetime形成机器可读的元数据可维护层面正文可以保留自然的语言风格last Wednesday、Thursday, September 15th机器解析则依赖标准化格式两者互不干扰。在 freeCodeCamp 的这套模块中time与上一题的input typedate形成互补前者负责展示层的时间语义化后者负责表单输入层的日期采集。完成本题后下一题仅对屏幕阅读器可见的元素将转向 CSS 视觉隐藏技术sr-only继续延伸视觉呈现与辅助技术访问解耦这一核心无障碍思想。小结HTML5time是行内元素datetime属性存放标准化的日期/时间值是辅助设备实际访问的数据源datetime可取仅日期格式2016-09-15或完整日期时间格式2016-08-13T20:01Z应按文本实际表达的精度选择本题的关键是把time datetime2016-09-15精确包裹在Thursday, September 15supth/sup周围判题器会通过querySelector与getAttribute(datetime)做精确比对相关素材均可在当前仓库中查阅挑战文件、模块顺序配置 以及 superblock 结构。【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 freeCodeCamp 实战：使用 HTML5 time 元素与 datetime 属性标准化页面中的时间表达
freeCodeCamp 实战使用 HTML5 time 元素与 datetime 属性标准化页面中的时间表达【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp本文基于 freeCodeCamp 响应式网页设计认证Responsive Web Design中 Applied Accessibility应用无障碍模块的一道实战挑战标准题文件讲解 HTML5time元素与datetime属性的用法。读完本文你将掌握如何用机器可读的标准化格式标注页面中的日期与时间、如何在无障碍场景中为辅助技术提供可靠数据并能独立完成这道挑战的完整解法与测试验证。挑战背景freeCodeCamp 无障碍课程体系中的定位该挑战属于 freeCodeCamp 课程库中的Applied Accessibility模块。从课程结构文件 responsive-web-design.json 可以看到该模块是 Responsive Web Design 认证 superblock 下的第 4 个 block排在基础 HTML、基础 CSS 与应用视觉设计之后。模块内部的题目顺序由 applied-accessibility.json 中的challengeOrder数组定义。本文对应的挑战 Standardize Times with the HTML5 datetime Attribute 排在第 14 位前面紧邻 Add an Accessible Date Picker使用input typedate构建无障碍日期选择器后面则进入 Make Elements Only Visible to a Screen Reader by Using Custom CSSCSS 视觉隐藏技术。也就是说这是一条围绕日期与时间主题的连续学习链先学习表单中的日期输入控件再学习正文中对时间的语义化标注。该模块所有题目共享一个贯穿始终的 Camper Cat忍者猫主题叙事场景——本页挑战的场景是 Camper Cat 举办《真人快打》Mortal Kombat锦标赛后的问卷调查结果公告。核心概念time 元素与 datetime 属性延续日期主题HTML5 引入了time元素和datetime属性来标准化页面中的时间表达time元素一个行内inline元素用于包裹页面中的日期或时间文本datetime属性承载该日期/时间的标准化格式值。辅助技术如屏幕阅读器访问的正是这个属性值而非元素的可见文本。其核心价值在于即使正文中的时间是用非正式、口语化的方式书写例如 last Wednesdaydatetime属性仍然能提供一份标准化、无歧义的时间表述既帮助辅助设备正确播报也方便搜索引擎和脚本进行机器可读的解析。原文档给出的示例如下pMaster Camper Cat officiated the cage match between Goro and Scorpion time datetime2013-02-13last Wednesday/time, which ended in a draw./p注意可见文本是口语化的 last Wednesday但datetime2013-02-13给出了精确的 ISO 格式日期——这正是人机双友好的写法。datetime属性支持的格式在挑战的起始代码seed中恰好都有体现格式示例说明仅日期datetime2016-09-15形如YYYY-MM-DD本题要求使用日期加时间UTCdatetime2016-08-13T20:01Z完整日期时间T分隔符 Z表示 UTC 时区见 seed 中的评论区时间戳实战题目为调查结果的日期添加 time 标签任务要求Camper Cat 的《真人快打》调查结果出炉了题目要求用time标签包裹文本Thursday, September 15supth/sup并为其添加值为2016-09-15的datetime属性。起始代码seed挑战的编辑区起始代码如下节选自 挑战文件 的--seed--部分body header h1Tournaments/h1 /header article h2Mortal Kombat Tournament Survey Results/h2 !-- Only change code below this line -- pThank you to everyone for responding to Master Camper Cats survey. The best day to host the vaunted Mortal Kombat tournament is Thursday, September 15supth/sup. May the best ninja win!/p !-- Only change code above this line -- section h3Comments:/h3 article pPosted by: Sub-Zero on time datetime2016-08-13T20:01ZAugust 13supth/sup/time/p pJohnny Cage better be there, Ill finish him!/p /article article pPosted by: Doge on time datetime2016-08-15T08:12ZAugust 15supth/sup/time/p pWow, much combat, so mortal./p /article article pPosted by: The Grim Reaper on time datetime2016-08-16T00:00ZAugust 16supth/sup/time/p pLooks like Ill be busy that day./p /article /section /article footercopy; 2018 Camper Cat/footer /body可以看到页面下方的评论区已经用time datetime...正确标注了日期——这就是需要模仿的参照写法而正文中 Thursday, September 15th 这一处还是裸文本等待你的改造。参考解答将目标日期文本用time包裹并加上datetime属性后目标段落应变为pThank you to everyone for responding to Master Camper Cats survey. The best day to host the vaunted Mortal Kombat tournament is time datetime2016-09-15Thursday, September 15supth/sup/time. May the best ninja win!/p完整解答与起始代码的差异仅在于该p元素其余 header、评论区、footer 均保持不变。几个实现要点time必须恰好包裹Thursday, September 15supth/sup这段内容——包含其中的supth/sup上标标签但不要把句尾的句号或前后文字包进去datetime属性值为仅日期格式2016-09-15YYYY-MM-DD与评论区使用的完整日期时间格式不同因为此处文本只表达了某一天没有具体时刻。测试断言如何验证你的答案该挑战的自动判题逻辑位于挑战文件的--before-all--与--hints--部分通过 DOM 查询来验证答案其辅助函数结构如下const getTimeElement () { const pElement [...document.querySelectorAll(article p)] .filter(x x?.textContent?.includes(Thank you to everyone for responding to Master Camper Cats survey.)); return pElement[0] ? pElement[0].querySelector(time) : null; }; const getDatetimeAttr () { const timeElement getTimeElement(); return timeElement?.getAttribute(datetime); };从源码结构看判题器先定位包含 Thank you to everyone... 文本的article p元素再在其中查找time子元素最后读取其datetime属性值。对应的四条断言依次检查// 1. 目标段落中必须存在 time 元素 assert.exists(getTimeElement()); // 2. time 元素内部 HTML 必须精确等于目标文本含 sup 标签 assert.strictEqual(getTimeElement()?.innerHTML?.trim(), Thursday, September 15supth/sup); // 3. datetime 属性不能为空 assert(getDatetimeAttr()?.length ! 0); // 4. datetime 属性值必须精确等于 2016-09-15 assert.equal(getDatetimeAttr(), 2016-09-15);这组断言揭示了两个容易踩坑的细节断言 2 用strictEqual比较innerHTML意味着包裹范围必须分毫不差——多包一个句号、少包一个sup都会失败断言 3 与 4 分开校验属性存在和属性值正确因此即使写成了2016-09-15T00:00Z合法但非题目要求的格式第 4 条仍会失败。为什么这对无障碍很重要time元素的价值在三个层面辅助技术层面屏幕阅读器可以播报datetime属性给出的标准化时间而不是逐字朗读口语化文本语义层面time是 HTML5 的语义化元素它明确告诉浏览器这里的时间是一个时间实体配合datetime形成机器可读的元数据可维护层面正文可以保留自然的语言风格last Wednesday、Thursday, September 15th机器解析则依赖标准化格式两者互不干扰。在 freeCodeCamp 的这套模块中time与上一题的input typedate形成互补前者负责展示层的时间语义化后者负责表单输入层的日期采集。完成本题后下一题仅对屏幕阅读器可见的元素将转向 CSS 视觉隐藏技术sr-only继续延伸视觉呈现与辅助技术访问解耦这一核心无障碍思想。小结HTML5time是行内元素datetime属性存放标准化的日期/时间值是辅助设备实际访问的数据源datetime可取仅日期格式2016-09-15或完整日期时间格式2016-08-13T20:01Z应按文本实际表达的精度选择本题的关键是把time datetime2016-09-15精确包裹在Thursday, September 15supth/sup周围判题器会通过querySelector与getAttribute(datetime)做精确比对相关素材均可在当前仓库中查阅挑战文件、模块顺序配置 以及 superblock 结构。【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考