企业官网建设流程全解析

• 文档
• 教程

本篇指南以 learnxinyminutes-docs 仓库中的 fr/html.md（法文版 HTML 教程）为核心骨架，逐段讲解 HTML 的文档结构、常用标签与属性，并对照仓库内的 英文原版、德文版、西文版、中文版 以及 README.md、CONTRIBUTING.md 与 lint/ 工具，补齐语法细节与项目级规范。读完本文，你将能够徒手写出一个结构完整、语义正确的 HTML5 页面，并理解该仓库"以带注释的代码作为教程"的内容组织方式。

一、HTML 是什么：一门"标记"语言而非编程语言

法文原文档开篇即给出定义：HTML（HyperText Markup Language，超文本标记语言）是一种用来编写网页的语言（文件格式）。它的本质特征有三点：

1. 它是标记语言（langage de balisage）：通过"开标签 + 内容 + 闭标签"的方式把数据包裹起来，从而赋予被包裹文本以特定含义（标题、段落、列表项……）；
2. HTML 文件本质是纯文本文件：任何文本编辑器都可以书写，无需编译，浏览器负责解析渲染；
3. HTML 有多个版本：本文档讨论的是HTML5。

英文原版 html.md 在 "Usage" 一节做了更直白的补充，这一事实性结论值得记住：

HTML 写在以.html或.htm结尾的文件中，MIME 类型为text/html。HTML 不是编程语言（HTML is NOT a programming language）。

这一点解释了本文的核心基调：HTML 不包含逻辑运算与流程控制，它只负责"标记"内容的结构与语义。

二、文档定位：法文版在仓库中的角色

fr/html.md 位于仓库的fr/目录（法语语言代码目录）下，是英文原版教程的法语翻译。它的 YAML frontmatter 非常简洁：

--- contributors: - ["Christophe THOMAS", "https://github.com/WinChris"] ---

按照 CONTRIBUTING.md 的说明，frontmatter 是 Markdown 文件正文之前的元数据块，站点构建时会据此生成页面信息：contributors以[*作者*, *URL*]列表形式记录贡献者，翻译文章还应包含translators字段（德文版 de/html.md 记录了译者 Dennis Keller，中文版 zh-cn/html.md 记录了译者 zxyqwe）。法文版仅列出 contributors，是因为其作者即英文原版作者本人，可视为"同作者自译"的情况。

仓库的 lint/frontmatter.py 会校验每个.md文件的 frontmatter：允许的键为name、where_x_eq_name、category、filename、contributors、translators，其中contributors与translators必须是"字符串列表的列表"（每个条目为 1～2 个元素的列表，第一个元素必须是字符串）。同时 lint/encoding.sh 会检查所有 Markdown 文件必须为 UTF-8 或 US-ASCII 编码且不得带 UTF-8 BOM——这也是 HTML 教程本身强调"文本文件"的仓库级佐证。

三、第一个完整 HTML 文件：整体结构逐行拆解

法文原文档给出了一份带注释的完整示例，这是全文的核心骨架。下面将其完整复现并逐部分拆解：

<!-- 注释的写法：像本行一样被尖括号加感叹号包围 --> <!doctype html> <html> <head> <title>Mon Site</title> </head> <body> <h1>Hello, world!</h1> <a href = "http://codepen.io/anon/pen/xwjLbZ">Venez voir ce que ça donne</a> <p>Ceci est un paragraphe</p> <p>Ceci est un autre paragraphe</p> <ul> <li>Ceci est un item d'une liste non ordonnée (liste à puces)</li> <li>Ceci est un autre item</li> <li>Et ceci est le dernier item de la liste</li> </ul> </body> </html>

这个 13 行的小文件已经覆盖了 HTML5 文档的标准四层骨架，法文原文依次给出了每层的注释说明：

一个重要的观察点（法文原文专门强调）：在<body>出现之前，浏览器窗口里什么都还不会显示——<head>中的一切只服务于浏览器与搜索引擎，而非读者。

四、注释：教程即代码的书写方式

本仓库的核心理念是"代码即文档"（README.md 写道：Whirlwind tours……presented as valid, commented code）。HTML 注释写法如下：

