2.3 <html>、<head>和<body>元素：网页的三大支柱
大家好！今天我们要认识构成每个HTML网页的三个最重要的"容器"。就像人有头、身体和衣服一样，HTML文档也有自己的基本结构。
一、三大元素的关系图解
可以把它们想象成一个俄罗斯套娃：
- 最大的娃娃是<html>，包裹所有内容
- 中间的<head>，装看不见的重要信息
- 最里面的<body>，放所有看得见的内容
二、<html>元素 - 网页的"外套"
基本用法
<html lang="zh-CN">
<!-- 所有内容放在这里 -->
</html>重要属性
属性 | 作用 | 示例 |
|---|---|---|
lang | 设置网页语言 | lang="zh-CN"(简体中文) |
dir | 文字方向 | dir="rtl"(从右到左) |
小贴士：设置正确的lang属性有助于：
- 屏幕阅读器正确发音
- 搜索引擎更好理解内容
- 浏览器提供正确翻译建议
三、<head>元素 - 网页的"大脑"
包含哪些内容？
<head>
<meta charset="UTF-8">
<title>我的网页</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<style>/* CSS代码 */</style>
</head>为什么<head>里的内容看不见？
因为它存储的是"元信息"，就像人的大脑：
- 告诉浏览器如何显示页面
- 设置网页标题
- 链接外部资源
- 但不会直接显示在页面上
常见内容：
- <title>：浏览器标签页标题
- <meta>：各种元数据
- <link>：引入CSS文件
- <style>：内嵌CSS样式
- <script>：JavaScript代码
四、<body>元素 - 网页的"身体"
所有可见内容的家
<body>
<h1>欢迎光临</h1>
<p>这是我的个人网站</p>
<img src="图片地址" alt="我的照片">
</body><body>的特点：
- 一个网页只能有一个<body>
- 包含用户能看到的所有内容：文本图片视频表格表单等
- 可以添加样式和交互效果
五、完整结构示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>宠物商店</title>
<style>
body { font-family: Arial; }
</style>
</head>
<body>
<h1>欢迎来到喵星人宠物店</h1>
<p>我们提供各种可爱的猫咪~</p>
<img src="图片地址" alt="一只橘猫">
</body>
</html>六、常见错误排查
❌ 问题：网页显示乱码
✅ 解决：检查<head>里是否有<meta charset="UTF-8">
❌ 问题：修改了<body>内容但看不到变化
✅ 解决：
- 确认文件已保存
- 刷新浏览器
- 检查是否修改了正确的文件
❌ 问题：网页标题不显示
✅ 解决：确认<title>放在<head>里且没有拼写错误
七、小测验
- 网页内容应该放在哪个标签里？<head><body><html>
- 设置网页语言应该修改哪个属性？<body lang><html lang><head lang>
- 下面哪个应该放在<head>里？<h1><title><img>
八、为什么这样设计？
W3C这样设计是为了：
- 分离关注点：<head>管信息<body>管展示
- 标准化结构：所有浏览器都能理解
- 可访问性：辅助工具可以正确解析
九、扩展知识
1. <body>的特殊属性（已淘汰但了解下）
属性 | 作用 | 现代替代方案 |
|---|---|---|
bgcolor | 背景色 | CSS的background |
text | 文字颜色 | CSS的color |
link | 链接颜色 | CSS的a:link |
2. 推荐的结构优化
<body>
<header>...</header>
<main>...</main>
<footer>...</footer>
</body>（这些语义化标签我们后面会详细讲）
十、总结
记住这三个标签就像记住人的三个部分：
- <html> - 整个人（最外层）
- <head> - 头部（思考和管理）
- <body> - 身体（展示和行动）
作业：创建一个完整结构的HTML文件，要求：
- 设置语言为中文
- 标题为"我的个人主页"
- 在body里添加一段自我介绍
下节课我们要深入学习<head>里的秘密武器——<meta>标签，不见不散！