南希说刚开始学习前端时，很多人都会迫不及待想写出“漂亮的页面”。但在此之前，我们必须先掌握网页的 基本结构。就像盖房子前需要打好地基，网页也一样。如果结构不牢固，再漂亮的样式也无法支撑。
本文将带你从零开始，逐步拆解网页的基础框架，理解每个部分的意义和作用。
一、文档声明：告诉浏览器我们用的是什么版本
网页的第一行通常是这样写的：
<!DOCTYPE html>
它的名字叫 文档声明（DOCTYPE）。- 作用：告诉浏览器我们使用的是 HTML5 标准。
- 注意：不区分大小写，写成
<!doctype html>也可以。
这个声明不是标签，而是浏览器的“说明书”。缺少它，网页可能会出现兼容性问题。
二、HTML 根元素：所有内容都必须写在这里
接下来就是网页的根元素 <html>：
<html>
<!-- 网页的所有内容都写在这里 -->
</html>
这里需要注意：
- 除了
<!DOCTYPE html>之外，网页的所有内容必须放在<html>内部。 - 我们常常把 标签 和 元素混着叫，其实它们的意思差不多。
三、网页的两大部分：head 和 body
HTML 文档分为两大块：
<html>
<head>
<!-- 这里是网页的头部 -->
</head>
<body>
<!-- 这里是网页的主体 -->
</body>
</html>
1. <head>：网页的幕后信息
- 不会直接显示在网页中
- 主要是给浏览器和搜索引擎看的
常见内容包括：
- 字符编码
- 标题
- 关键字和描述（SEO）
例如，设置网页的字符编码：
<meta charset="UTF-8">
为什么要写这个？
👉 它能避免中文网页出现乱码问题。2. <title>：网页的名片
网页的标题写在 <title> 标签中：
<title>南希说 - 我的第一个网页</title>
它的作用有两个：
- 显示在浏览器标签页上
- 搜索引擎优化（SEO）非常重要，搜索引擎会根据标题来判断页面的主要内容
举个例子：
- 如果标题是“HTML 入门”，那么在用户搜索 HTML 时，网页更可能被展示。
3. <body>：网页的主体内容
所有用户能看到的内容都写在 <body> 中。
例如：
<body>
<h1>这是我的第一个网页</h1>
<p>欢迎来到南希说！</p>
</body>
<h1>表示网页的一级标题（最重要的标题）<p>表示段落
这些才是真正会展示给访问者的内容。
四、完整示例：最小的 HTML 网页
把上面的内容组合起来，一个最简单的网页就出来了：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>南希说 - 我的第一个网页</title>
</head>
<body>
<h1>这是我的第一个网页</h1>
<p>欢迎来到南希说！这里是我学习 HTML 的起点。</p>
</body>
</html>
你可以新建一个文件，保存为 index.html，然后用浏览器打开，就能看到效果啦！
五、总结
- DOCTYPE：告诉浏览器我们用的是 HTML5
- HTML 根元素：承载网页所有内容
- head 部分：幕后信息，负责网页解析和 SEO
- title 标签：网页的名片，SEO 的关键
- body 部分：所有用户可见的内容
👉 如果你是初学者，建议多写几遍，熟悉这个基本框架。等掌握后，就能在这个骨架上继续加内容、美化样式，甚至加入交互效果。
