<header>和<footer>是语义化结构元素，禁止互相嵌套，必须各自作为body、article或section等节元素的直接子元素，每作用域限各一个，且须承载引导性或结尾性内容。
<header> 和 <footer> 不是“可选的装饰标签”，而是有明确语义约束和使用边界的结构元素。用错位置、嵌套失当或混用 <head>，会直接破坏文档大纲、影响屏幕阅读器跳转逻辑，甚至被搜索引擎降权。
什么时候该用 <header>，而不是 <div class="header">
只有当该区域承载「页面或章节的引导性内容」时才用 <header> —— 比如站点 logo + 主导航 + 搜索框，或一篇博客文章顶部的标题、作者、发布时间。<header> 可以出现多次（每个 <article> 或 <section> 都能有自己的 <header>），但不能包裹整个页面布局容器。
- ✅ 正确：页面顶部的全局导航区、单篇文章开头的
<h1>与元信息 - ❌ 错误：用它替代 CSS 布局容器（如“头部 banner 图”）、放在
<main>外部又不对应任何节（section） - ⚠️ 注意：
<header>里不要放<main>或另一个<header>；它也不该包含页脚类信息（版权、联系方式等）
<footer> 的作用范围经常被高估
<footer> 不等于“页面最底下那条横栏”。它的语义是「所属节（sectioning content）的结尾信息」——可以属于整个 <body>，也可以只属于某个 <article> 或 <section>。
- ✅ 正确：页面底部的版权信息（
<body><footer>）；某篇博客文末的“标签列表、相关文章链接”（<article><footer>） - ❌ 错误：把网站底部导航、友情链接塞进
<footer>却不加role="navigation"或额外<nav>包裹——这会让屏幕阅读器误判为“纯元数据”，跳过可操作内容 - ⚠️ 注意：一个
<section>内同时出现<header>和<footer>是完全合法的，且推荐这么做，以形成完整语义节
常见错误：把 <header> 当成 <head> 的视觉替身
<head> 是元数据容器（<title>、<meta>、<link>），完全不可见；<header> 是 <body> 内的可见内容块。两者层级、用途、校验规则全不同。
立即学习“前端免费学习笔记（深入）”；
- ❌ 把
<meta>或<script>放进<header>→ 浏览器忽略或报错 - ❌ 在
<header>里写<title>→ 页面标题不会更新，SEO 失效 - ✅ 正确做法：所有可见头部内容走
<header>；所有配置类信息严格留在<head>
最容易被忽略的一点是：语义标签本身不提供样式，但浏览器默认会给 <header> 和 <footer> 加 margin 或 display 行为（尤其在旧版 Safari 中）。如果你依赖 CSS 重置或自定义布局，务必检查它们是否意外触发了隐式 display: block 或垂直间距——这不是 bug，是规范预期行为。
