header和footer是语义化标签，用于标识内容区块的开头与结尾，可多组存在且须依附于article、section等父元素；不可嵌套，也不应为视觉效果滥用。

header 和 footer 不是用来“撑高度”或“套样式”的，它们是告诉浏览器、搜索引擎和读屏软件：“这部分内容在语义上属于这个区块的开头或结尾”。

header 和 footer 是作用域绑定的，不是全局唯一的

一个页面可以有多个 header 和多个 footer，只要它们分别隶属于不同的语义区块（如 article、section、aside 或最外层 body）。常见错误是以为整个页面只能有一个 header，结果把文章内部的标题区也硬塞进全局 header 里，破坏了结构层次。

• body > header：适合放网站 logo、主导航、搜索框
• article > header：适合放该文章的 h1、作者、发布时间
• section > footer：适合放这一节的编辑说明、数据来源、更新时间
• 不能出现 header > footer 或 footer > header —— 它们彼此无嵌套关系

别用 header/footer 替代 div，但也不要为语义强加不存在的结构

如果某块区域只是视觉上像页眉（比如一段带背景色的 banner），但实际不属于任何内容区块的“引导性内容”，那就该用 div + role="banner"，而不是硬套 header。同理，页脚区域若只是装饰性分隔线，也不该用 footer。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 搜索引擎和辅助技术依赖语义判断内容重要性，乱用会稀释真实头部/尾部的权重
• header 内部不强制要求含 h1，但若含标题，应与它所归属的区块主题一致
• footer 里放链接没问题，但别塞满无关广告——它的语义是“归属与结束信息”，不是“杂项堆叠区”

与 SEO 和可访问性的实际关联点

Google 等引擎会提取 header 中的 h1 和导航链接来推断页面主主题与跳转路径；读屏软件遇到 footer 会提示“已到达本区域结尾”，方便用户快速跳过版权信息继续操作。但这些收益只在结构真实、层级清晰时生效。

• 多个 header 不会导致 SEO 惩罚，但若每个都塞 h1，可能被视作关键词堆砌
• 没用 nav 包裹导航链接？即使放在 header 里，读屏软件也不会自动识别为导航区
• footer 里的邮箱地址建议用 a href="mailto:…"，否则对屏幕阅读器不友好

最容易被忽略的是：header 和 footer 的价值不在“用了没”，而在“用得是否与其包裹的内容真正匹配”。一个 article 的 footer 放“本文由 AI 辅助撰写”，比在页面最底部 footer 里重复三次“©2026”更有语义重量。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！