HTML 文档结构

这一课你将能做到

1. 写出一个带完整 head 配置（charset、viewport、title、description）的 HTML5 页面骨架
2. 用 header / nav / main / article / section / aside / footer 搭出语义化页面布局，并说明每个标签的语义边界
3. 解释 DOCTYPE、meta viewport 的作用，知道缺失时浏览器会发生什么

为什么要学

上一课我们写出了第一个页面，但那个页面只有 h1 和 p，像一间没隔墙的毛坯房。真实网站的页面有顶部导航、侧边栏、主内容区、底部版权——这些区域怎么划分，直接决定三件事：

• 搜索引擎能不能看懂你的页面：Google 爬虫会优先抓 <main> 里的内容，忽略 <footer> 里的链接堆砌。
• 屏幕阅读器能不能导航：视障用户靠 landmarks（地标）跳转，一堆 <div> 等于没有路标。
• 团队协作成本：div.div1 > div.div2 和 <main><article>，哪个三个月后还能看懂，不言而喻。

人话：语义化标签就是给房间贴门牌——「主卧」「厨房」「卫生间」，而不是「房间1」「房间2」。

先建立图像

一个典型页面的区域划分：

┌─────────────────────────────────────┐
│ header  （Logo + 网站名）            │
├─────────────────────────────────────┤
│ nav     （主导航菜单）               │
├──────────────────┬──────────────────┤
│ main             │ aside            │
│  ┌────────────┐  │ （侧边栏：       │
│  │ article    │  │  相关文章、      │
│  │ 正文文章    │  │  广告）          │
│  │ ┌────────┐ │  │                  │
│  │ │section │ │  │                  │
│  │ └────────┘ │  │                  │
│  └────────────┘  │                  │
├──────────────────┴──────────────────┤
│ footer  （版权、备案、友情链接）      │
└─────────────────────────────────────┘

对应关系：main 是客厅（一个页面只能有一个），article 是一件完整家具（可以独立搬走，比如一篇博客），section 是家具里的抽屉（文章里的章节）。

跟着做

步骤 1：最小完整骨架

新建 structure.html，输入：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="学习 HTML 文档结构的示例页面">
    <title>文档结构演示</title>
</head>
<body>
    <p>骨架完成</p>
</body>
</html>

逐行解释 head 里的四个关键配置：

• <!DOCTYPE html>：必须在第一行，声明这是 HTML5 文档。漏掉它浏览器会进入「怪异模式」，盒模型计算方式都会变。
• <meta charset="UTF-8">：必须放在 head 的最前面（规范要求在前 1024 字节内），否则中文可能乱码。
• <meta name="viewport" ...>：告诉手机浏览器「页面宽度 = 设备宽度，初始缩放 1 倍」。没有它，手机会把页面按 980px 宽渲染再缩小，字小得没法看。