HTML 到底做什么

这一节要完成什么

创建 index.html，在浏览器中看到自己的学习目标和第一条学习记录。

先理解：为什么要学它

浏览器接收的是文件里的文字。HTML 用标签说明每段内容是什么：标题、段落、链接或图片。CSS 决定外观，JavaScript 负责交互。先把三者分开，后面遇到问题时才知道该查哪一层。

跟着做

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>小林的学习主页</title>
  </head>
  <body>
    <h1>小林的前端学习记录</h1>
    <p>目标：独立做出一张结构清楚的网页。</p>
  </body>
</html>

新建文件夹 my-learning-page，在里面新建 index.html。文件名要显示扩展名，避免保存成 index.html.txt。
完整输入示例并保存，不要只输入 h1 那一行。
双击 index.html，或把它拖进浏览器。地址栏应以 file:/// 开头。
把“小林”换成你的名字，保存并刷新。只有刷新后页面才会读取新文件。

关键代码怎么读

<!doctype html> 告诉浏览器按现代 HTML 规则解析。
<head> 放给浏览器和搜索引擎看的信息；<body> 放页面上可见的内容。
<h1> 是页面主标题，<p> 是一个段落。开始标签、内容和结束标签组成一个元素。

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

现象	检查方法
打开后看到源码文字	文件可能是 `.txt`；在资源管理器中开启“文件扩展名”并改正。
修改后没有变化	先保存文件，再刷新正确的浏览器标签页。
中文乱码	确认文件以 UTF-8 保存，并保留 `meta charset`。

自己完成一次

再加入一个二级标题“本周计划”和一个段落，写下你本周准备完成的事情。不要复制主标题：根据示例推断二级标题应该用哪个标签。

完成后再看参考答案

页面应只有一个主要 h1，其后出现 <h2>本周计划</h2> 和一个 <p>。刷新后两段内容都可见。

完成检查

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