header和footer是语义标签，用于标识内容区块的开头或结尾，不可滥用为视觉装饰；一个页面可有多个，但须依附于section、article等语义容器且不能嵌套；全局footer通常位于body末尾，但各语义区块也可自有footer；它们不提供默认样式，需CSS控制，语义正确优先。

<header></header> 和 <footer></footer> 不是用来“套样式”或“撑高度”的，它们是告诉浏览器、搜索引擎和读屏软件：“这部分内容在语义上属于某个区块的开头或结尾”。用错位置，结构就乱了，SEO 和无障碍访问都会打折。

一个页面能有几个 <header></header>？

可以有多个，但必须依附于语义容器——比如 、<article></article>、<section></section> 或 <aside></aside>。不能孤立存在，也不能嵌套在另一个 <header></header> 或 <footer></footer> 里。

• 下的 <header></header>：适合放网站 logo、主导航、全局搜索框
• <article></article> 内的 <header></header>：放该文章的 <h1></h1>、作者、发布时间等
• <section></section> 内的 <header></header>：放这一节的小标题、副标题或说明性文字
• 别把 banner 图片、装饰性横线硬塞进 <header></header>——它不是视觉标签，没内容语义就别用

<footer></footer> 必须放在页面最底下吗？

不一定。全局 <footer></footer> 应作为 的直接子元素，通常位于页面末尾；但每个 <article></article>、<section></section> 甚至 <aside></aside> 都可以有自己的 <footer></footer>，用来放该区块的版权、数据来源、编辑时间、相关链接等。

• > <footer></footer>：放全站版权、隐私政策、备案号
• <article></article> > <footer></footer>：放“本文更新于 2026-05-06”“数据来自 XX 公开 API”
• 别在 <header></header> 里放 <footer></footer>，也别让 <footer></footer> 包裹导航栏——它们彼此无隶属关系
• 纯装饰性分隔线、背景色块，用 <div role="separator"> 更准确 <h3> <code><main></main> 和 <header></header>/<footer></footer> 能嵌套吗？

  不能。<main></main> 必须是 的直接子元素，且只能出现一次；它也不能被 <header></header>、<footer></footer>、<nav></nav> 或 <aside></aside> 包裹。

  • 错误写法：<header><main>...</main></header>（<main></main> 被语义化头部包裹）
  • 正确顺序：通常是 <header></header> → <nav></nav> → <main></main> → <footer></footer>，全部并列在 下
  • <main></main> 内部可以有 <section></section>、<article></article>，这些内部再各自用 <header></header>/<footer></footer>
  • 滥用嵌套会让屏幕阅读器误判主内容位置，也影响搜索引擎对核心内容的提取

  最容易被忽略的一点：语义标签不提供默认样式，也不自动触发布局行为。你得自己写 CSS 控制显示，但千万别为了“看起来像 header”就硬套 <header></header>——语义错了，再好看的样式也是空中楼阁。