HTML 结构与语义：练习答案

文档结构

保存为 structure-answer.html，使用浏览器打开。本答案对应文档结构三件套的练习。

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <title>文档结构练习</title>
  </head>
  <body>
    <header>我的学习记录</header>
    <main>
      <h1>第一次观察 DOM</h1>
      <p>先检查父子关系，再比较文档模式。</p>
    </main>
    <footer>记录结束</footer>
  </body>
</html>

html 的两个元素子节点是 head 和 body。header、main、footer 是 body 的三个元素子节点；h1 与 p 在 main 内。空白文本节点也可能存在，因此“元素子节点”不等于“所有节点”。只改变缩进不会把标题移出 main；把标题写到 </main> 后面，才改变父子关系。

标签页显示“文档结构练习”，正文显示学习记录和标题。这说明 title 与 h1 的职责不同。根元素的 lang="zh-CN" 提供中文语言信息，不负责字符解码；UTF-8 文件与 meta charset 负责本例的编码声明。

在 Console 中输入 document.compatMode，有短 doctype 的文件应为 CSS1Compat。复制文件、删除第一行并重新打开，副本应为 BackCompat。简单文字页在两种模式下可能外观近似，仍然不能据此说它们采用了相同布局规则。恢复 doctype 后刷新，应回到前一个结果。

若没有变化，先确认浏览器打开的是副本，并检查文件是否已保存；不要靠重新缩进或在 Elements 中改结构代替重新加载文件。

章节入口核对

以下入口对应本章概览或综合练习，答案核对沿用本章各知识点的实现与日志。