anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

header标签仅负责语义表达，不参与布局；其位置必须符合语义逻辑：整站页眉置于body首子元素，文章头部嵌入article，章节头部放入section，侧边栏标题置于aside；禁用仅因样式或错误嵌套而滥用header。

header 标签本身不负责布局，它只负责语义表达；真正决定“头部区域怎么显示”的是 CSS，但前提是 header 的位置和嵌套关系必须符合语义逻辑。

明确头部归属：谁的开头，就包在谁里面

header 不是页面顶部的装饰条，而是「某个内容单元的介绍性区块」。它的位置必须对应一个明确的语义主体：

• 整站页眉（含 logo、主导航、搜索框）→ 直接作为 的第一个子元素
• 一篇博客文章的标题与作者信息 → 包在 <article></article> 内部，且紧贴开头
• 一个章节区块（如“第三章：响应式设计”）→ 放在 <section></section> 内部，配合 <h2></h2> 使用
• 侧边栏的标题区（如“热门标签”）→ 可放在 <aside></aside> 里，但需有实际介绍性内容，不能只为加背景色

避免常见语义错位

布局看起来像头部，不代表就能用 header。以下情况应改用 <div> 或其他更准确的标签： <ul> <li>仅为了固定定位（<code>position: fixed）而包裹一段文字或按钮

页脚区域里写 <header>© 2026 公司版权</header>（该用 <p></p> 或 <div>） <li>连续两个 <code><header></header> 嵌套（如 <header><header>...</header></header>），浏览器无法识别层级

把整个页面结构包进 <header></header>（<header>...</header> 是非法 HTML）

配合 nav 和标题，强化头部意图

一个语义清晰的 header，通常包含至少一项能表明“这是入口”的内容：

• 主标题（<h1></h1>～<h6></h6>），尤其当它是页面或文章的核心标识时
• 主导航（<nav></nav>），例如顶部菜单或侧边栏目树
• 网站 Logo + 副标题 / 时间信息 / 作者署名等辅助介绍文字
• 搜索表单（<form></form>）或登录入口（若属于该区域的核心功能）

视觉实现靠 CSS，但别让样式掩盖语义

你可以用 CSS 把 header 固定在顶部、设为全宽、添加阴影或渐变背景，这些都没问题。关键是要确保：

• HTML 结构中，header 没有脱离它本该归属的上下文（比如不在 <footer></footer> 里，也不包着 <main></main>）
• 屏幕阅读器能正确识别 header 是“某部分内容的开头”，而不是一个空容器
• 多个 header 各自独立存在，不嵌套、不重叠语义范围