HTML 文档结构

这一课你将能做到

1. 手写一个符合 HTML5 标准的完整页面骨架，不遗漏任何必要元素
2. 正确理解 <head> 与 <body> 的分工，合理放置元数据、资源和可见内容
3. 在页面中正确引入 CSS 和 JavaScript，并知道 defer、async、media 等属性的作用

为什么要学

如果把网页比作一封信，HTML 文档结构就是信封格式和信纸规范——没有它，邮递员（浏览器）不知道谁是收信人、信里用什么语言、该按什么顺序阅读。一个标准、完整的文档结构是 SEO（搜索引擎优化）、无障碍访问、社交分享预览和跨设备兼容的基础。

CodeForge 的课程详情页需要在 <head> 中声明字符编码、视口设置、页面标题和描述，这样搜索引擎才能正确索引，微信分享时才能显示卡片预览。省略这些元数据，页面可能在手机上被错误缩放，或被搜索引擎降低排名。

先建立图像

<!DOCTYPE html>
<html lang="zh-CN">
├── <head>          ← 元数据：给浏览器和搜索引擎看的「说明书封面」
│   ├── charset      ← 字符编码（UTF-8 是标配）
│   ├── viewport     ← 视口设置（移动端必须）
│   ├── title        ← 浏览器标签页标题、搜索引擎结果标题
│   ├── meta desc    ← 搜索引擎结果描述
│   ├── link css     ← 外部样式表
│   └── script       ← 外部脚本（可放 head 或 body 底部）
│
└── <body>          ← 可见内容：用户实际看到的所有东西
    ├── header
    ├── nav
    ├── main
    └── footer

跟着做

步骤 1：写出标准 HTML5 骨架

创建 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="CodeForge 前端基础课程，系统学习 HTML5、CSS3 与现代布局技术。">
  <title>课程详情 | CodeForge 学习平台</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <h1>HTML/CSS 基础精讲</h1>
  </header>

  <main>
    <p>本课程涵盖现代网页开发所需的全部基础技能。</p>
  </main>

  <footer>
    <p>&copy; 2026 CodeForge</p>
  </footer>

  <script src="app.js" defer></script>
</body>
</html>

逐行验证：文件开头必须是 <!DOCTYPE html>；<html> 标签要加 lang="zh-CN"；<meta charset="UTF-8"> 必须是 <head> 中的第一行；<title> 不可省略。

步骤 2：添加 Open Graph 社交分享元数据

在 <head> 中追加以下标签，让分享链接时显示卡片：

<meta property="og:title" content="HTML/CSS 基础精讲 | CodeForge">
<meta property="og:description" content="系统学习 HTML5、CSS3、Flexbox、Grid 与响应式设计。">
<meta property="og:type" content="website">
<meta property="og:image" content="https://codeforge.example.com/og-cover.png">

微信、钉钉、Slack 等应用抓取网页分享卡片时，读取的就是这些 og:* 元数据。