<!-- 单行注释像这样 --> <!-- 多行注释 可以 跨越多行 -->

在 fr/html.md 中，几乎每一行示例代码都配有一行法文注释，例如：

• <!-- La balise <title> permet d'indiquer au navigateur le titre à afficher dans la barre de l'onglet de la fenêtre -->（<title>告诉浏览器在窗口标签栏显示什么标题）；
• <!-- La balise <p> permet d'inclure du texte à la page html -->（<p>用于向页面加入文本）。

这种"代码 + 行内注释"的组织方式，正是 CONTRIBUTING.md 所要求的"Prefer example to exposition（示例优先于说明）"——能用代码示例表达的就尽量少用文字，这也是读者在阅读本仓库任何教程时应养成的阅读习惯。

五、头部<head>：页面元数据区

<head>必须由</head>闭合，法文原文明确指出其中存放的是"不会被显示的描述与附加信息，即元数据（métadonnées）"：

<head> <title>Mon Site</title><!-- 标签栏标题 --> </head>

其中<title>是头部最实用的标签：它决定浏览器窗口标题栏与标签页上显示的文字（英文版 html.md 补充：还影响标签页名称）。实际项目中，<head>内通常还会放置<meta charset="utf-8">、<meta name="description">、样式表与脚本引用等——这些在法文教程中虽未展开，但"元数据区"这一定位已为其预留了理解空间。

六、主体<body>：结构与内容的五大核心标签

<body>是文档中唯一会被用户看到的部分。法文教程依次介绍了五大类内容标签：

1. 标题层级<h1>～<h6>

<h1>Hello, world!</h1>

<h1>用于结构化文本，创建一级标题；法文原文特别说明：<h1>之下还存在一系列从最重要（<h2>）到最具体（<h6>）的六级子标题。合理使用标题层级不仅是排版问题，更是 HTML5 语义化与无障碍访问的基础。

2. 超链接<a href="...">

<a href = "http://codepen.io/anon/pen/xwjLbZ">Venez voir ce que ça donne</a>

<a>标签配合href属性创建超链接，href中填入目标地址。法文版示例写法为href = "..."（属性名与值之间带空格），英文原版 html.md 则写作紧凑的href="..."——两种写法浏览器均能正确解析，现代写法推荐不加空格。href的值既可以是完整的 URL，也可以是站内相对路径。

3. 段落<p>

<p>Ceci est un paragraphe</p> <p>Ceci est un autre paragraphe</p>

<p>是最基础的文本容器，用于把文字组织成语义独立的段落，多个<p>之间浏览器会自动产生间距。

4. 无序列表<ul>+<li>

<ul> <li>Ceci est un item d'une liste non ordonnée (liste à puces)</li> <li>Ceci est un autre item</li> <li>Et ceci est le dernier item de la liste</li> </ul>

<ul>引入"项目符号列表"（无序列表），每个列表项用<li>包裹。法文原文还给出了它的姊妹标签：若需要有序列表，改用<ol>，浏览器会自动编号（第一项标 1.、第二项标 2.，依此类推）。列表必须遵循<ul>/<ol>中直接嵌套<li>的正确层级结构。

5. 图片<img src="...">

<img src="http://i.imgur.com/XWG0O.gif"/>

<img>用于插入图片，src属性指定图片来源——法文原文明确：来源可以是一个 URL，也可以是本地计算机上的文件路径。注意<img>是自闭合标签（写法上以/>结尾），这是它与前述成对标签的关键区别；在现代 HTML5 实践中，<img src="...">不写斜杠同样合法。

七、表格：<table>、<tr>、<th>、<td>

法文教程用一段完整的示例讲解了表格的四层结构：

<table> <!-- 打开表格 --> <tr> <!-- 创建一行 --> <th>First Header</th> <!-- 表头单元格 --> <th>Second Header</th> </tr> <tr> <td>Première ligne, première cellule</td> <!-- 普通单元格 --> <td>Première ligne, deuxième cellule</td> </tr> <tr> <td>Deuxième ligne, première cellule</td> <td>Deuxième ligne, deuxième cellule</td> </tr> </table>

