学习前提

完成第1课，能够创建并打开完整 HTML 文件。

本课完成后你能做什么

按信息层次选择标签，区分跳转链接与操作按钮，并写出可独立理解的链接文字。

先理解机制

标题等级描述章节之间的关系，不是字体大小。一个页面的主要主题用 h1，主要分节用 h2，分节内部再用 h3。读者和屏幕阅读器可以通过标题快速扫描结构；若为了缩小字号从 h1 跳到 h4，视觉上可能正常，内容层次却难以解释。字号应该交给 CSS。

a 表示去另一个地址或页面片段，button 表示执行当前界面中的操作。二者即使都画成矩形，键盘和浏览器行为仍不同。ol 表示顺序影响含义，ul 表示条目顺序不重要。strong 表示内容的重要性，不应把所有想加粗的字都标成重要信息。

可运行示例

<h1>My learning plan</h1>
<p>Start with <strong>HTML</strong>, then learn CSS.</p>
<h2>Three steps</h2>
<ol>
  <li>Read a lesson</li>
  <li>Write the example</li>
  <li>Change something</li>
</ol>
<a href="https://developer.mozilla.org/">Read MDN</a>

推演与验证

把示例放入第一课文档的 body，按 Tab 移动到 Read MDN，再按 Enter，应打开目标页面。随后创建一个 h2 id="practice"，增加 href="#practice" 的链接，检查它是否定位到正确章节。将 ol 换成 ul 后，理解发生变化的是“有顺序的步骤”变成“并列的项目”，而不只是数字变成圆点。

常见错误与边界

不要使用 href="#" 假装按钮：它会改变地址片段并可能滚到页首。不要让“点击这里”脱离上下文后无法理解目的地。id 在同一文档中应唯一，重复 id 可能让片段链接落在错误位置。链接中也不要嵌套另一个链接。

动手练习

为一篇“搭建个人主页”教程设计三级标题，并给准备、实现、检查三个主要章节添加页内目录。

参考解法与理由

主要章节用 h2，其内部子任务才使用 h3。目录链接的 href 与标题 id 一一对应。若目录文字能描述章节目的，即使只读目录也能了解文章结构；不需要用 JavaScript 实现原生片段跳转。

<nav aria-label="On this page"><a href="#build">Build the page</a></nav>
<h2 id="build">Build the page</h2>
<h3>Add the introduction</h3>

进一步阅读