必须唯一且不能嵌套在

等标签内，因其是W3C规定的文档级语义锚点，需直接作为子元素存在；否则将导致屏幕阅读器跳过、SEO降权、Lighthouse报错及首屏定位失效。

语义化 HTML 本身不加速加载，但它决定了关键资源能否被浏览器提前识别、跳过无关区域、精准调度——没它，preload<https:>、<code>fetchpriority="high"<https:>、<code>content-visibility<https:> 都会失效或打折扣。<https:><h3>为什么 <code><main><https:> 必须唯一且不能嵌套在 <code><section><https:> 里<https:><p>浏览器和爬虫依赖 <code><main><https:> 做首屏内容定位与权重分配。一旦嵌套，部分引擎直接忽略其语义，导致 hydration 跳过主内容、Lighthouse 报“missing main element”、LCP 指标虚高。<https:><ul><li><code><main><https:> 只能出现一次，且应作为直接子元素出现在 <code><https:> 下<https:><li>不要写成 <code><section><main>...<https:><https:><https:> —— 这会让 <code>document.querySelector('main')<https:> 仍能取到节点，但 SSR 注水时无法跳过非关键区域<https:><li>若页面有多个逻辑区块（如双栏文章+侧边推荐），用 <code><article><https:> + <code><aside><https:> 区分，而非套 <code><section><https:> 再包 <code><main><https:><https:><https:><h3><code><nav><https:> 和 <code><header><https:> 的使用边界在哪<https:><p><code><nav><https:> 不是“所有导航链接”的统称，而是特指主导航链路集合；<code><header><https:> 也不是“顶部视觉区域”，而是语义上的章节头部。<https:><ul><li>页脚的友情链接、文章末的“相关阅读”、面包屑导航，都不该用 <code><nav><https:> —— 它们属于上下文附属信息，用 <code><div role="navigation"><https:> 或普通 <code><ul><https:> 即可<https:><li><code><header><https:> 可以出现在 <code><article><https:> 或 <code><section><https:> 内部，表示该区块的标题区；但整个页面的 <code><header><https:> 应只含站点级信息（logo、主导航、搜索框）<https:><li>错误示例：<code><header><nav><a href="https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712">首页<https:><a href="https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712blog">博客<https:><https:><nav><a href="https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712about">关于<https:><https:><https:><https:> —— 多个 <code><nav><https:> 并列破坏语义信号<https:><https:><h3>嵌套超过 4 层就会影响首屏时间？怎么验证<https:><p>DOM 节点深度每超一层，V8 编译耗时上升约 2–3ms，layout shift 分数也同步恶化；但问题核心不在“层数”本身，而在无意义包裹层带来的渲染树膨胀。<https:><ul><li>用 Chrome DevTools → Elements → 右键节点 → “Reveal in Elements Panel” 查看实际嵌套路径，重点关注是否出现 <code><div class="wrapper"><https:> → <code><section><https:> → <code><div class="inner"><https:> → <code><article><https:> 这类冗余结构<https:><li>优先用 <code>display: contents<https:> 替代纯样式包裹层：它让父元素不出现在渲染树中，但子元素保留语义和 DOM 位置<https:><li>实测建议：把 <code><main><https:> → <code><section><https:> → <code><article><https:> 作为黄金三层，额外层级只在必要语义切分时引入（如 <code><section><h2>评论区<https:><section><article>...<https:><https:><https:><https:>）<https:><https:><p>真正卡住性能的不是标签名，而是语义断裂后引发的连锁反应：css 选择器被迫写成 <code>div div div .content<https:>，js 查询得遍历 class，preload 不知道该提谁，ssr hydration 算力全花在 footer 上——这些才是你改完 <code><div class="header"><https:> 之后，还得接着调的地方。<https:></https:></https:></div>

anything-to-html

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

下载