freeCodeCamp HTML 入门课程深入理解!DOCTYPE html文档声明挑战【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp本篇技术指南围绕 freeCodeCamp 课程中 “Declare the Doctype of an HTML Document” 这一交互式编程挑战展开结合开源仓库中该挑战的源 Markdown 文件 587d78aa367417b2b2512aed.md 及对应的挑战构建与测试基础设施系统讲解!DOCTYPE html声明的语法、位置与大小写规则以及它与html、head、body共同构成的 HTML 文档骨架。读完本文你将掌握标准 HTML5 文档最小结构的写法并理解 freeCodeCamp 是如何用自动化测试来判定这类挑战“通过”的。一、挑战定位Basic HTML 与 HTML5 模块中的承上启下关键一环在 freeCodeCamp 课程体系中这一挑战位于basic-html-and-html5基础 HTML 与 HTML5模块。模块顺序由 basic-html-and-html5.json 定义在 28 道题中本文讨论的 “Declare the Doctype of an HTML Document” 排在倒数第二index 27紧随其后的是 “Define the Head and Body of an HTML Document”index 28。这个位置很有深意此前约 27 道挑战已经带学习者掌握了各类具体 HTML 元素——从h1、h2标题到段落p、链接a、图片img、表单form、列表、单选按钮与复选框等。但正如此前教程在文档中明确指出的仅仅会使用单个元素是不够的有些元素负责为整张页面提供总体结构且应当出现在每一个 HTML 文档中。而 doctype 声明就是这些必须出现在每个文档中的结构性元素的起点。二、为什么需要 doctype告诉浏览器你读的是哪一版 HTML2.1 浏览器如何决定渲染模式DOCTYPEdocument type文档类型声明必须位于 HTML 文档的第一行它的作用是告诉浏览器这份页面使用的是哪个版本的 HTML 规范。HTML 是一门持续演进的语言会被定期更新。如今主流浏览器大多支持最新的规范——HTML5但互联网上仍然存在使用早期版本编写的老旧网页。面对混用不同版本规范的网页浏览器无法靠猜来准确解析因此文档作者必须显式声明。在 web 历史上这个机制对应着著名的**标准模式与怪异模式standards mode vs. quirks mode**切换现代规范的文档若缺少 doctype老式浏览器可能回退到 quirks 模式用不符合标准的方式渲染页面导致布局错乱。2.2 HTML5 的标准写法在文档第一行写入 doctype其中...部分替换为对应的 HTML 版本标识!DOCTYPE ...针对 HTML5你需要写的是!DOCTYPE htmlHTML5 的 doctype 是历史版本中最简短的一个。为了便于对比文档中虽未列出但可以从标准角度了解旧规范如 HTML 4.01 的 transitional / strict 变体的 doctype 声明通常是一长串带系统标识符的字符串而 HTML5 仅用!DOCTYPE html五个词即完成声明。三、语法细节!与DOCTYPE的大小写规则挑战的--description--段落专门强调了两条易被初学者忽略的规则理解它们可以避免未来写出浏览器解析异常的代码语法片段大小写敏感性说明!必须存在位于之后是 doctype 标识的一部分省略即非法DOCTYPE推荐大写尤其在老式浏览器中!与大写DOCTYPE很重要html不区分大小写浏览器解析时对html部分的大小写不敏感概括来说HTML5 doctype 声明中只有html部分是大小写不敏感的!和DOCTYPE应当原样照写。初学者常见的!doctype htmlDOCTYPE全小写在规范层面通常也能被现代浏览器接受但遵循课程要求、写成教科书式的!DOCTYPE html是最稳妥、兼容性最好的习惯。这一点在后续测试环节还会得到印证——课程的测试正则显式带有gi大小写不敏感标志意味着测试编写者已考虑到用户可能输入不同大小写形式。四、html根元素包裹其余所有代码声明完 doctype 之后文档的其余 HTML 代码必须被包裹在html标签中——它是整个文档的根元素开标签html紧跟!DOCTYPE html那一行的正下方闭标签/html位于页面最末尾。课程给出的最小页面骨架示例为!DOCTYPE html html /html你的 HTML 内容就写在两个html标签之间的空位里。值得注意的是!DOCTYPE html本身不是HTML 元素它只是一条给浏览器阅读的声明指令真正的页面元素树由html作为根节点开始。正因如此后续的 Define the Head and Body of an HTML Document 挑战中head与body必须作为html的直接子元素出现该挑战测试用正则提取html.../html内容后校验head/body是否存在形成标准的四层嵌套html head/body。一个仅含标题和正文段落的完整 HTML5 骨架可以这样组织!DOCTYPE html html head meta charsetutf-8 titleExample title/title /head body h1A heading/h1 pSome paragraph content./p /body /html五、实践任务拆解动手把骨架搭起来挑战的--instructions--给出的任务非常具体共分三步在空白文档顶部添加 HTML5 的DOCTYPE标签——即写上第一行!DOCTYPE html在其下方添加成对的html开标签与/html闭标签让它们包裹住全部内容在html标签之间放入一个h1元素标题文本内容不限。编辑器的初始代码是一个完全空白的 HTML 文档--seed-contents--为空也就是说学习者需要从零写出整个 HTML 骨架这比在既有代码上补一句更能训练对文档结构的整体记忆。六、标准答案与验证测试代码如何被判通过6.1 挑战中的标准解答挑战源文件中的--solutions--给出了参考答案!DOCTYPE html html h1 Hello world /h1 /html出于课程循序渐进考虑此阶段尚未引入head/bodyh1直接作为html的子元素书写是可接受的——下一道挑战会专门练习将它们收进head与body中。6.2 三道自动化测试各自在验证什么--hints--段定义了三条检验标准每条都对应一段可执行的 JS 断言assert它们正好覆盖了文档强调的每个知识点测试一必须出现!DOCTYPE html标签assert.match(code,/!DOCTYPE\s?html\s*?/gi);这段断言对用户的源码做正则匹配。\s?与\s*?宽容了 doctype 声明中可能存在的空白末尾的gi标志表示全局匹配且忽略大小写因此!doctype HTML之类写法也能通过——这与文档中html部分不区分大小写的说法一致。测试二页面中应当只有一个html元素assert.lengthOf(document.querySelectorAll(html), 1);此断言通过浏览器 DOM APIquerySelectorAll(html)统计根元素的实例数恰好为 1 才算通过。它强制学习者成对、且仅有一对html标签既不能遗漏闭标签也不能重复嵌套。测试三html标签应包裹住一个h1元素assert.match(code,/html\s*?h1\s*?.*?\s*?\/h1\s*?\/html/gi);正则按顺序匹配html→h1→ 任意文本 →/h1→/html验证了结构约束h1必须位于 html 标签内部且被正确闭合。6.3 测试在课程仓库中如何被执行了解这段断言背后的运行机制有助于理解 freeCodeCamp 课程内容与测试的真实关系。在仓库的测试基础设施 test-challenges.js 中每一道挑战都要经历两类自动化验证初始代码必须让测试失败Test suite must fail on the initial contents即一个空白的--seed--绝不应当误判为已通过给出的标准答案必须让测试通过Check tests against solutions仓库会针对--solutions--中的解答创建测试运行器createTestRunner把解答内容注入页面后逐条执行 hints 中的testString。测试的执行依赖于真实的浏览器页面环境测试框架通过 Puppeteer 打开一个页面对window.FCCTestRunner发出求值调用因此querySelectorAll(html)这类 DOM 断言能拿到真实的文档结构。此外所有挑战在入库前还会经过 Joi 模式校验规则定义在 challenge-schema.js 中——比如title、dashedName、tests内含testString、solutions都是必填字段而challengeType: 0对应的正是 challenge-types.ts 中定义的html类型其提交方式为tests即以通过测试为准。七、源码纵深doctype 在挑战预览页中的特殊处理一个值得深挖的细节是在 freeCodeCamp 的挑战运行环境中浏览器出于安全考虑会把用户代码放在受限的 iframe 中执行。对于 HTML 类型挑战构建系统会重建一个完整的文档上下文。在构建源码 build.ts 中可以看到工具函数prefixDoctypeconst doctype sources.contents?.match(/^!DOCTYPE html/i)?.[0] || ; return doctype build;它的作用正是从学习者源码的开头提取出!DOCTYPE html声明同样使用i忽略大小写、并兼容 doctype 前后可能存在的差异再把它拼接到构建好的文档前面确保被测页面严格以 doctype 开头。也就是说即使编辑器呈现给用户的是片段式代码测试与预览环节也会尽可能还原以 doctype 开头 完整 html 骨架的真实页面形态——这也是为什么课程要求用户把 doctype 与html结构写完整。八、小结与下一步通过这道挑战你实际掌握的是编写任何 HTML 页面时都必须先做对的三件事在第一行写出!DOCTYPE html向浏览器声明文档遵循 HTML5 规范用一对html根标签包裹全部内容让页面拥有一棵合法的元素树记住语法雷区!不可缺少、DOCTYPE保持大写、只有html大小写不敏感。本挑战与紧随其后的 Define the Head and Body of an HTML Document见同目录下 587d78aa367417b2b2512aec.md一起构成了 freeCodeCamp 对HTML 文档总纲的完整训练先学会声明文档类型与建立根结构再学会把元信息放进head、把可视化内容放进body。掌握这个总纲后后续课程中学习的link、meta、style等元素就有了正确的归属位置。【免费下载链接】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 HTML 入门课程：深入理解 `＜!DOCTYPE html＞` 文档声明挑战
freeCodeCamp HTML 入门课程深入理解!DOCTYPE html文档声明挑战【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp本篇技术指南围绕 freeCodeCamp 课程中 “Declare the Doctype of an HTML Document” 这一交互式编程挑战展开结合开源仓库中该挑战的源 Markdown 文件 587d78aa367417b2b2512aed.md 及对应的挑战构建与测试基础设施系统讲解!DOCTYPE html声明的语法、位置与大小写规则以及它与html、head、body共同构成的 HTML 文档骨架。读完本文你将掌握标准 HTML5 文档最小结构的写法并理解 freeCodeCamp 是如何用自动化测试来判定这类挑战“通过”的。一、挑战定位Basic HTML 与 HTML5 模块中的承上启下关键一环在 freeCodeCamp 课程体系中这一挑战位于basic-html-and-html5基础 HTML 与 HTML5模块。模块顺序由 basic-html-and-html5.json 定义在 28 道题中本文讨论的 “Declare the Doctype of an HTML Document” 排在倒数第二index 27紧随其后的是 “Define the Head and Body of an HTML Document”index 28。这个位置很有深意此前约 27 道挑战已经带学习者掌握了各类具体 HTML 元素——从h1、h2标题到段落p、链接a、图片img、表单form、列表、单选按钮与复选框等。但正如此前教程在文档中明确指出的仅仅会使用单个元素是不够的有些元素负责为整张页面提供总体结构且应当出现在每一个 HTML 文档中。而 doctype 声明就是这些必须出现在每个文档中的结构性元素的起点。二、为什么需要 doctype告诉浏览器你读的是哪一版 HTML2.1 浏览器如何决定渲染模式DOCTYPEdocument type文档类型声明必须位于 HTML 文档的第一行它的作用是告诉浏览器这份页面使用的是哪个版本的 HTML 规范。HTML 是一门持续演进的语言会被定期更新。如今主流浏览器大多支持最新的规范——HTML5但互联网上仍然存在使用早期版本编写的老旧网页。面对混用不同版本规范的网页浏览器无法靠猜来准确解析因此文档作者必须显式声明。在 web 历史上这个机制对应着著名的**标准模式与怪异模式standards mode vs. quirks mode**切换现代规范的文档若缺少 doctype老式浏览器可能回退到 quirks 模式用不符合标准的方式渲染页面导致布局错乱。2.2 HTML5 的标准写法在文档第一行写入 doctype其中...部分替换为对应的 HTML 版本标识!DOCTYPE ...针对 HTML5你需要写的是!DOCTYPE htmlHTML5 的 doctype 是历史版本中最简短的一个。为了便于对比文档中虽未列出但可以从标准角度了解旧规范如 HTML 4.01 的 transitional / strict 变体的 doctype 声明通常是一长串带系统标识符的字符串而 HTML5 仅用!DOCTYPE html五个词即完成声明。三、语法细节!与DOCTYPE的大小写规则挑战的--description--段落专门强调了两条易被初学者忽略的规则理解它们可以避免未来写出浏览器解析异常的代码语法片段大小写敏感性说明!必须存在位于之后是 doctype 标识的一部分省略即非法DOCTYPE推荐大写尤其在老式浏览器中!与大写DOCTYPE很重要html不区分大小写浏览器解析时对html部分的大小写不敏感概括来说HTML5 doctype 声明中只有html部分是大小写不敏感的!和DOCTYPE应当原样照写。初学者常见的!doctype htmlDOCTYPE全小写在规范层面通常也能被现代浏览器接受但遵循课程要求、写成教科书式的!DOCTYPE html是最稳妥、兼容性最好的习惯。这一点在后续测试环节还会得到印证——课程的测试正则显式带有gi大小写不敏感标志意味着测试编写者已考虑到用户可能输入不同大小写形式。四、html根元素包裹其余所有代码声明完 doctype 之后文档的其余 HTML 代码必须被包裹在html标签中——它是整个文档的根元素开标签html紧跟!DOCTYPE html那一行的正下方闭标签/html位于页面最末尾。课程给出的最小页面骨架示例为!DOCTYPE html html /html你的 HTML 内容就写在两个html标签之间的空位里。值得注意的是!DOCTYPE html本身不是HTML 元素它只是一条给浏览器阅读的声明指令真正的页面元素树由html作为根节点开始。正因如此后续的 Define the Head and Body of an HTML Document 挑战中head与body必须作为html的直接子元素出现该挑战测试用正则提取html.../html内容后校验head/body是否存在形成标准的四层嵌套html head/body。一个仅含标题和正文段落的完整 HTML5 骨架可以这样组织!DOCTYPE html html head meta charsetutf-8 titleExample title/title /head body h1A heading/h1 pSome paragraph content./p /body /html五、实践任务拆解动手把骨架搭起来挑战的--instructions--给出的任务非常具体共分三步在空白文档顶部添加 HTML5 的DOCTYPE标签——即写上第一行!DOCTYPE html在其下方添加成对的html开标签与/html闭标签让它们包裹住全部内容在html标签之间放入一个h1元素标题文本内容不限。编辑器的初始代码是一个完全空白的 HTML 文档--seed-contents--为空也就是说学习者需要从零写出整个 HTML 骨架这比在既有代码上补一句更能训练对文档结构的整体记忆。六、标准答案与验证测试代码如何被判通过6.1 挑战中的标准解答挑战源文件中的--solutions--给出了参考答案!DOCTYPE html html h1 Hello world /h1 /html出于课程循序渐进考虑此阶段尚未引入head/bodyh1直接作为html的子元素书写是可接受的——下一道挑战会专门练习将它们收进head与body中。6.2 三道自动化测试各自在验证什么--hints--段定义了三条检验标准每条都对应一段可执行的 JS 断言assert它们正好覆盖了文档强调的每个知识点测试一必须出现!DOCTYPE html标签assert.match(code,/!DOCTYPE\s?html\s*?/gi);这段断言对用户的源码做正则匹配。\s?与\s*?宽容了 doctype 声明中可能存在的空白末尾的gi标志表示全局匹配且忽略大小写因此!doctype HTML之类写法也能通过——这与文档中html部分不区分大小写的说法一致。测试二页面中应当只有一个html元素assert.lengthOf(document.querySelectorAll(html), 1);此断言通过浏览器 DOM APIquerySelectorAll(html)统计根元素的实例数恰好为 1 才算通过。它强制学习者成对、且仅有一对html标签既不能遗漏闭标签也不能重复嵌套。测试三html标签应包裹住一个h1元素assert.match(code,/html\s*?h1\s*?.*?\s*?\/h1\s*?\/html/gi);正则按顺序匹配html→h1→ 任意文本 →/h1→/html验证了结构约束h1必须位于 html 标签内部且被正确闭合。6.3 测试在课程仓库中如何被执行了解这段断言背后的运行机制有助于理解 freeCodeCamp 课程内容与测试的真实关系。在仓库的测试基础设施 test-challenges.js 中每一道挑战都要经历两类自动化验证初始代码必须让测试失败Test suite must fail on the initial contents即一个空白的--seed--绝不应当误判为已通过给出的标准答案必须让测试通过Check tests against solutions仓库会针对--solutions--中的解答创建测试运行器createTestRunner把解答内容注入页面后逐条执行 hints 中的testString。测试的执行依赖于真实的浏览器页面环境测试框架通过 Puppeteer 打开一个页面对window.FCCTestRunner发出求值调用因此querySelectorAll(html)这类 DOM 断言能拿到真实的文档结构。此外所有挑战在入库前还会经过 Joi 模式校验规则定义在 challenge-schema.js 中——比如title、dashedName、tests内含testString、solutions都是必填字段而challengeType: 0对应的正是 challenge-types.ts 中定义的html类型其提交方式为tests即以通过测试为准。七、源码纵深doctype 在挑战预览页中的特殊处理一个值得深挖的细节是在 freeCodeCamp 的挑战运行环境中浏览器出于安全考虑会把用户代码放在受限的 iframe 中执行。对于 HTML 类型挑战构建系统会重建一个完整的文档上下文。在构建源码 build.ts 中可以看到工具函数prefixDoctypeconst doctype sources.contents?.match(/^!DOCTYPE html/i)?.[0] || ; return doctype build;它的作用正是从学习者源码的开头提取出!DOCTYPE html声明同样使用i忽略大小写、并兼容 doctype 前后可能存在的差异再把它拼接到构建好的文档前面确保被测页面严格以 doctype 开头。也就是说即使编辑器呈现给用户的是片段式代码测试与预览环节也会尽可能还原以 doctype 开头 完整 html 骨架的真实页面形态——这也是为什么课程要求用户把 doctype 与html结构写完整。八、小结与下一步通过这道挑战你实际掌握的是编写任何 HTML 页面时都必须先做对的三件事在第一行写出!DOCTYPE html向浏览器声明文档遵循 HTML5 规范用一对html根标签包裹全部内容让页面拥有一棵合法的元素树记住语法雷区!不可缺少、DOCTYPE保持大写、只有html大小写不敏感。本挑战与紧随其后的 Define the Head and Body of an HTML Document见同目录下 587d78aa367417b2b2512aec.md一起构成了 freeCodeCamp 对HTML 文档总纲的完整训练先学会声明文档类型与建立根结构再学会把元信息放进head、把可视化内容放进body。掌握这个总纲后后续课程中学习的link、meta、style等元素就有了正确的归属位置。【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考