课时05：HTML5 文档骨架¶
学习目标：掌握 HTML5 标准文档结构的完整组成，理解 DTD、字符集、视口配置及 SEO 元标签的作用，能够独立搭建符合标准的 HTML5 页面骨架。
一、HTML5 标准骨架结构¶
一个完整的 HTML5 文档由以下层级构成：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面标题</title>
</head>
<body>
<!-- 页面可视内容区域 -->
</body>
</html>
1.1 各组成部分职责¶
| 组成部分 | 标签/声明 | 职责说明 |
|---|---|---|
| DTD | <!DOCTYPE html> |
声明文档类型，告知浏览器按 HTML5 标准解析 |
| 根元素 | <html> |
包裹整个文档内容，设置页面主语言 |
| 头部区域 | <head> |
存放页面配置信息（不可见），如字符集、标题、样式链接、元数据 |
| 主体区域 | <body> |
存放页面可视内容，即用户在浏览器中看到的所有元素 |
二、DTD 文档类型声明¶
2.1 什么是 DTD¶
DTD（Document Type Definition，文档类型定义） 是 HTML 文件的第一行代码，用于告知浏览器当前文档应遵循的 HTML 标准版本。
2.2 HTML5 的 DTD 写法¶
<!表示警示声明的开始DOCTYPE表示文档类型声明html表示遵循 HTML5 标准
2.3 历史版本 DTD 对比¶
| 版本 | DTD 写法 | 复杂度 |
|---|---|---|
| HTML 4.01 Strict | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ...> |
复杂 |
| XHTML 1.0 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ...> |
复杂 |
| HTML5 | <!DOCTYPE html> |
极简 |
HTML5 的 DTD 大幅简化，是向前兼容设计的重要体现。
三、HTML 标签与 lang 属性¶
3.1 <html> 标签的作用¶
<html> 是文档的根元素，所有其他标签都必须嵌套在其内部。它包含两个直接子元素：<head> 和 <body>。
3.2 lang 属性详解¶
lang 属性定义文档的主体语言，对搜索引擎、屏幕阅读器及浏览器默认字体渲染均有影响：
| 属性值 | 含义 | 适用场景 |
|---|---|---|
en |
英语 | 英文内容页面 |
zh |
中文（通用） | 中文内容页面 |
zh-CN |
简体中文 | 中国大陆简体中文页面 |
zh-TW |
繁体中文 | 中国台湾繁体中文页面 |
ja |
日语 | 日文内容页面 |
ko |
韩语 | 韩文内容页面 |
实践建议：开发中文网站时，推荐使用
lang="zh-CN"，而非简单的zh。
四、字符集（Charset）配置¶
4.1 字符集的作用¶
字符集决定了浏览器如何解析和显示文档中的文字。若编码与解码字符集不一致，将导致乱码问题。
4.2 常用字符集对比¶
| 字符集 | 全称 | 汉字字节数 | 覆盖范围 | 适用场景 |
|---|---|---|---|---|
| UTF-8 | Unicode 转换格式 | 3 字节/汉字 | 全球所有语言字符 | 国际化网站、现代开发首选 |
| GB2312 | 国标简体字符集 | 2 字节/汉字 | 简体中文 + 少量符号 | 早期中文网站 |
| GBK | 国标扩展字符集 | 2 字节/汉字 | 简体中文 + 繁体 + 日文假名等 | 纯中文环境 |
4.3 字符集设置方法¶
在 <head> 中使用 <meta> 标签配置：
4.4 为什么 UTF-8 是现代标准¶
- 全球兼容性：覆盖全球所有主要语言字符，无需为不同语言切换字符集
- 国际化趋势：现代 Web 应用面向全球用户，UTF-8 是唯一通用解决方案
- 标准推荐：W3C 将 UTF-8 作为 HTML5 的默认推荐字符集
- 框架兼容：React、Vue、Angular 等现代框架默认使用 UTF-8
字节验证：在 UTF-8 编码下，删除一个汉字，文件大小减少 3 字节；在 GBK 编码下，减少 2 字节。
4.5 字符集修改操作¶
若文件已保存为 GBK 编码，需转换为 UTF-8：
- 修改代码中
<meta charset="UTF-8"> - 在 VS Code 右下角查看当前编码标识（如 "GBK"）
- 点击编码标识 → 选择「通过编码保存」
- 在弹出的字符集列表中选择 UTF-8 并确认
五、Viewport 视口配置¶
5.1 视口标签的作用¶
该标签是移动端适配的核心配置，控制网页在移动设备上的显示方式：
width=device-width：将视口宽度设为设备屏幕宽度initial-scale=1.0：初始缩放比例为 1.0（即不缩放）
5.2 有无视口标签的对比¶
| 状态 | 效果 |
|---|---|
| 有视口标签 | 手机端文字大小正常，内容自适应屏幕宽度 |
| 无视口标签 | 手机端文字极小，需手动缩放，用户体验极差 |
学习阶段提示：此标签属于移动端开发知识，入门阶段只需了解其存在和作用，后续响应式布局课程会深入讲解。
六、Head 区域其他配置¶
6.1 Title 标签¶
- 显示在浏览器标签页的左上角
- 是搜索引擎结果页（SERP）中的核心展示文本
- 对 SEO 排名有直接影响
6.2 SEO 优化 Meta 标签¶
<!-- 页面描述：搜索引擎结果页中的摘要文本 -->
<meta name="description" content="这是一个关于HTML5学习的专业页面">
<!-- 关键词：辅助搜索引擎理解页面主题（权重已降低，但仍建议填写） -->
<meta name="keywords" content="HTML5, 前端开发, 网页设计">