南希说在学习网页制作的过程中，我们首先要掌握的就是 网页的基本结构。这一点就好比盖房子之前要先打地基，只有结构稳固，后续的装修和扩展才有意义。今天我们就来复盘一下网页的基本结构，并进一步了解网页标准随着时间的发展，经历了怎样的“版本迭代”。
一、最基本的网页结构
一个网页文件（通常后缀为 .html）最基础的样子大概长这样：
<html>
<head>
<title>我的第一个网页</title>
</head>
<body>
<h1>欢迎来到我的网站！</h1>
<p>这里是正文内容。</p>
</body>
</html>
我们来拆解一下这段代码：
<html>...</html>：所有网页的根标签，告诉浏览器“这里是一份HTML文档”。<head>...</head>：网页的头部信息，不直接显示在页面上，通常放标题、编码、样式等信息。<title>...</title>：定义网页的标题，会显示在浏览器标签上。
<body>...</body>：网页的主体部分，用户可以直接看到的内容，比如文字、图片、视频等。
如果能清楚地记住并理解上面的结构，就说明我们的学习已经有了一个不错的开始。
不过，别急着以为这就是“完美”的网页结构。
事实上，随着互联网的发展，这个结构还需要一些“升级版”的内容才能真正符合标准。
二、网页与万维网的演变
在刚刚学完基础结构时，很多人会觉得：
“这不就是 <html> 包 <head> 和 <body> 吗？这么简单，应该就够了吧？”
其实并不是这样。因为网页和互联网的发展，就像软件和游戏一样，也会不断更新升级。
1. 万维网的诞生
- 万维网（World Wide Web）的发明者是 蒂姆·伯纳斯·李爵士（Tim Berners-Lee）。
- 在 1991年8月6日，全球第一个网站在欧洲核子研究中心（CERN）上线。
- 当时的网页非常简单，只能显示一些超链接和少量文字。
2. 网页标准的变化
互联网从90年代发展至今，已经经历了几十年的变迁。
在这个过程中，网页技术也不断升级迭代：
- HTML 2.0：最早期的标准，用来解决最基础的文本和超链接展示。
- HTML 3.2 / 4.01：逐渐支持了表格、图片、样式等内容，是很多“经典网页”的基础。
- XHTML：在 2000 年左右出现，更加严格，强调标签必须正确闭合，但使用起来比较麻烦，后来逐渐被淘汰。
- HTML5：目前的主流标准，功能强大，支持多媒体（音频、视频）、更语义化的标签，以及更丰富的交互。
3. 为什么要迭代？
就像我们玩游戏，可能会经历 1.0 → 2.0 → 3.0 版本的更新一样，网页标准也需要升级：
- 适应新的需求（例如：过去没有在线视频，如今视频已是刚需）。
- 修复旧版本的不足（例如：XHTML 太严格，开发效率低）。
- 提供更好的兼容性和更简洁的写法（HTML5 更容易学习）。
所以我们今天学到的网页结构，和二十多年前的网页结构，已经不是同一个“版本”了。
这就是网页的 版本迭代 —— 它让网页功能越来越强大，同时也让开发者更高效。
三、HTML版本差异与浏览器解析
既然网页标准会迭代更新，那一个问题就出现了：
我们写的网页到底是 HTML4 的还是 HTML5 的呢？
1. 常见的HTML版本
- HTML4：大约在1997年发布，使用了很多年，是过去最常见的网页标准。
- XHTML：试图让HTML更严格（类似XML），要求标签必须成对闭合，但用起来麻烦，后来逐渐淘汰。
- HTML5：2008年提出，2014年正式定稿，是我们现在主流的网页标准。
2. HTML4 和 HTML5 的差别
- 语法差别：
- HTML4 语法较繁琐，例如插入视频、音频需要借助 Flash 等插件；
- HTML5 引入了
<video>、<audio>等新标签，更加简洁。
- 功能差别：
- HTML5 支持本地存储、Canvas绘图、Geolocation（地理定位）等现代功能；
- HTML4 在这些方面几乎没有能力。
所以说，HTML4 和 HTML5 并不完全一样。
如果它们完全一样，那就没必要推出HTML5了，对吧？
3. 浏览器是怎么解析的？
我们作为开发者，知道自己在写 HTML5 的代码。
但是浏览器能不能自动分辨出来呢？
答案是：浏览器默认并不知道。
- 虽然 HTML4 和 HTML5 的大部分语法相似，
- 但如果浏览器“猜错版本”，可能会出现兼容性问题。
举个例子：
你用 <video> 标签插入了一个视频。
- 如果浏览器按照 HTML5 来解析，它能正常播放。
- 如果浏览器错误地按照 HTML4 来解析，它可能会当成无效代码，从而不显示视频。
所以，我们必须要 明确告诉浏览器：
“嘿，这个网页是 HTML5 的标准，请你按HTML5来解析！”
四、文档声明（DOCTYPE）的作用
既然浏览器自己并不知道我们写的是哪一个版本的HTML，那么我们就需要一个“说明书”来告诉它。
这个“说明书”就是 —— 文档声明（英文：Document Type Declaration，简称 DOCTYPE）。
1. 什么是文档声明？
- 定义：文档声明用来告诉浏览器：“我这个网页使用的是哪一个HTML版本标准。”
- 位置：它写在网页文件的最开头，甚至在
<html>标签之前。
2. 为什么需要文档声明？
举个例子：
- 如果你在写 HTML5 的代码（比如
<video>标签），但是浏览器按照 HTML4 的方式去解析，它就会“不认识”，导致网页显示异常。 - 如果你写了文档声明
<!DOCTYPE html>，浏览器看到它，就会立刻明白：“哦，这是一份 HTML5 网页，我要用HTML5标准来解析。”
3. 常见的DOCTYPE版本
在网页发展的过程中，不同版本的HTML有不同的声明方式：
- HTML4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
- XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
⚠️ 这些声明看起来很复杂，光是复制都容易写错。
4. HTML5的好消息
到了 HTML5，这一切都变得超级简单！
只需要一行：
<!DOCTYPE html>
- 不区分大小写：
<!DOCTYPE html>✅<!Doctype HTML>✅
- 无需再写一长串地址，浏览器就能理解。
- 必须放在 网页第一行，比
<html>标签还要靠前。
所以记住一句话：
👉 从现在开始，每次新建一个网页文件，第一行都要写上：
<!DOCTYPE html>这样浏览器就会乖乖按照 HTML5 标准 来解析你的网页。
五、HTML5文档声明的写法与完整网页结构示例
既然我们已经知道了 <!DOCTYPE html> 的作用，那么现在就把它加到网页文件里，看看一个 完整的HTML5网页结构 长什么样子。
1. 最小化的HTML5网页骨架
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的第一个HTML5网页</title>
</head>
<body>
<h1>欢迎来到我的网站！</h1>
<p>这是我学习HTML写下的第一个页面。</p>
</body>
</html>
2. 代码详解
<!DOCTYPE html>- 文档声明，告诉浏览器这是一个HTML5网页。
<html>...</html>- 网页的根标签，所有内容都包含在里面。
<head>...</head>- 页面的头部信息。
<meta charset="UTF-8">：告诉浏览器网页采用 UTF-8 编码，避免中文出现乱码。<title>：网页标题，显示在浏览器标签上。
<body>...</body>- 页面主体内容，用户能看到的部分。
3. 为什么文档声明要放在第一行？
- 浏览器在解析网页时是 自上而下逐行解析 的。
- 如果DOCTYPE不在第一行，浏览器可能会先用“猜测模式”来解析，从而造成兼容问题。
- 所以，务必把
<!DOCTYPE html>放在文件的最顶端。
4. 小结
- 从HTML4到HTML5，网页标准经历了更新换代。
- HTML5的文档声明非常简洁，只需要一行代码。
- 每次新建网页时，第一行一定要写上
<!DOCTYPE html>。 - 这能保证你的网页在现代浏览器中以 标准模式 正确显示。
六、总结与下一步学习
今天复盘了网页的基本结构，并理解了网页为什么会有不同的版本。通过学习文档声明（DOCTYPE），已经知道如何让浏览器正确识别和解析HTML5代码。
接下来可以在这个骨架的基础上，继续学习更多HTML标签，逐步丰富网页内容，让它变得更美观、更有功能。
