完整的 HTML 文档结构

这一节要完成什么

为学习主页补齐语言、视口说明和页面摘要，形成可复用的文档骨架。

先理解：为什么要学它

能显示不等于结构正确。文档骨架会影响中文朗读、手机显示、搜索摘要和浏览器解析。它通常只写一次，却决定整页的基础行为。

跟着做

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="小林的前端学习进度与练习作品。" />
    <title>学习主页｜小林</title>
  </head>
  <body>
    <h1>我的前端学习主页</h1>
  </body>
</html>

把上一节的文件与示例逐行对照，先只补缺少的行。
观察浏览器标签页：title 的内容显示在那里，不会显示在正文里。
把浏览器窗口缩窄到手机宽度，保留 viewport 行；以后 CSS 课程会直接依赖它。
右键选择“查看网页源代码”，确认浏览器收到的内容与保存的文件一致。

关键代码怎么读

lang="zh-CN" 帮助朗读器选择中文发音，也让翻译工具理解主要语言。
charset 越靠前越好，浏览器能尽早用 UTF-8 解码。
description 是页面摘要；它不是关键词堆放处，也不保证一定出现在搜索结果中。

常见错误：看到什么，检查什么

现象	检查方法
把 title 写进 body	标签页标题属于 `head`；正文标题才用 `h1`。
同时写两个 body	一个文档只能有一个 `head` 和一个 `body`。
lang 写成 en	内容主要是中文时使用 `zh-CN`，英文版再用 `en`。

自己完成一次

为你自己的主页写一个 40～80 字的 description。它要说明“这是谁的页面、包含什么”，不要写“欢迎来到我的网站”这类空话。

完成后再看参考答案

合格摘要示例：<meta name="description" content="陈晨记录 HTML 学习进度、练习笔记和结课作品的个人主页。">

完成检查

我的页面出现了本节要求的新内容
我能不用看答案解释关键标签或属性
我主动制造并修复了至少一个错误