各标签职责一目了然：

• <table>：表格的根容器，必须成对出现；
• <tr>（table row）：定义一行；
• <th>（table header）：定义表头单元格，浏览器默认加粗居中；
• <td>（table data）：定义普通数据单元格。

示例展示的是一个 2 列 × 3 行（含表头行）的表格，行与列由<tr>与单元格的排列顺序共同决定。

八、使用与验证：如何运行你的第一个页面

法文文档的 "Utilisation" 一节给出最简用法：HTML 写在.html文件中。英文原版补充了完整信息：扩展名为.html或.htm，MIME 类型为text/html。

具体操作流程（无需任何构建工具）：

1. 用任意文本编辑器（记事本、VS Code 等）新建文件ma-page.html；
2. 按上文第三节的骨架粘贴内容并保存（注意 UTF-8 编码，这与 lint/encoding.sh 对仓库文件的编码要求一致）；
3. 用浏览器直接打开该文件（双击或拖入浏览器窗口），即可看到渲染结果——<h1>大标题、超链接、两个段落、项目符号列表。

由于 HTML 是纯文本格式，修改后刷新浏览器即可即时生效，非常适合边写边验证。文档中提到的在线练习平台（如 CodePen）可以让你在浏览器里实时试玩各标签效果，但本文按规范不展开外部链接——仓库内部的 英文原版 与各语言译本本身就是最贴近原文的对照资料。

九、多语言译本对照：一处语法、多语收获

HTML 教程在仓库中有大量语言版本，除法文外，英文 html.md、德文 de/html.md、西班牙文 es/html.md、中文 zh-cn/html.md、阿拉伯文 ar/html.md、葡萄牙文 pt-br/html.md 等均已存在。各版本核心代码完全一致，差异仅在注释语言与个别补充说明：

• 英文版补充了"多行注释"写法（html.md），并明确.htm扩展名与text/htmlMIME 类型；
• 德文版对每个标签都配了更细的德文行内注释（如 de/html.md）；
• 中文版将示例标题译为"我的网站"、段落译为"这是一个段落"（zh-cn/html.md）。

这种"同一套代码、多语言注释"的结构，正是 README.md 所欢迎的"任何语言的翻译与原创文章"的产物。对于学习者而言，对照阅读不同语言版本还能顺带复习外语技术词汇。

十、进阶提示：把本文档放入仓库语境

如果你打算在本仓库贡献或改进 HTML 教程，CONTRIBUTING.md 提供了三条硬性规范，同样适用于 fr/html.md 这类翻译文件：

1. 代码块内行宽尽量不超过 80 字符（CONTRIBUTING.md），过长的行会溢出排版；
2. 优先用示例而非解释（CONTRIBUTING.md），并保持文章简洁易扫读；
3. 文件必须为 UTF-8，且 frontmatter 键需通过 lint/frontmatter.py 的校验（该脚本会对contributors、translators等字段做类型与结构检查）。

从源码结构看，仓库通过 lint/encoding.sh 的check_encoding函数对全部*.md文件做 UTF-8/BOM 检查，配合 lint/frontmatter.py 的键校验，共同保证每一篇教程（含本文所依托的 fr/html.md）在站点构建时都能被正确解析——这也是"代码即文档"理念在工程质量层面的落地。

小结

本文以法文版 fr/html.md 为主线，完整覆盖了 HTML5 的核心语法：文档四层骨架（<!doctype html>、<html>、<head>、<body>）、注释写法、标题六级体系、<a>超链接、<p>段落、<ul>/<ol>列表、<img>图片与<table>表格。同时结合英文原版与仓库规范，补充了.html/.htm扩展名、text/htmlMIME 类型、"HTML 不是编程语言"的定位，以及本仓库"示例优先、UTF-8、frontmatter 校验"的内容规范。掌握这些要素，你就能独立写出结构正确、语义清晰的 HTML5 页面，并读懂 Learn X in Y minutes 系列教程"带注释代码即教学"的独特组织方式。

• 文档
• 教程