元素、属性与嵌套

这一节要完成什么

在主页加入一张学习进度卡，并能用缩进读出父子关系。

先理解：为什么要学它

新手最常见的问题不是记不住标签，而是看不出一个元素在哪里结束。把 HTML 当作盒子：元素可以包含文字或其他元素，同级盒子对齐，子元素多缩进两格。

跟着做

<section id="progress" aria-labelledby="progress-title">
  <h2 id="progress-title">学习进度</h2>
  <p>正在学习：<strong>HTML 基础</strong></p>
  <p>完成度：<progress value="2" max="12">2 / 12</progress></p>
</section>

把代码放在 h1 后面、body 结束标签前面。
先用手指从 <section> 找到对应的 </section>，再检查里面两个 p 是否各自闭合。
把 progress 的 value 改成 3。刷新后进度条会改变，备用文字仍是 2/12，因此也要同步更新。
暂时删掉一个 </p>，观察浏览器仍可能显示；再恢复它。浏览器容错不代表代码正确。

关键代码怎么读

元素由标签和内容组成；section 是父元素，标题和段落是它的子元素。
属性写在开始标签里。id 必须在页面内唯一，value 和 max 为进度提供数值。
strong 表达内容很重要，不只是让文字变粗。

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

现象	检查方法
标签交叉闭合：`<p><strong>文字</p></strong>`	后打开的先关闭，应写成 `<p><strong>文字</strong></p>`。
重复使用同一个 id	每个 id 像身份证，只能对应一个元素。
用空格对齐后仍读不懂	使用编辑器的“格式化文档”，再按缩进检查父子层级。

自己完成一次

在 section 里增加一个段落，使用 data-status="learning" 属性记录状态，并把“持续练习中”标为重要内容。

完成后再看参考答案

可以写成 <p data-status="learning">状态：<strong>持续练习中</strong></p>。它应与另外两个 p 同级。

完成检查

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