2.1 基本文档结构
大家好！从这一节开始，我们要正式学习HTML5的"骨架"是怎么搭建的。就像盖房子需要先打地基一样，学习HTML5也要从最基础的文档结构开始。别担心，我会用最简单的方式带你理解这些概念。
一、HTML文档就像一封信
我们可以把HTML文档想象成一封信，它有着固定的格式：
信封（文档声明）
信头（head部分）
信的内容（body部分）1. 文档声明 - 告诉浏览器"这是一封HTML5的信"
<!DOCTYPE html>这行代码必须放在最前面，就像信封上要写明"这是一封信"一样。它告诉浏览器："请用HTML5的标准来读我"。
小练习：试着在代码编辑器里输入这行代码，注意全部要大写哦！
2. html根元素 - 信的"大信封"
<html lang="zh-CN">
</html>- 所有内容都要放在这对<html>标签里面
- lang="zh-CN"表示这是中文网页，能帮助屏幕阅读器正确发音
二、信的头和身体
1. head部分 - 信的Title "抬头"
<head>
<meta charset="UTF-8">
<title>我的第一个网页</title>
</head>head部分包含的是"看不见"的信息：
- <meta charset="UTF-8">：确保中文能正常显示
- <title>：网页的标题，会显示在浏览器标签页上
比喻：就像写信时要写明"亲爱的..."和日期，虽然不算是信的正文内容，但很重要。
2. body部分 - 信的"正文"
<body>
<h1>欢迎来到我的网站</h1>
<p>这是我的第一个网页！</p>
</body>这里放所有你看得见的内容：文字、图片、视频等等。
三、完整的HTML5文档模板
把上面的部分组合起来，就是一个最基础的HTML5页面：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我的第一个网页</title>
</head>
<body>
<h1>你好，世界！</h1>
<p>我正在学习HTML5</p>
</body>
</html>四、动手时间：创建你的第一个网页
让我们一步一步实际操作：
- 打开VS Code（或其他文本编辑器）
- 新建一个文件，命名为index.html
- 输入上面的完整代码
- 保存文件
- 用浏览器打开这个文件
你应该能看到一个显示"你好，世界！"和"我正在学习HTML5"的简单网页了！
五、常见问题解答
Q1：为什么我的中文显示乱码？
A：请确认：
- 有<meta charset="UTF-8">这行代码
- 文件保存时编码选UTF-8
- 编辑器设置是UTF-8编码
Q2：<!DOCTYPE html>可以省略吗？
A：最好不要！没有它浏览器可能会用旧的标准显示网页，导致样式错乱。
Q3：为什么我的修改没生效？
A：请确保：
- 修改后保存了文件
- 浏览器刷新了页面
- 没有打开其他同名文件
六、小测验
- HTML文档的"根元素"是什么标签？<head><body><html>
- 下面哪项是放在<head>里的？<title><h1><p>
- 确保中文正常显示需要什么？<meta name="Chinese"><meta charset="UTF-8"><html lang="English">
七、扩展知识
虽然我们现在只用了最基本的标签，但HTML5还有很多语义化标签可以让结构更清晰，比如：
<header>网页头部</header>
<nav>导航栏</nav>
<main>主要内容</main>
<footer>页脚</footer>