HTML 文档结构

概述

HTML（超文本标记语言）是构建网页的基础。一个HTML文档由一系列的标签组成，这些标签定义了网页的结构和内容。理解HTML文档的基本结构是学习HTML的第一步。

HTML 文档的基本结构

一个标准的HTML文档通常包含以下几个部分：

1. 文档类型声明 (<!DOCTYPE html>)
2. HTML 根元素 (<html>)
3. 头部 (<head>)
4. 主体 (<body>)

1. 文档类型声明 (<!DOCTYPE html>)

文档类型声明告诉浏览器当前文档使用的HTML版本。对于HTML5，文档类型声明非常简单：

<!DOCTYPE html>

2. HTML 根元素 (<html>)

<html> 标签是HTML文档的根元素，所有其他元素都包含在这个标签内。

<html lang="zh-CN">

lang 属性用于指定文档的语言，这里我们使用 zh-CN 表示中文（简体）。

3. 头部 (<head>)

<head> 标签包含了文档的元数据，如标题、字符集、样式表链接等。这些信息不会直接显示在网页上，但它们对网页的显示和行为至关重要。

<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>

• <meta charset="UTF-8"> 定义了文档的字符编码为UTF-8，这是最常用的字符编码。
• <title> 标签定义了网页的标题，这个标题会显示在浏览器的标签栏中。

4. 主体 (<body>)

<body> 标签包含了网页的主要内容，如文本、图像、链接等。这是用户在浏览器中实际看到的部分。

<body>
    <h1>欢迎来到我的网页</h1>
    <p>这是一个段落。</p>
</body>

• <h1> 标签定义了一个一级标题。
• <p> 标签定义了一个段落。

完整的 HTML 文档示例

将上述所有部分组合在一起，我们得到一个完整的HTML文档：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
    <h1>欢迎来到我的网页</h1>
    <p>这是一个段落。</p>
</body>
</html>

实践练习

练习 1: 创建一个简单的HTML文档

1. 打开你喜欢的文本编辑器（如VS Code、Sublime Text等）。
2. 创建一个新文件，并将其保存为 index.html。
3. 按照上面的示例，编写一个简单的HTML文档。
4. 在浏览器中打开 index.html 文件，查看效果。

练习 2: 添加更多内容

1. 在 <body> 标签内添加更多的标题和段落。
2. 尝试添加一个列表 (<ul> 或 <ol>) 和一个链接 (<a>)。
3. 保存文件并在浏览器中查看效果。

总结

理解HTML文档的基本结构是学习HTML的第一步。通过本教程，你应该已经掌握了如何创建一个简单的HTML文档，并了解了文档的基本组成部分。继续学习更多HTML标签和属性，你将能够创建更复杂的网页。

下一步

接下来，你可以学习更多关于HTML的常用标签和属性，或者开始探索HTML5的新特性。继续前进，你会发现网页开发的无限可能！