HTML Academy · 课时

header、nav、main 和 footer

Q: 「header、nav、main 和 footer」这节课中我会学到什么？

使用语义化标签构建页面的主要地标结构 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用语义化标签构建页面的主要地标结构

第 1 / 4 课13 个步骤

header、nav、main 和 footer 是 CoddyKit 上的免费 HTML Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。

HTML5 地标元素

HTML5 引入了用于定义页面区域的地标元素：

<header> — 介绍性内容或导航
<nav> — 导航链接
<main> — 主要的独有内容
<footer> — 页脚信息

它们用具有语义的结构替代通用的 <div>。

header 元素

<header> 元素包含介绍性内容：

<header>
  <a href="/" class="logo">
    <img src="logo.svg" alt="Company name">
  </a>
  <nav>...</nav>
  <button>Sign In</button>
</header>
<!-- header can appear multiple times: page header, article header -->
<!-- But only one page-level header per page is recommended -->

nav 元素

<nav> 元素包裹导航链接：

<nav aria-label="Main navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/products">Products</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>
<!-- Use aria-label to distinguish multiple navs -->
<!-- Not every group of links is a nav — only major navigation -->

多个 nav 元素

页面可以包含多个 <nav> 元素 — 请为每个元素添加标签：

<nav aria-label="Main navigation">...</nav>
<nav aria-label="Breadcrumb">...</nav>
<nav aria-label="Footer links">...</nav>
<!-- aria-label tells screen reader users what each nav is for -->
<!-- Screen readers list landmarks — unique labels help navigation -->

main 元素

<main> 元素标记此页面所独有的主要内容：

<main id="main-content">
  <h1>HTML5 Landmark Elements</h1>
  <p>Learn about semantic page structure...</p>
</main>
<!-- Rules:
  - Only ONE main element per page
  - Should not be a descendant of header, footer, aside, nav
  - id="main-content" enables skip links -->
<!-- Assistive tech users jump directly to main -->

footer 元素

<footer> 元素包裹页脚信息：

<footer>
  <p>&copy; 2025 CoddyKit. All rights reserved.</p>
  <nav aria-label="Footer navigation">
    <a href="/privacy">Privacy Policy</a>
    <a href="/terms">Terms of Service</a>
  </nav>
</footer>
<!-- footer can appear multiple times: page footer, article footer -->
<!-- Page footer typically has copyright, links, contact -->

页面骨架

完整的语义化页面结构：

<body>
  <header>
    <a href="/"><img src="logo.svg" alt="Site name"></a>
    <nav aria-label="Main">...</nav>
  </header>

  <main id="main-content">
    <h1>Page Title</h1>
    <p>Primary content here.</p>
  </main>

  <aside>Related content</aside>

  <footer>
    <p>&copy; 2025 Company</p>
  </footer>
</body>

跳过导航链接

为键盘用户添加跳过链接，以便绕过导航：

<a href="#main-content" class="skip-link">Skip to main content</a>

<header>... navigation ...</header>

<main id="main-content" tabindex="-1">
  <h1>Page Heading</h1>
</main>

/* CSS: */
.skip-link {
  position: absolute; top: -100%;
  background: #0070f3; color: white; padding: 0.5rem;
}
.skip-link:focus { top: 0; }

地标角色

HTML5 地标元素会映射到 ARIA 地标角色：

<header> → role="banner"（仅限页面级）
<nav> → role="navigation"
<main> → role="main"
<footer> → role="contentinfo"（仅限页面级）
<aside> → role="complementary"

章节内部的 header 和 footer

header 和 footer 可以出现在 <article> 和 <section> 内部：

<article>
  <header>
    <h2>Article Title</h2>
    <p>By Jane Smith | March 2024</p>
  </header>
  <p>Article content...</p>
  <footer>
    <p>Tags: HTML, CSS</p>
  </footer>
</article>
<!-- In this context, header/footer are NOT banner/contentinfo roles -->
<!-- They are generic sections within the article -->

常见错误

避免以下语义地标错误：

为每组链接都使用 <nav>
在一个页面上使用多个 <main> 元素
将 <main> 放在 <header> 或 <nav> 内部
使用 <footer> 来承载非页脚内容

快速检查

一个页面应该有多少个 main 元素？

在交互式课程中回答

回顾：header、nav、main、footer

地标元素要点：

<header> — 介绍性内容；每个章节都可以重复使用
<nav> — 主要导航；有多个时使用 aria-label 添加标签
<main> — 独有的主要内容；每个页面恰好一个
<footer> — 页脚内容；每个章节都可以重复使用
添加跳过链接，使其指向 id="main-content"

免费开始

用 AI 导师学习 HTML — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 40
课程: 159

免费开始学习查看完整课程

常见问题解答

「header、nav、main 和 footer」课时是免费的吗？

是的 — 「header、nav、main 和 footer」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。

「header、nav、main 和 footer」这节课中我会学到什么？

使用语义化标签构建页面的主要地标结构你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 HTML Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「header、nav、main 和 footer」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 HTML Academy 课中编写并运行代码吗？

能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 HTML Academy