上下文

想象一下你在文字处理软件（如 Microsoft Word 或 Google Docs）中创建的文档。这类文档通常包含多种样式，使用不同的字体大小来区分文本的不同部分，例如标题、正文、页脚、目录、图注等。

虽然人类可以一眼看出标题和段落的区别，但计算机并没有这种直觉。为了让浏览器正确渲染网页，必须明确告诉它每部分内容的含义。

使用 HTML 元素定义结构

那么，我们究竟该如何告诉浏览器每部分内容是什么？这时就轮到超文本标记语言（简称 HTML）发挥作用了。HTML 是一种标记语言，用于描述网页的结构或布局。我们通过将内容包裹在 HTML 元素中来定义这种结构。

一个 HTML 元素由一个标签构成，标签用来标识页面上的每一段内容。例如，<p> 标签用于表示一个段落的 HTML 元素。
其他常见的 HTML 元素还包括：

• <h1>：最高级别的标题
• <h6>：最低级别的标题
• <img>：图像
• <a>：锚点，用于创建指向其他网页、文件、电子邮件地址等内容的超链接

大多数 HTML 元素都包含开始标签和结束标签，以标明元素的起始和结束位置，例如：

1<p>这是一个段落元素。</p>

也有一些例外情况，比如 <img> 标签。

一个基本的 HTML 文件

让我们来看一个基础的 HTML 文件，以便更好地理解如何使用标记来定义网页的结构：

1<!DOCTYPE html>
2<html> 
3  <head>
4    <title>一个简单的网页</title>
5  </head>
6  <body>
7    <h1>我的第一个 HTML 文件</h1>
8    <p>恭喜！你已经踏上创建自己网页的道路。</p>
9  </body>
10</html>

第 1 行： <!DOCTYPE html> 称为文档类型声明。它告诉浏览器该文件使用的 HTML 版本。此处指定 html 表示该文件使用的是 HTML5。

第 2 行： 请注意，<html> 的闭合标签位于文件的最后一行。HTML 元素的一个重要特性是它们可以嵌套，也就是说，一个 HTML 元素可以包含在另一个 HTML 元素中。这形成了一种类似树状的结构，通常被称为树形结构。

在 HTML 文件中，我们用 <html> 标签来表示根元素。在这个根元素内部，包含多个子元素，这些可以看作是根节点的分支：

<img src="http://network.jancsitech.net:9000/pageflex-ai/images/general/202509/1758371906637377618.svg" alt="HTML 文件具有树状结构，其中 是根元素。

要正确地定义一个 HTML 文件，必须将 <head> 和 <body> 元素放在根元素 <html> 内部。

<head> 元素包含关于文件的辅助信息，通常称为元数据。为了使 <head> 完整，必须在其内部直接包含一个 <title> 标签（为网页提供标题）。此外，<head> 还可以包含对 JavaScript 文件和 CSS 样式表的引用。

<body> 元素包含网页的主要内容。这是浏览器实际渲染的信息所在的位置。一个 HTML 文件中只能有一个 <body> 元素，你编写的大部分 HTML 代码都会出现在这个元素内部。

在这个文件的 <body> 中，我们有一个一级标题（<h1>）和一个段落（<p>）。

在浏览器中渲染 HTML 文件

现在，我们来看看这个网页在浏览器中的显示效果：

注意： 对于所有练习题，请在编写完答案后等待几秒钟，再点击“测试”按钮。

练习

在你的 HTML 文件中添加一个顶级标题，并在其下方添加一个段落。标题和段落的内容可以任意填写。