页眉、菜单和页脚 · 跟马丁学编程

像真正的网站一样给页面结构：顶部有菜单的页眉，底部有页脚。

跟我看：每个网站都有相同的组成部分

看看任何大网站：顶部是带名字和菜单的页眉，中间是内容，底部是带小信息的页脚。HTML 为这些部分有专门的标签：

<body>
  <header>
    <h1>Website Name</h1>
    <nav>
      <a href="index.html">Home</a>
      <a href="second-page.html">Second Page</a>
    </nav>
  </header>

  <main>
    <h2>Here's the main content</h2>
    <p>Everything the page is about.</p>
  </main>

  <footer>
    <p>Made by Jake, 2026</p>
  </footer>
</body>

<header>——页眉：网站的名字和菜单。每个页面都一样。
<nav>——导航，也就是带链接的菜单。
<main>——主要内容，每个页面不同。
<footer>——页脚：谁做的网站、联系方式、年份。

💡

视觉上，现在可能变化不大——这些标签本身不可见。那为什么要写它们？因为它们给代码带来秩序：浏览器、搜索引擎和屏幕阅读器都用它们来区分什么是菜单、什么是内容。最好的是——在接下来的课程里我们会给它们加样式，菜单就会真正看起来像菜单了。

轮到你了 💪

在 index.html 上，把现有内容包进这些部分：顶部 <header> 里有 <h1> 和 <nav>（链接到你的两个页面），中间 <main> 放其余内容，底部 <footer>。
在第二个页面上做同样的事。页眉和页脚在两个页面上应该完全一样——直接复制过去就行。
保存、刷新、点来点去：从两个页面菜单都能用吗？

🏫 学校网站——参考答案（index.html）

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Riverside Elementary</title>
  </head>
  <body>
    <header>
      <h1>Riverside Elementary School</h1>
      <nav>
        <a href="index.html">Home</a>
        <a href="lunch-menu.html">Lunch Menu</a>
      </nav>
    </header>

    <main>
      <img src="images/school.jpg" alt="Our school building">
      <h2>About Our School</h2>
      <p>Our school has stood in Riverside for 120 years.</p>

      <h2>Clubs</h2>
      <ul>
        <li>floorball</li>
        <li>ceramics</li>
        <li>coding</li>
      </ul>
    </main>

    <footer>
      <p>Made by the 4th grade class, 2026</p>
    </footer>
  </body>
</html>

🙋 个人网站——参考答案（index.html）

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Jake Miller</title>
  </head>
  <body>
    <header>
      <h1>Jake Miller</h1>
      <nav>
        <a href="index.html">Home</a>
        <a href="about-me.html">More About Me</a>
      </nav>
    </header>

    <main>
      <img src="images/me.jpg" alt="Me with a soccer ball">
      <h2>What I Like</h2>
      <p>Soccer, Minecraft, and building websites.</p>
    </main>

    <footer>
      <p>Made by Jake, 2026</p>
    </footer>
  </body>
</html>

🌍 旅行日记——参考答案（index.html）

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Where We've Been</title>
  </head>
  <body>
    <header>
      <h1>Where We've Been 🌍</h1>
      <nav>
        <a href="index.html">Home</a>
        <a href="trips.html">All Trips</a>
      </nav>
    </header>

    <main>
      <h2>Last Trip: The Mountains</h2>
      <img src="images/mountains.jpg" alt="View from the summit">
      <p>Three days of walking, one wrong turn, and a hundred wild berries.</p>
    </main>

    <footer>
      <p>Journal kept by the Miller family, 2026</p>
    </footer>
  </body>
</html>

⚽ 俱乐部网站——参考答案（index.html）

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Riverside Eagles FC</title>
  </head>
  <body>
    <header>
      <h1>Riverside Eagles FC</h1>
      <nav>
        <a href="index.html">Home</a>
        <a href="roster.html">Roster</a>
      </nav>
    </header>

    <main>
      <img src="images/team.jpg" alt="Team photo">
      <h2>Recent Results</h2>
      <ol>
        <li>Eagles – Hawks 3 : 1</li>
        <li>Falcons – Eagles 2 : 2</li>
      </ol>
    </main>

    <footer>
      <p>Riverside Eagles FC · training Tue & Thu at 5:00 PM</p>
    </footer>
  </body>
</html>

✅

检查一下： 两个页面顶部有相同的名字和菜单，底部有页脚，菜单可以在页面之间切换。结构完成了——现在可以研究它长什么样了！

这堂课你要记住

页面有组成部分：<header>（带菜单的页眉）、<main>（内容）、<footer>（页脚）。
菜单是带链接的 <nav>，每个页面都一样。
代码里的顺序 = 可以在上面搭建外观的基础。