HTML基本结构

在本章节中，我们将学习HTML文档的基本结构，这是构建任何HTML网页的基础。

1. 什么是HTML文档结构？

HTML文档是由一系列标签组成的文本文件，这些标签定义了网页的结构和内容。一个完整的HTML文档有一个标准的结构，所有浏览器都能理解和渲染。

2. HTML文档的基本组成

一个标准的HTML5文档结构包括以下几个部分：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>我的第一个HTML页面</title>
</head>
<body>
    <h1>欢迎来到HTML世界！</h1>
    <p>这是我的第一个HTML页面。</p>
</body>
</html>

让我们逐个解释每个部分：

3. DOCTYPE声明

<!DOCTYPE html>

作用：告诉浏览器这是一个HTML5文档
位置：必须放在HTML文档的第一行
特点：不区分大小写，没有结束标签
历史：HTML5之前的版本需要更长的DOCTYPE声明，HTML5简化了这个过程

4. `<html>` 标签

<html>
    <!-- 文档内容 -->
</html>

作用：HTML文档的根标签，包含了所有其他HTML标签
位置：DOCTYPE声明之后
属性：可以包含lang属性，指定文档的语言，如lang="zh-CN"表示中文

5. `<head>` 标签

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

作用：包含文档的元数据（不会显示在页面上，但对浏览器和搜索引擎很重要）
常见内容：
- 字符集声明
- 页面标题
- 样式表链接
- 脚本引用
- 元信息

6. `<body>` 标签

<body>
    <h1>欢迎来到HTML世界！</h1>
    <p>这是我的第一个HTML页面。</p>
</body>

作用：包含浏览器显示的所有内容，如文本、图像、链接、表格等
特点：一个HTML文档只能有一个<body>标签

7. 第一个HTML页面实战

步骤1：创建HTML文件

打开一个文本编辑器（如记事本、VS Code、Sublime Text等）
复制上面的完整HTML代码
保存文件为first.html（确保文件扩展名为.html）

步骤2：在浏览器中打开

找到保存的first.html文件
双击文件，它会在默认浏览器中打开
你将看到页面上显示"欢迎来到HTML世界！"和"这是我的第一个HTML页面。"

8. 常见问题解答

Q: 为什么我的HTML文件显示为文本而不是网页？

A: 可能是因为文件扩展名不是.html或.htm，请检查文件保存时的扩展名。

Q: DOCTYPE声明必须写吗？

A: 是的，DOCTYPE声明告诉浏览器使用什么模式来渲染页面，不写可能导致浏览器使用兼容模式，显示效果不一致。

Q: `<head>`标签里的内容会显示在页面上吗？

A: 不会，<head>标签里的内容是元数据，用于描述页面信息，不会直接显示在浏览器窗口中。

9. 练习项目

创建一个HTML文件，包含以下内容：
- 正确的DOCTYPE声明
- 中文语言设置（lang="zh-CN"）
- 页面标题为"我的练习页面"
- 页面主体包含一个一级标题和两个段落
在浏览器中打开文件，验证显示效果

10. 小结

HTML文档有固定的基本结构
DOCTYPE声明告诉浏览器文档类型
<html>是根标签，包含所有其他标签
<head>包含元数据，如标题、字符集等
<body>包含页面的可见内容

在下一章节中，我们将学习HTML元素的详细知识。