header和footer是语义容器，须依附于body/article/section等节元素，各自独立、不嵌套；每个区块限一个，内容须具引导性或补充性，禁作样式盒子。
Header 和 Footer 是语义容器，不是视觉定位工具；正确嵌套的关键在于明确“为谁服务”，而不是“放在哪里好看”。它们必须依附于有内容边界的节元素（如 body、article、section 或 aside），每个作用域内各自独立、互不嵌套。
每个区块配一对 header 和 footer，不跨层也不混用
一个 article 可以有自己的 header（含标题、作者、时间）和 footer（含标签、编辑说明）；外层 section 的 header 和它无关，不会继承也不会干扰。这种多层共存是合法且推荐的。
- 全局页眉：放在 body 直接子级，用于 logo、主导航、搜索框
- 文章页眉：放在 article 内部，只服务该文，含 h2、time、作者信息
- 章节页脚：放在 section 底部，可放参考资料或操作按钮，不等于整页底部
- 禁止行为：在 header 里写 footer，或在 footer 里再包一层 header
别把 header 当 div 用，内容要有引导性
header 不是样式盒子，它代表“本区块的引导性内容”。如果只是想居中一段文字或加点边框，用 div 或 section 更合适。
- 适合放进 header 的：标题（h1～h6）、副标题、作者行、time 元素、简短导语
- 不适合放进 header 的：导航菜单（应放 nav）、表单（应放 form）、广告位、正文段落
- 一个区块最多一个 header；连续两个 header 套着用，会破坏大纲结构，屏幕阅读器可能跳过第二个
footer 表达补充信息，位置由 CSS 控制，不限于页面底端
footer 的语义是“本区块的补充性内容”，不是“必须粘在浏览器最下面”。它可以出现在一篇文章末尾、一个卡片底部，甚至某个 section 的右下角——只要逻辑上属于该区块的收尾信息即可。
- 常见合法内容：版权信息（仅用于 body > footer）、相关链接、许可声明、引用来源、编辑时间
- 避免塞进无关内容：主菜单、登录入口、客服电话（这些更适合 aside 或独立 section）
- 多个 footer 可并存：页面底部一个，每篇 article 底部一个，彼此语义隔离
验证结构是否合规的三个信号
不用依赖浏览器渲染效果，从语义逻辑就能判断嵌套是否合理：
- 每个 header 和 footer 都有明确归属：它属于哪个 body / article / section？
- 没有 header 包 footer，也没有 footer 包 header
- 没出现“空 header”——即里面只有样式类、没有实际引导性内容（如纯 div 或空白 p）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
