1. 文档声明 DOCTYPE

<!DOCTYPE html> 是每个HTML文件的第一行，它告诉浏览器："这个文件是HTML5文档"。

⚠️ 注意：DOCTYPE 不是HTML标签，而是一个指令，必须写在最前面，否则浏览器可能进入"怪异模式"。

📝 代码演示
<!DOCTYPE html> ← 必须在第一行，告诉浏览器用HTML5标准解析
1<!DOCTYPE html> 2<html lang="zh-CN"> 3<head> 4 <meta charset="UTF-8"> 5 <title>我的页面</title> 6</head> 7<body> 8 <h1>Hello World</h1> 9</body> 10</html>

2. html 根元素

<html> 是整个页面的根元素，所有其他标签都包裹在里面。

常用属性：

• lang="zh-CN" — 声明页面语言为简体中文，帮助搜索引擎和屏幕阅读器识别

• lang="en" — 英文页面

📝 代码演示
<html lang="zh-CN"> ← 根元素，包裹所有内容
<head> ← 头部信息（浏览器看的）
<body> ← 页面内容（用户看的）
1<!-- lang属性告诉浏览器和搜索引擎页面语言 --> 2<html lang="zh-CN"> 3 <head>...</head> 4 <body>...</body> 5</html>

3. head 头部信息

<head> 里的内容不会显示在页面上，它是给浏览器、搜索引擎看的"元信息"。

常用标签：

• <meta charset="UTF-8"> — 字符编码，防止中文乱码

• <meta name="viewport"> — 视口设置，让页面适配手机

• <title> — 浏览器标签页上显示的标题

• <meta name="description"> — 页面描述，搜索引擎会显示

• <meta name="keywords"> — 关键词（现在搜索引擎已不太看重）

📝 代码演示
<head>
<meta charset="UTF-8"> ← 字符编码，防乱码
<meta name="viewport" ...> ← 手机适配
<title>页面标题</title> ← 浏览器标签页标题
<meta name="description" ...> ← SEO页面描述
1<head> 2 <!-- 字符编码：必须放在head最前面，否则中文可能乱码 --> 3 <meta charset="UTF-8"> 4 5 <!-- 视口设置：让页面在手机上正常显示 --> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 8 <!-- 页面标题：显示在浏览器标签页 --> 9 <title>我的网页</title> 10 11 <!-- SEO描述：搜索引擎结果中显示的描述文字 --> 12 <meta name="description" content="这是一个学习HTML的页面"> 13 14 <!-- SEO关键词（现在权重很低） --> 15 <meta name="keywords" content="HTML, 学习, 前端"> 16</head>

4. body 页面主体

<body> 里的内容就是用户在浏览器中看到的一切：文字、图片、按钮、视频等。

所有可见的HTML元素都必须放在 <body> 里面。

📝 代码演示
<body> ← 用户看到的所有内容都在这里
<h1>标题</h1>
<p>段落</p>
<img src="...">
1<body> 2 <!-- 这里放用户能看到的所有内容 --> 3 <h1>欢迎来到我的网站</h1> 4 <p>这是一个段落</p> 5 <img src="photo.jpg" alt="照片"> 6</body>

5. 注释

注释是写给开发者看的说明，浏览器会完全忽略它，不会显示在页面上。

用途：解释代码功能、标记待办事项、临时隐藏代码。

📝 代码演示
<!-- 这是注释，浏览器不会显示 -->
<!-- 多行注释也可以 写很多行 -->
1<!-- 这是单行注释 --> 2 3<!-- 4 这是多行注释 5 可以写很多行 6 常用于标记大段代码 7--> 8 9<h1>标题</h1> <!-- 也可以在代码后面写注释 --> 10 11<!-- 临时隐藏一段代码（注释掉）： 12<p>这段代码被注释了，不会显示</p> 13-->

6. 完整HTML模板

这是每个HTML页面的标准骨架，以后新建文件直接复制这个模板即可。

📝 完整结构图
<!DOCTYPE html> ← 第1行：声明HTML5
<html lang="zh-CN"> ← 第2行：根元素
<head> ← 头部（浏览器看的）
<meta charset="UTF-8"> ← 字符编码
<meta name="viewport" ...> ← 手机适配
<title>页面标题</title> ← 标签页标题
<body> ← 主体（用户看的）
<h1>你好世界</h1>
1<!DOCTYPE html> 2<html lang="zh-CN"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>我的页面</title> 7</head> 8<body> 9 10 <h1>Hello World</h1> 11 <p>这是我的第一个网页</p> 12 13</body> 14</html>