第 01 节 · HTML 文档结构
第 01 节 · HTML 文档结构
📌 版本信息：基于 HTML Living Standard（WHATWG 标准，HTML 无版本号概念、持续演化；2026-08-29 核对） 📚 来源：MDN HTML 基础 ｜ MDN HTML 元素参考
一、这一节的目标
- 说出 HTML 在网页里的角色（它管"结构"，CSS 管样子，JS 管行为）
- 逐行读懂一个完整 HTML 文档的每个部分
- 掌握标签语法：元素、属性、嵌套、自闭合、注释
- 知道
head和body各放什么 - 写出你的第一个页面：个人简历骨架
二、HTML 是什么
一句话：HTML 描述"页面上有什么"——它是网页的骨架。
类比盖房子：
| 技术 | 角色 | 类比 |
|---|---|---|
| HTML | 结构：这里有个标题、那里有一段文字、一个按钮 | 毛坯房的墙和门洞 |
| CSS（第 04 节起） | 外观：什么颜色、多大、怎么排 | 装修 |
| JavaScript（第 09 节起） | 行为：点了怎么办、数据怎么变 | 水电与智能设备 |
三者关系：HTML 是地基。结构乱了，样式和行为都是空中楼阁——这就是为什么本模块用 8 节先把它打牢。
HTML 的全称是 HyperText Markup Language（超文本标记语言）。"标记"的意思是：你往普通文字上打标签，声明"这一块是什么"：
<h1>我是标题</h1>
<p>我是段落</p>
浏览器读到 <h1> 就知道：这块内容是"一级标题"，于是给它默认的大字号加粗（这个默认样式以后会被 CSS 覆盖）。
三、解剖一个完整的 HTML 文档
每个 HTML 文件都长下面这样（每一行都标了人话，这就是你所有页面的起点模板）：
<!DOCTYPE html>
<!-- ↑ 文档类型声明：必须是第一行。
告诉浏览器"请用现代标准模式解析我"。
没有它浏览器会进入"混杂模式"，用 2000 年前的兼容行为渲染，各种诡异。 -->
<html lang="zh-CN">
<!-- ↑ 整个页面的根元素，所有内容都在它里面。
lang="zh-CN" 声明页面语言：屏幕阅读器会用它选发音，搜索引擎用它判断语言。 -->
<head>
<!-- ↑ head 区：给浏览器/搜索引擎看的"后台信息"，页面里不直接显示 -->
<meta charset="UTF-8" />
<!-- ↑ 字符编码：声明"我的文字用 UTF-8 编码"。
不写它，中文可能变成"鏂囦欢鍚"这样的乱码（mojibake）。永远放在 head 第一个。 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- ↑ 视口设置：手机上页面宽度 = 设备宽度，不默认缩小。
没有它，手机会把页面当 980px 宽的桌面页缩小显示（响应式的前提）。 -->
<title>我的第一个页面</title>
<!-- ↑ 标题：显示在浏览器标签页上，也是搜索引擎结果里的蓝色大标题。 -->
<!-- CSS 以后从这引入：<link rel="stylesheet" href="style.css" /> -->
</head>
<body>
<!-- ↑ body 区：用户真正看到的所有内容 -->
<h1>你好，WebGIS</h1>
<p>这是我写的第一个页面。</p>
<!-- JS 以后从这引入：<script src="app.js"></script>（一般放 body 末尾） -->
</body>
</html>
结构口诀：DOCTYPE 声明 → html 包一切 → head 管配置 → body 管内容。
四、标签语法五条规则
<h1 class="main-title">标题文字</h1>
└┬┘ └────┬─────┘ └──┬──┘ └─┬─┘
标签名 属性名 属性值 内容 ← 合起来叫一个"元素(element)"
└──────────┬──────────┘
结束标签带斜杠
- 元素 = 开始标签 + 内容 + 结束标签。
<p>文字</p>是一个元素；<p>单独一个叫标签。 - 属性写在开始标签里，格式
名="值"。比如<a href="https://...">，href就是属性。 - 自闭合元素没有内容、不写结束标签：
<img />、<br />、<hr />、<meta />、<link />、<input />——它们要么本身就是个"物件"（图片），要么是"一个动作"（换行）。 - 嵌套不许交叉：
<p><b>加粗</b></p>✅ 正确（像洋葱圈）；<p><b>加粗</p></b>❌ 交叉（像项链打结）。 - 注释：
<!-- 被注释的内容 -->，浏览器忽略，给人看的。HTML 注释不能嵌套。
💡 大小写：HTML 标签名不区分大小写，但行业规范统一小写。属性值里的引号单双皆可，统一用双引号。
五、浏览器会"原谅"你的错误——但别原谅自己
浏览器解析 HTML 有强大的容错：你忘了写 </p>，它会猜着补上；结构错了，它也尽量渲染出来。
这是好事也是陷阱：页面"看起来正常"不代表代码正确。错误的嵌套会让 CSS 选择器失效、JS 找不到元素，而且这种 bug 排查极痛苦。从第一行就写规范代码，是给自己省未来的命。
验证工具：W3C Markup 验证器——把 HTML 贴进去，它告诉你哪不规范。
六、head 里常见成员速览（后面章节逐个展开）
| 标签 | 作用 | 什么时候细学 |
|---|---|---|
<meta charset> |
编码声明 | 本节 |
<meta name="viewport"> |
移动端视口 | 第 08 节 响应式 |
<title> |
标签页标题 | 本节 |
<link rel="stylesheet"> |
引入 CSS | 第 04 节 |
<script> |
引入 JS | 第 14 节（本模块） |
<meta name="description"> |
SEO 摘要 | 第 28 节 语义化 |
七、动手跟练：01 · 个人简历骨架
配套文件：02-web-basics/examples/01-简历骨架.html（我已写好，带逐行中文注释）
步骤：
- 用 VS Code 打开该文件，通读一遍，对照第三、四节的内容确认每行的作用
- 右键 → Open with Live Server 在浏览器里看效果（此时还没有 CSS，很丑——正常，骨架本来就这样）
- 改造成你自己的：姓名、籍贯、教育经历（GIS 专业正好写上）、技能清单
- 把
<!-- TODO -->注释标记的 3 处补全
通关标准：
- 页面在浏览器正常显示你的信息
- 能口头说出：为什么
<meta charset>必须放 head 最前面 - 修改
<title>后，浏览器标签页文字跟着变了 - 把文件提交进 Git：
git add . && git commit -m "02-01 简历骨架"
八、自测题
- HTML / CSS / JS 分别管网页的什么？用什么比喻向不懂技术的人解释？
<!DOCTYPE html>删掉会怎样？为什么第一行必须是它？<meta charset="UTF-8">不写，最可能出什么问题？- 下面三个元素哪些是自闭合的：
<p><img><br><div><input> <p><b>文字</p></b>错在哪？
参考答案
- 结构/外观/行为；房子类比：毛坯/装修/水电智能。
- 浏览器进入混杂模式按老标准渲染，样式行为不可预期；它必须在最前面，后面的解析才走标准模式。
- 中文乱码（浏览器按错误编码解码字节）。
<img><br><input>自闭合；<p><div>需要结束标签。- 嵌套交叉了。必须是
<p><b>文字</b></p>——结束顺序要像洋葱一样后进先出。
九、下一步
会搭骨架了，但页面里还没有"材料" → 第 02 节：常用标签与超链接，把文字、列表、图片、表格、链接这些砖头认全。