文档教程【免费下载链接】learnxinyminutes-docsCode documentation written as code! How novel and totally my idea!项目地址https://gitcode.com/gh_mirrors/le/learnxinyminutes-docs点击查看免费下载HTMLHyperText Markup Language超文本标记语言是构建万维网页面的基础语言它通过成对的标签tag为文本和数据赋予结构与语义。本文以 learnxinyminutes-docs 仓库中的荷兰语版教程 nl/html.md 为主线骨架结合英文原版 html.md 与仓库源码系统讲解 HTML5 的文档结构、常用标签、属性与运行方式让你读完即可手写一个结构完整、语义清晰的 HTML 页面。HTML 是什么一种标记语言而非编程语言HTML 是一种允许我们在万维网上创建页面的语言。它属于标记语言markup language通过代码中的标签来指明文本与数据应当如何显示和组织。从本质上看HTML 文件就是简单的纯文本文件任何文本编辑器都可以创建和修改。所谓“标记”就是把页面数据用**开标签opening tag与闭标签closing tag**包围起来从而为被包围的文本赋予意义。与许多计算机语言一样HTML 也存在多个版本本教程讨论的是当前主流的HTML5。需要特别强调的是HTML 不是编程语言——它不包含变量、循环、条件分支等逻辑控制能力它只负责描述内容的“结构与语义”。这一结论也明确写在英文原版 html.md 的 Usage 一节中。真正负责动态逻辑的是 JavaScript负责视觉表现的是 CSS三者共同构成现代网页的三大基石。边学边练准备好你的 HTML 游乐场原文档建议读者在阅读过程中实时测试各类标签与元素的效果借助在线代码编辑器如 CodePen 之类的平台把教程中的示例粘贴进去即可立刻看到渲染结果从而直观理解每个标签的作用、加深对语言的熟悉程度。在本地环境中你只需要两样东西任意文本编辑器记事本、VS Code 等均可任意现代浏览器Chrome、Firefox、Edge、Safari 等。将 HTML 代码保存为.html文件后用浏览器直接打开即可查看渲染效果——这也是最贴近实际开发的验证方式。第一个 HTML 页面一个完整的可运行示例原文档用一个“将被逐步分析”的完整示例文件带领读者入门。下面是与原文档等价的完整页面我们会在后续章节逐层拆解它的每一部分!-- 注释的写法就像这一行 -- !-- #################### 标签Tags#################### -- !-- 下面是一个我们即将分析的示例 HTML 文件 -- !doctype html html head title我的网站/title /head body h1你好世界/h1 a hrefhttp://codepen.io/anon/pen/xwjLbZ看看这个链接/a p这是一个段落。/p p这是另一个段落。/p ul li这是一个无序列表项/li li这是另一个列表项/li li这是列表的最后一项/li /ul /body /html这段代码虽短却覆盖了 HTML5 页面的全部骨架要素。我们接下来从上到下逐层解析。HTML 文档骨架四层结构逐级拆解1. 文档类型声明!doctype htmlHTML 文件的开头总是先向浏览器声明“本页面使用的是 HTML”!doctype html在 HTML5 中这行声明极其简单不区分大小写也可写作!DOCTYPE html。它告诉浏览器以标准模式standards mode解析页面避免进入怪癖模式quirks mode而引发渲染差异。2. 根元素html声明之后用html标签打开整个文档的根html它必须在文件末尾以/html关闭而且关闭之后不允许再出现任何内容/html所有其他标签都必须位于html与/html之间。3. 头部head与title在根元素内部首先找到由head定义的头部必须以/head闭合head title我的网站/title /head头部承载的是页面的描述信息与外部数据即元数据metadata——这些内容不会直接显示在网页正文中。其中title标签的作用是指定浏览器标题栏与标签页上显示的文本title我的网站/title4. 主体bodyhead之后几乎总是body。到目前为止浏览器窗口里还没有显示任何内容——头部中的一切都不可见。只有放入body中的内容才会呈现在浏览器中body !-- 这里放置所有需要显示的内容 -- /body原文档用一句话点明了这一设计把“元数据”和“可见内容”分离正是 HTML 文档结构清晰、职责分明的根基。正文常用标签从标题到表格标题h1h6h1标签创建页面主标题h1你好世界/h1HTML 还提供了从最重要到最次要的六级标题供组织内容层级使用h1最重要h2、h3……依次递减直到最精确的h6。合理使用标题层级不仅利于阅读也利于搜索引擎理解页面结构。超链接a与href属性a标签创建一个指向给定 URL 的超链接点击即可在浏览器中跳转目标地址由href属性指定a hrefhttp://codepen.io/anon/pen/xwjLbZ看看这个链接/ahref是a的核心属性它既可以是完整的网络 URL也可以是站内相对路径。段落pp标签让我们在页面中加入文本段落p这是一个段落。/p p这是另一个段落。/p每个p自成一段浏览器会自动在段落之间留出间距。列表ul、ol与liul标签创建一个带圆点符号的无序列表ul li这是一个无序列表项/li li这是另一个列表项/li li这是列表的最后一项/li /ul如果需要有序列表编号列表则改用ol其中的li元素会被浏览器自动编号为 1、2、3……ol li第一项/li li第二项/li li第三项/li /ol注意无论ul还是ol列表项都必须用li包裹。图片img与src属性英文原版 html.md 还补充了原文档未展开的图片标签。img /用于插入图片图片来源通过src属性指定——它可以是网络 URL也可以是本地计算机上的文件路径img srchttp://i.imgur.com/XWG0O.gif/img /是自闭合标签在 XHTML 风格中写作img /HTML5 中img也可它没有闭合标签。表格table、tr、th、td同样来自英文原版补充HTML 还可以创建表格。先用table打开表格元素tabletr用于创建一行trth用于给表格列设置标题th第一列标题/th th第二列标题/thtd用于创建表格单元格td第一行第一列/td td第一行第二列/td将三者组合起来就是一个完整的 2 行 2 列表格table tr thFirst Header/th thSecond Header/th /tr tr tdfirst row, first column/td tdfirst row, second column/td /tr tr tdsecond row, first column/td tdsecond row, second column/td /tr /table注释记录与调试的利器HTML 注释的写法是!-- 注释内容 --浏览器不会渲染它们!-- 单行注释 -- !-- 注释 可以 跨越多行 --注释既可用于给自己和其他开发者留说明也可临时屏蔽掉一段不想显示的代码是调试与协作中不可或缺的工具。使用与运行文件扩展名与 MIME 类型原文档的 Usage 一节给出了 HTML 的实际使用约定HTML 代码保存在以.html结尾的文件中英文原版补充说明.htm也是合法扩展名对应的MIME 类型为text/html再次强调HTML 不是编程语言。在仓库中HTML 教程本身也以带 frontmatter 的 Markdown 文档形式存在例如 nl/html.md 的开头就包含了contributors原作者与荷兰语贡献者与translators翻译者等元数据字段。仓库视角HTML 教程在 learnxinyminutes-docs 中的组织方式learnxinyminutes-docs 是 “Learn X in Y minutes” 系列的文档仓库其核心理念正如 README.md 所述以“可作为有效代码运行的、带注释的代码”来速览编程语言。HTML 教程就是这一理念的典型实践——整篇教程的主体是一段带详尽注释的合法 HTML 文档。围绕这份教程仓库提供了如下工程化保障Frontmatter 元数据规范每个 Markdown 教程文件顶部都有 YAML 格式的 frontmatter。CONTRIBUTING.md 明确了字段约定——name为语言可读名称、contributors为作者列表、翻译文档还需translators字段而 lint/frontmatter.py 中的validate_yaml_keys函数会逐一校验这些字段的名称与类型如contributors必须是二元组列表确保元数据合法编码与格式检查lint/encoding.sh 会检查所有.md文件是否为 UTF-8/US-ASCII 编码且不含 BOMCONTRIBUTING.md 还要求代码块内行宽尽量不超过 80 字符以保持多语言教程排版一致多语言平行结构同一篇教程按语言代码分目录存放如荷兰语的 nl/html.md 对应英文原版 html.md。翻译版省略了部分 frontmatter 字段按约定会从英文原版继承。此外HTML 在仓库中并非孤立存在它与相邻文档有紧密的知识关联nl/markdown.md 明确指出 Markdown 继承自 HTML——任何 HTML 文件都是合法的 Markdown 文件Markdown 文档中可以直接使用 HTML 元素如注释这体现了 HTML 作为 Web 基础标记语言的渗透力nl/xml.md 则从反面映衬了 HTML 的定位XML 是用于存储和传输数据的标记语言与 HTML 不同XML不规定数据如何显示与格式化而 HTML 恰恰以“呈现结构”为核心使命。小结至此你已经掌握了 HTML5 的核心语法从!doctype html声明、html根元素、head元数据区到body内容区再到h1–h6标题、a链接、p段落、ul/ol列表、img图片与table表格等常用标签。只需把示例保存为.html文件并用浏览器打开就能立刻看到成果——正如原文档结尾所说“就是这样创建一个 HTML 文件可以如此简单。”若要继续深入原文档推荐读者查阅维基百科的 HTML 词条、Mozilla 开发者网络MDN的 HTML 教程以及 W3Schools 的 HTML 入门指南等权威资料在仓库内则可以从 html.md英文完整版含更多标签示例和 nl/markdown.md 出发进一步理解 HTML 与周边技术栈的关系。赞分享文档教程【免费下载链接】learnxinyminutes-docsCode documentation written as code! How novel and totally my idea!项目地址https://gitcode.com/gh_mirrors/le/learnxinyminutes-docs点击查看免费下载相关推荐Learn X in Y minutes 系列解读以法语版 ruby.md 为核心的 Ruby 快速入门实战指南Learn X in Y minutes 系列解读以法语版 ruby.md 为核心的 Ruby 快速入门实战指南 本指南以当前仓库中的 fr/ruby.md文档教程Learn X in Y minutes 法文版 HTML 指南精讲从零掌握 HTML5 标记语言核心语法Learn X in Y minutes 法文版 HTML 指南精讲从零掌握 HTML5 标记语言核心语法 本篇指南以 learnxinyminutes do文档教程Learn X in Y Minutes 速成教程Ruby 核心语法与对象模型实战指南Learn X in Y Minutes 速成教程Ruby 核心语法与对象模型实战指南 本文以本仓库内的德语译本 de/ruby.md https://lin文档教程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/10/9 14:28:23 · 阅读 1.2k Learn X in Y minutes 系列：HTML5 核心语法与网页结构实战指南
文档教程【免费下载链接】learnxinyminutes-docsCode documentation written as code! How novel and totally my idea!项目地址https://gitcode.com/gh_mirrors/le/learnxinyminutes-docs点击查看免费下载HTMLHyperText Markup Language超文本标记语言是构建万维网页面的基础语言它通过成对的标签tag为文本和数据赋予结构与语义。本文以 learnxinyminutes-docs 仓库中的荷兰语版教程 nl/html.md 为主线骨架结合英文原版 html.md 与仓库源码系统讲解 HTML5 的文档结构、常用标签、属性与运行方式让你读完即可手写一个结构完整、语义清晰的 HTML 页面。HTML 是什么一种标记语言而非编程语言HTML 是一种允许我们在万维网上创建页面的语言。它属于标记语言markup language通过代码中的标签来指明文本与数据应当如何显示和组织。从本质上看HTML 文件就是简单的纯文本文件任何文本编辑器都可以创建和修改。所谓“标记”就是把页面数据用**开标签opening tag与闭标签closing tag**包围起来从而为被包围的文本赋予意义。与许多计算机语言一样HTML 也存在多个版本本教程讨论的是当前主流的HTML5。需要特别强调的是HTML 不是编程语言——它不包含变量、循环、条件分支等逻辑控制能力它只负责描述内容的“结构与语义”。这一结论也明确写在英文原版 html.md 的 Usage 一节中。真正负责动态逻辑的是 JavaScript负责视觉表现的是 CSS三者共同构成现代网页的三大基石。边学边练准备好你的 HTML 游乐场原文档建议读者在阅读过程中实时测试各类标签与元素的效果借助在线代码编辑器如 CodePen 之类的平台把教程中的示例粘贴进去即可立刻看到渲染结果从而直观理解每个标签的作用、加深对语言的熟悉程度。在本地环境中你只需要两样东西任意文本编辑器记事本、VS Code 等均可任意现代浏览器Chrome、Firefox、Edge、Safari 等。将 HTML 代码保存为.html文件后用浏览器直接打开即可查看渲染效果——这也是最贴近实际开发的验证方式。第一个 HTML 页面一个完整的可运行示例原文档用一个“将被逐步分析”的完整示例文件带领读者入门。下面是与原文档等价的完整页面我们会在后续章节逐层拆解它的每一部分!-- 注释的写法就像这一行 -- !-- #################### 标签Tags#################### -- !-- 下面是一个我们即将分析的示例 HTML 文件 -- !doctype html html head title我的网站/title /head body h1你好世界/h1 a hrefhttp://codepen.io/anon/pen/xwjLbZ看看这个链接/a p这是一个段落。/p p这是另一个段落。/p ul li这是一个无序列表项/li li这是另一个列表项/li li这是列表的最后一项/li /ul /body /html这段代码虽短却覆盖了 HTML5 页面的全部骨架要素。我们接下来从上到下逐层解析。HTML 文档骨架四层结构逐级拆解1. 文档类型声明!doctype htmlHTML 文件的开头总是先向浏览器声明“本页面使用的是 HTML”!doctype html在 HTML5 中这行声明极其简单不区分大小写也可写作!DOCTYPE html。它告诉浏览器以标准模式standards mode解析页面避免进入怪癖模式quirks mode而引发渲染差异。2. 根元素html声明之后用html标签打开整个文档的根html它必须在文件末尾以/html关闭而且关闭之后不允许再出现任何内容/html所有其他标签都必须位于html与/html之间。3. 头部head与title在根元素内部首先找到由head定义的头部必须以/head闭合head title我的网站/title /head头部承载的是页面的描述信息与外部数据即元数据metadata——这些内容不会直接显示在网页正文中。其中title标签的作用是指定浏览器标题栏与标签页上显示的文本title我的网站/title4. 主体bodyhead之后几乎总是body。到目前为止浏览器窗口里还没有显示任何内容——头部中的一切都不可见。只有放入body中的内容才会呈现在浏览器中body !-- 这里放置所有需要显示的内容 -- /body原文档用一句话点明了这一设计把“元数据”和“可见内容”分离正是 HTML 文档结构清晰、职责分明的根基。正文常用标签从标题到表格标题h1h6h1标签创建页面主标题h1你好世界/h1HTML 还提供了从最重要到最次要的六级标题供组织内容层级使用h1最重要h2、h3……依次递减直到最精确的h6。合理使用标题层级不仅利于阅读也利于搜索引擎理解页面结构。超链接a与href属性a标签创建一个指向给定 URL 的超链接点击即可在浏览器中跳转目标地址由href属性指定a hrefhttp://codepen.io/anon/pen/xwjLbZ看看这个链接/ahref是a的核心属性它既可以是完整的网络 URL也可以是站内相对路径。段落pp标签让我们在页面中加入文本段落p这是一个段落。/p p这是另一个段落。/p每个p自成一段浏览器会自动在段落之间留出间距。列表ul、ol与liul标签创建一个带圆点符号的无序列表ul li这是一个无序列表项/li li这是另一个列表项/li li这是列表的最后一项/li /ul如果需要有序列表编号列表则改用ol其中的li元素会被浏览器自动编号为 1、2、3……ol li第一项/li li第二项/li li第三项/li /ol注意无论ul还是ol列表项都必须用li包裹。图片img与src属性英文原版 html.md 还补充了原文档未展开的图片标签。img /用于插入图片图片来源通过src属性指定——它可以是网络 URL也可以是本地计算机上的文件路径img srchttp://i.imgur.com/XWG0O.gif/img /是自闭合标签在 XHTML 风格中写作img /HTML5 中img也可它没有闭合标签。表格table、tr、th、td同样来自英文原版补充HTML 还可以创建表格。先用table打开表格元素tabletr用于创建一行trth用于给表格列设置标题th第一列标题/th th第二列标题/thtd用于创建表格单元格td第一行第一列/td td第一行第二列/td将三者组合起来就是一个完整的 2 行 2 列表格table tr thFirst Header/th thSecond Header/th /tr tr tdfirst row, first column/td tdfirst row, second column/td /tr tr tdsecond row, first column/td tdsecond row, second column/td /tr /table注释记录与调试的利器HTML 注释的写法是!-- 注释内容 --浏览器不会渲染它们!-- 单行注释 -- !-- 注释 可以 跨越多行 --注释既可用于给自己和其他开发者留说明也可临时屏蔽掉一段不想显示的代码是调试与协作中不可或缺的工具。使用与运行文件扩展名与 MIME 类型原文档的 Usage 一节给出了 HTML 的实际使用约定HTML 代码保存在以.html结尾的文件中英文原版补充说明.htm也是合法扩展名对应的MIME 类型为text/html再次强调HTML 不是编程语言。在仓库中HTML 教程本身也以带 frontmatter 的 Markdown 文档形式存在例如 nl/html.md 的开头就包含了contributors原作者与荷兰语贡献者与translators翻译者等元数据字段。仓库视角HTML 教程在 learnxinyminutes-docs 中的组织方式learnxinyminutes-docs 是 “Learn X in Y minutes” 系列的文档仓库其核心理念正如 README.md 所述以“可作为有效代码运行的、带注释的代码”来速览编程语言。HTML 教程就是这一理念的典型实践——整篇教程的主体是一段带详尽注释的合法 HTML 文档。围绕这份教程仓库提供了如下工程化保障Frontmatter 元数据规范每个 Markdown 教程文件顶部都有 YAML 格式的 frontmatter。CONTRIBUTING.md 明确了字段约定——name为语言可读名称、contributors为作者列表、翻译文档还需translators字段而 lint/frontmatter.py 中的validate_yaml_keys函数会逐一校验这些字段的名称与类型如contributors必须是二元组列表确保元数据合法编码与格式检查lint/encoding.sh 会检查所有.md文件是否为 UTF-8/US-ASCII 编码且不含 BOMCONTRIBUTING.md 还要求代码块内行宽尽量不超过 80 字符以保持多语言教程排版一致多语言平行结构同一篇教程按语言代码分目录存放如荷兰语的 nl/html.md 对应英文原版 html.md。翻译版省略了部分 frontmatter 字段按约定会从英文原版继承。此外HTML 在仓库中并非孤立存在它与相邻文档有紧密的知识关联nl/markdown.md 明确指出 Markdown 继承自 HTML——任何 HTML 文件都是合法的 Markdown 文件Markdown 文档中可以直接使用 HTML 元素如注释这体现了 HTML 作为 Web 基础标记语言的渗透力nl/xml.md 则从反面映衬了 HTML 的定位XML 是用于存储和传输数据的标记语言与 HTML 不同XML不规定数据如何显示与格式化而 HTML 恰恰以“呈现结构”为核心使命。小结至此你已经掌握了 HTML5 的核心语法从!doctype html声明、html根元素、head元数据区到body内容区再到h1–h6标题、a链接、p段落、ul/ol列表、img图片与table表格等常用标签。只需把示例保存为.html文件并用浏览器打开就能立刻看到成果——正如原文档结尾所说“就是这样创建一个 HTML 文件可以如此简单。”若要继续深入原文档推荐读者查阅维基百科的 HTML 词条、Mozilla 开发者网络MDN的 HTML 教程以及 W3Schools 的 HTML 入门指南等权威资料在仓库内则可以从 html.md英文完整版含更多标签示例和 nl/markdown.md 出发进一步理解 HTML 与周边技术栈的关系。赞分享文档教程【免费下载链接】learnxinyminutes-docsCode documentation written as code! How novel and totally my idea!项目地址https://gitcode.com/gh_mirrors/le/learnxinyminutes-docs点击查看免费下载相关推荐Learn X in Y minutes 系列解读以法语版 ruby.md 为核心的 Ruby 快速入门实战指南Learn X in Y minutes 系列解读以法语版 ruby.md 为核心的 Ruby 快速入门实战指南 本指南以当前仓库中的 fr/ruby.md文档教程Learn X in Y minutes 法文版 HTML 指南精讲从零掌握 HTML5 标记语言核心语法Learn X in Y minutes 法文版 HTML 指南精讲从零掌握 HTML5 标记语言核心语法 本篇指南以 learnxinyminutes do文档教程Learn X in Y Minutes 速成教程Ruby 核心语法与对象模型实战指南Learn X in Y Minutes 速成教程Ruby 核心语法与对象模型实战指南 本文以本仓库内的德语译本 de/ruby.md https://lin文档教程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考