
文档教程【免费下载链接】learnxinyminutes-docsCode documentation written as code! How novel and totally my idea!项目地址https://gitcode.com/gh_mirrors/le/learnxinyminutes-docs点击查看免费下载HTMLHyperText Markup Language超文本标记语言是构建万维网页面的基础语言。本文以 learnxinyminutes-docs 仓库中的 葡萄牙语版 HTML 教程 为骨架系统讲解 HTML5 的核心语法、文档结构、常用标签与文件规范并结合仓库的源码级证据frontmatter 元数据、lint 校验脚本、贡献规范展开纵深解读。读完本文你将能够从零写出一个结构完整、语义正确的 HTML5 页面理解注释、标题、段落、超链接、列表、图片与表格等全部基础标签的用法并了解该教程在 Learn X in Y minutes 项目中的组织方式与质量标准。HTML 是什么超文本标记语言的核心概念根据 pt-br/html.md 的定义HTML 是 HyperText Markup Language 的缩写是一门允许我们为万维网编写页面的语言。它有四个关键特性标记语言Linguagem de marcação它不是编程语言而是通过代码指示文本和数据应当如何显示的组织方式纯文本文件HTML 文件本质上是简单的文本文件任何文本编辑器都可以创建和编辑标签Tags驱动的结构标记marcação是一种组织页面数据的方法——将数据用**开始标签opening tags和结束标签closing tags**包围起来为所包裹的文本赋予意义多版本演进与其他计算机语言一样HTML 存在多个版本本教程聚焦HTML5。与之对应仓库根目录的英文原版 html.md 给出了完全一致的定义二者互为参照。值得强调的是html.md 中有一句醒目的警示HTML is NOT a programming languageHTML 不是编程语言——这一点在阅读任何 HTML 教程时都应当牢记HTML 负责描述内容的语义与结构而不具备变量、逻辑分支等编程能力。动手实践推荐在线实验环境pt-br/html.md 建议读者在逐步学习教程的过程中通过 CodePen 这类在线平台实时测试不同的标签与元素输入标签后立即看到渲染效果观察每个元素的行为与默认样式通过反复修改加深对语言的理解。该教程明确说明其主要焦点是 HTML 的语法和一些实用技巧而非面面俱到的特性罗列。后续所有代码示例均可在任何本地.html文件或在线沙盒中直接运行验证。HTML5 文档骨架第一个完整示例逐行剖析原文首先给出了一个完整的 HTML5 文件示例这是理解整个文档结构的最佳入口。以下示例保留了原文的完整结构注释已译为中文仓库原文件中为葡萄牙语注释见 pt-br/html.md!-- 注释就按本行的方式被包围起来 -- !-- #################### 标签Tags #################### -- !-- 下面是一个我们将要分析的 HTML 文件示例。 -- !doctype html html head titleMeu Site/title /head body h1Olá, mundo!/h1 a hrefhttps://exemplo.com点此查看实际渲染效果/a p这是一个段落。/p p这是另一个段落。/p ul li这是一个无序列表项目符号列表中的一项/li li这是另一项/li li这是列表中的最后一项/li /ul /body /html这个文件虽然只有十余行却已经覆盖了 HTML5 文档的全部四大组成部分文档类型声明、根元素、头部元数据区和正文内容区。下面逐段拆解。文档类型声明!doctype html每个 HTML 文件必须以!doctype html开头见 pt-br/html.md它的作用是向浏览器声明这是一个 HTML 页面从而让浏览器以标准模式standards mode解析文档。之后紧接着打开html根标签文件结尾必须用/html闭合/html之后不应再出现任何内容。根元素htmlhtml是文档的根元素所有其他标签都位于html与/html之间。在开闭标签之间原文指出了文档的两个主要分区head头部存放描述信息与附加信息这些内容不会显示在浏览器窗口中统称为元数据metadadosbody正文承载所有要显示给用户的内容。头部head与标题titlehead titleMeu Site/title!-- title 标签告诉浏览器在标题栏和标签页名称中显示什么标题。 -- /headtitle标签位于head之内用于指定浏览器标题栏与标签页名称中显示的文本。原文强调到head为止任何内容都不会出现在浏览器窗口的可视区域中必须靠body来填充可见内容。正文body与可见内容body h1Olá, mundo!/h1 a hrefhttps://exemplo.com点此查看实际渲染效果/a p这是一个段落。/p p这是另一个段落。/p ul li这是一个无序列表项目符号列表中的一项/li li这是另一项/li li这是列表中的最后一项/li /ul /body原文通过这个例子说明了创建 HTML 文件可以非常简单——仅凭一个h1、一个a、两个p和一个ul就已经构成一个语义完整的页面。注释给 HTML 添加说明原文指出注释的写法!--与--之间的一切内容都会被浏览器忽略见 pt-br/html.md。注释既可以写单行也可以跨越多行——英文原版 html.md 特别展示了多行注释的写法。注释是教学文档与团队协作的重要工具解释某段代码的意图、标记待办事项、临时屏蔽调试代码等都不会影响页面渲染。内容标签详解标题、段落、超链接与列表标题体系h1~h6h1标签创建一级标题是页面中最重要、级别最高的标题。原文补充说明还存在从最重要h2到更精细h6的各级子标题见 pt-br/html.md。合理使用标题层级不仅是排版需求更是页面语义结构与可访问性的基础。段落pp标签用于在页面中插入一段文本pt-br/html.md。多个p依次排列即可组织多段正文。超链接a与href属性a hrefhttps://exemplo.com链接文字/aa创建指向href属性所填地址的超链接pt-br/html.md。href是锚元素最核心的属性其值可以是一个完整的 URL也可以是站内相对路径、锚点或mailto:等特殊协议。列表ul、ol与liul创建无序列表项目符号列表即 bullet list若要创建有序列表应改用ol浏览器会为第一项显示1.、第二项显示2.依此类推pt-br/html.md每一项内容用lilist item包裹。ul li这是一个无序列表中的一项/li li这是另一项/li li这是列表中的最后一项/li /ul媒体与表格img与table插入图片img与src属性img srchttps://exemplo.com/imagem.gif/img /标签用于插入图片pt-br/html.md。图片来源通过src属性指定src的值可以是网络 URL也可以是你计算机上的本地文件路径。注意img /属于自闭合void元素斜杠/表示该标签不需要单独的结束标签。原文示例中使用的是 GIF 动图实际开发中同样适用于.png、.jpg、.webp、.svg等格式。创建表格table、tr、th、td原文给出了一个完整的表格示例pt-br/html.md涉及四个层层嵌套的标签table开启一张表格trtable row创建一行thtable header创建列标题tdtable data创建单元格。table tr th第一个表头/th th第二个表头/th /tr tr td第一行第一列/td td第一行第二列/td /tr tr td第二行第一列/td td第二行第二列/td /tr /table这个示例清晰地展示了表格的层级关系table内是若干tr行行内由th或td组成单元格从而形成表头行 数据行的标准二维结构。文件使用规范与重要提醒原文在 Uso使用 一节给出了两个关键事实HTML 文件使用.html或.htm扩展名保存其MIME 类型是text/html——浏览器正是依据该 MIME 类型识别并渲染 HTML 文档例如 Web 服务器配置或 HTTP 响应头中的Content-Type: text/html。同时再次强调HTML 不是编程语言它是一门标记语言负责描述内容的结构与语义。仓库视角这篇教程在 learnxinyminutes-docs 中的组织方式与规范Learn X in Y minutes 项目的定位正如 README.md 所描述以有效、带注释的代码形式呈现的旋风式语言导览。这一理念在 HTML 教程中体现得淋漓尽致——整篇教程本身就是一段可运行的、注释密集的 HTML 代码。以下规范细节均可以从仓库中直接验证Frontmatter 元数据每个文档文件以 YAML frontmatter 开头。英文原版 html.md 声明了name: HTML与filename: learnhtml.txt该文件用于站点生成可下载的代码文件葡萄牙语版 pt-br/html.md 则通过contributors与translators分别记录原作者 Christophe THOMAS 和译者 Robert Steed。Lint 校验脚本仓库的 lint/frontmatter.py 规定了 frontmatter 允许的键集合name、category、filename、contributors、translators等并校验其类型——例如contributors/translators必须是字符串列表的列表每个条目至多含两项作者名 可选 URL见 校验逻辑。这保证了包括本文档在内所有翻译文件元数据的一致性与机器可读性。风格指南CONTRIBUTING.md 对文档写作提出了明确要求正是这些规范塑造了本教程的形态代码行尽量控制在 80 字符以内保证代码块不溢出示例优先于叙述Prefer example to exposition——能用代码说明的绝不多写文字这正是本文通篇代码即教程风格的原因惜字如金Eschew surplusage——面向有一定经验的程序员只解释与主题直接相关的概念使用 UTF-8 编码。翻译文档还需额外补充translators字段CONTRIBUTING.md非英语文档可继承英语原文的 frontmatter 值并加以覆盖——这正是 pt-br/html.md 中同时出现原作者与译者的原因。多语言一致性HTML 教程在仓库中拥有完整的翻译矩阵英文原版 html.md、葡萄牙语版 pt-br/html.md、简体中文版 zh-cn/html.md以及德、西、法、俄、日等多语版本内容结构保持一致仅注释语言不同。这为多语言读者提供了完全对等的学习路径。进一步学习方向原文在结尾列出了三个学习资源方向详见 pt-br/html.md此处不附外部链接Wikipedia 的 HTML 词条了解 HTML 的历史、版本演进与标准背景MDN 的 HTML 教程Mozilla 开发者网络的权威参考包含每个元素的完整文档W3Schools 的 HTML 入门面向初学者的分步交互式教程。此外结合 README.md 的项目理念强烈建议你亲自修改本文中的示例代码改变标题级别、增删列表项、给表格加行——每一次改动后刷新浏览器都能直观感受到标签与渲染结果之间的对应关系。从看懂到写出来正是掌握 HTML 的唯一捷径。赞分享文档教程【免费下载链接】learnxinyminutes-docsCode documentation written as code! How novel and totally my idea!项目地址https://gitcode.com/gh_mirrors/le/learnxinyminutes-docs点击查看免费下载相关推荐reStructuredTextRST文档标记语言实战指南以 learnxinyminutes-docs 德语版教程为蓝本reStructuredTextRST文档标记语言实战指南以 learnxinyminutes docs 德语版教程为蓝本 reStructuredTex文档教程Go 语言极速入门实战指南以 learnxinyminutes-docs 的 cs/go.md 为核心的全语法速览Go 语言极速入门实战指南以 learnxinyminutes docs 的 cs/go.md 为核心的全语法速览 本指南以本仓库中的捷克语版 Go 入门文档文档教程Learn X in Y minutes葡萄牙语版 CMake 构建系统速成指南基于 learnxinyminutes-docsLearn X in Y minutes葡萄牙语版 CMake 构建系统速成指南基于 learnxinyminutes docs CMake 是一个跨平台文档教程上一篇Montage 开源项目安装与使用教程下一篇CANN Ascend量化API文档创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考