标签专用于包裹语义上的标题性内容，必须包含

–

等标题元素，不可滥用为视觉布局容器或塞入轮播图、广告等非标题内容；一个页面可有多个

，但每个都须承载对应范围的引导性内容并配有标题。

<header><https:> 不是“网页最上面那条横条”的语义化替身，而是明确表示「某个主题区块的介绍性或导航性内容容器」。它本身不带样式、不决定位置，只告诉浏览器和读屏软件：“这里是一段头部上下文”。<https:><h3>什么时候必须用 <code><header><https:> 而不是 <code><div><https:><https:><p>只有当包裹的内容满足以下任一条件时，<code><header><https:> 才是语义正确的选择：<https:><ul><li>内部包含 <code><h1><https:>–<code><h6><https:> 标题，并搭配站点 Logo、副标题、发布日期等介绍性文字<https:><li>嵌套了 <code><nav><https:>，且该 <code><nav><https:> 是当前范围（页面级或 <code><section><https:> 级）的主要导航<https:><li>出现在 <code><article><https:> 或 <code><section><https:> 内部，且该区块有独立主题（如“第三章：性能优化”，其 <code><header><https:> 含 <code><h2><https:> 和简介）<https:><li>作为整页入口，同时承载站点标识与主导航功能<https:><https:><p>纯为了加背景色、固定定位、清浮动或视觉居中而套一层 <code><header><https:>，属于语义滥用——此时用 <code><div class="site-header"><https:> 更准确。<https:><h3><code><header><https:> 能放什么？哪些写法会破坏语义<https:><p><code><header><https:> 允许直接子元素包括：<code><h1><https:>–<code><h6><https:>、<code><nav><https:>、<code><p><https:>、<code><img><https:>（如 logo）、<code><form><https:>（如搜索框），但必须服务于“介绍https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712导航”目的。<https:><ul><li>❌ 禁止嵌套另一个 <code><header><https:>：比如 <code><header><header><h1>标题<https:><https:><https:><https:> —— 无语义支撑，读屏器会误判层级<https:><li>❌ 禁止空泛使用：仅含一个 <code><button><https:>、单独 <code><form><https:> 或纯 <code><div class="logo"><https:>，没有标题或导航意图，就等于没提供任何结构信号<https:><li>✅ 推荐结构示例：<code><header><h1>我的博客<https:><nav><ul><li><a href="https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712">首页<https:><https:><https:><https:><https:><https:><https:><https:><p>注意：<code><hgroup><https:> 已被废弃，多级标题请改用 <code><h1><https:> + <code><p class="subtitle"><https:> 替代。<https:><h3>多个 <code><header><https:> 在同一页面是否合理？怎么避免混淆<https:><p>一个页面可以有多个 <code><header><https:>，这是完全合法且常见的，但每个都必须归属清晰：<https:><ul><li>顶层 <code><header><https:> 在 <code><https:> 下，服务整页<https:><li><code><article><https:> 内可再有一个 <code><header><https:>，仅服务该文章（含 <code><h2><https:>、作者、时间）<https:><li><code><section><https:> 内的 <code><header><https:> 必须配 <code><h2><https:> 或更高级别标题，不能孤立存在<https:><li>禁止把 <code><header><https:> 塞进 <code><footer><https:>、<code><address><https:> 或另一个 <code><header><https:> 里<https:><https:><p>真正容易被忽略的是：每个 <code><header><https:> 都依赖内部的 heading 元素才能激活语义价值。没有 <code><h1><https:>–<code><h6><https:>，它只是个空壳，对 seo 和无障碍没有任何实质帮助。<https:></https:></https:></h6>

anything-to-html

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

下载