# 基础入门-第2章-2.1-HTML文档结构
## 学习目标
- 理解HTML文档的基本结构与各组成部分的作用
- 掌握``声明的意义及正确写法
- 能够独立编写符合HTML5标准的文档框架
## 概念讲解
HTML文档是由一系列标签和内容组成的文本文件，遵循严格的结构规范。一个完整的HTML5文档通常包含**文档声明**、**根元素**、**头部**和**主体**四部分，这种结构化设计确保浏览器能够正确解析和渲染网页内容。
**核心组成部分**：
- **文档声明（``）**：位于文档最开头，告诉浏览器当前文档使用HTML5标准解析，无此声明可能导致浏览器进入"怪异模式"（Quirks Mode），渲染结果不一致。
- **根元素（``）**：整个文档的包裹标签，所有其他元素都嵌套在其中，通常包含`lang`属性指定页面语言（如`lang="zh-CN"`表示中文）。
- **头部（``）**：包含文档的元数据（Metadata），如标题、字符集、样式链接、脚本引用等，这些信息不直接显示在页面上，但影响文档的解析和表现。
- **主体（``）**：包含页面的可见内容，如文本、图片、链接、表格等，是用户直接交互的区域。
## 语法参考
### 基本文档结构模板
```html
HTML文档结构示例
这是页面标题
这是页面正文内容
```
### 关键标签说明
| 标签/声明 | 作用描述 | 注意事项 |
|-----------------|--------------------------------------------------------------------------|--------------------------------------------------------------------------|
| `` | 声明文档类型为HTML5，必须位于第一行，不区分大小写（推荐小写） | 不可省略，否则可能导致CSS布局异常（如盒模型计算错误） |
| `` | 根元素，`lang`属性用于指定页面主要语言，帮助搜索引擎和屏幕阅读器识别 | 建议始终添加，提升可访问性和SEO友好度 |
| `` | 指定文档字符编码为UTF-8，支持全球大部分语言文字 | 必须放在``内最前面，否则可能导致中文等字符乱码 |
| `` | 控制移动端页面显示（视口设置），`width=device-width`确保页面宽度适配设备宽度 | 响应式设计必备，缺失可能导致移动端页面缩放异常 |
| `
` | 定义页面标题，显示在浏览器标签页上，也是搜索引擎结果的主要标题来源 | 长度建议不超过60个字符，包含核心关键词 |
## 实战示例
### 示例1：最小化HTML5文档
```html
<title>最小化文档
这是一个最简单的HTML5文档
```
**说明**：包含最基本的文档声明、根元素、字符集和标题，可在所有现代浏览器中正确渲染。
### 示例2：完整响应式文档框架
```html
响应式文档框架
页面主要内容...
```
**说明**：包含视口设置、元数据（描述、关键词）、外部资源引用，以及语义化结构标签（`
`/``/`