Learn X in Y minutes 系列：HTML5 核心语法与网页结构实战指南

• 文档
• 教程

HTML（HyperText 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 之类的平台），把教程中的示例粘贴进去，即可立刻看到渲染结果，从而直观理解每个标签的作用、加深对语言的熟悉程度。

在本地环境中，你只需要两样东西：

1. 任意文本编辑器（记事本、VS Code 等均可）；
2. 任意现代浏览器（Chrome、Firefox、Edge、Safari 等）。

将 HTML 代码保存为.html文件后用浏览器直接打开，即可查看渲染效果——这也是最贴近实际开发的验证方式。

第一个 HTML 页面：一个完整的可运行示例

原文档用一个“将被逐步分析”的完整示例文件带领读者入门。下面是与原文档等价的完整页面，我们会在后续章节逐层拆解它的每一部分：

<!-- 注释的写法，就像这一行 --> <!-- #################### 标签（Tags）#################### --> <!-- 下面是一个我们即将分析的示例 HTML 文件 --> <!doctype html> <html> <head> <title>我的网站</title> </head> <body> <h1>你好，世界！</h1> <a href="http://codepen.io/anon/pen/xwjLbZ">看看这个链接</a> <p>这是一个段落。</p> <p>这是另一个段落。</p> <ul> <li>这是一个无序列表项</li> <li>这是另一个列表项</li> <li>这是列表的最后一项</li> </ul> </body> </html>

这段代码虽短，却覆盖了 HTML5 页面的全部骨架要素。我们接下来从上到下逐层解析。

HTML 文档骨架：四层结构逐级拆解

1. 文档类型声明：<!doctype html>

HTML 文件的开头总是先向浏览器声明“本页面使用的是 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>我的网站</title>

4. 主体：<body>

<head>之后几乎总是<body>。到目前为止，浏览器窗口里还没有显示任何内容——头部中的一切都不可见。只有放入<body>中的内容才会呈现在浏览器中：

<body> <!-- 这里放置所有需要显示的内容 --> </body>

原文档用一句话点明了这一设计：把“元数据”和“可见内容”分离，正是 HTML 文档结构清晰、职责分明的根基。

正文常用标签：从标题到表格

标题：<h1>～<h6>

<h1>标签创建页面主标题：

<h1>你好，世界！</h1>

HTML 还提供了从最重要到最次要的六级标题，供组织内容层级使用：<h1>最重要，<h2>、<h3>……依次递减，直到最精确的<h6>。合理使用标题层级不仅利于阅读，也利于搜索引擎理解页面结构。

超链接：<a>与href属性

<a>标签创建一个指向给定 URL 的超链接，点击即可在浏览器中跳转，目标地址由href属性指定：

<a href="http://codepen.io/anon/pen/xwjLbZ">看看这个链接</a>

href是<a>的核心属性，它既可以是完整的网络 URL，也可以是站内相对路径。

段落：<p>

<p>标签让我们在页面中加入文本段落：

<p>这是一个段落。</p> <p>这是另一个段落。</p>

每个<p>自成一段，浏览器会自动在段落之间留出间距。

列表：<ul>、<ol>与<li>

<ul>标签创建一个带圆点符号的无序列表：

<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 src="http://i.imgur.com/XWG0O.gif"/>

<img />是自闭合标签（在 XHTML 风格中写作<img />，HTML5 中<img>也可），它没有闭合标签。

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

同样来自英文原版补充：HTML 还可以创建表格。先用<table>打开表格元素：

<table>

<tr>用于创建一行：

<tr>

<th>用于给表格列设置标题：

<th>第一列标题</th> <th>第二列标题</th>

<td>用于创建表格单元格：

<td>第一行，第一列</td> <td>第一行，第二列</td>

将三者组合起来，就是一个完整的 2 行 2 列表格：

<table> <tr> <th>First Header</th> <th>Second Header</th> </tr> <tr> <td>first row, first column</td> <td>first row, second column</td> </tr> <tr> <td>second row, first column</td> <td>second 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 编码且不含 BOM；CONTRIBUTING.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 与周边技术栈的关系。

• 文档
• 教程