一个页面必须且只能有一个标签，它是语义上唯一的核心主题声明，用于搜索引擎理解主旨和屏幕阅读器定位主内容，重复或缺失会导致Lighthouse报错、SEO权重分散及无障碍访问障碍。
H1 标签必须且只能出现一次，它不是“看起来最醒目的标题”，而是页面语义上唯一的核心主题声明。
为什么一个页面只能有一个 <h1></h1>
搜索引擎靠 <h1></h1> 判断页面主旨，屏幕阅读器用户靠它快速定位主内容。重复或跳过 <h1></h1> 会直接导致：Lighthouse 报 “Missing main landmark or multiple <h1></h1>”、SEO 权重分散、盲人用户无法确认当前页是否匹配预期。CMS 模板里常因 header 区域硬编码了 <h1></h1>，又在正文再塞一个，结果两个都生效——这是最常见的误用源头。
怎么确认你的 <h1></h1> 放对了位置
打开开发者工具（F12），在 Elements 面板按 Ctrl+F 搜索 <h1></h1>，检查以下几点：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 全文只匹配到一对
<h1></h1>和，不在<header></header>、<nav></nav>或组件循环渲染块内 -
<h1></h1>出现在<main></main>内部，且是其第一个有意义的子元素（不是空 div 或占位符） - 内容不是 “首页”“欢迎光临” 这类泛化词，而是与当前 URL 强相关的具体主题，比如
<h1>订单确认：#ORD-78291</h1>或<h1>React 19 中 useActionState 的使用限制</h1>
常见错误场景和修复方式
不同技术栈下 <h1></h1> 容易出问题的位置不一样：
- WordPress 主题：检查
single.php或index.php是否在<header></header>里写了<h1><?php bloginfo('name'); ?></h1>，应删掉，改用<h1><?php the_title(); ?></h1>放在主内容区 - Vue/React SPA：不要在根容器（如
<div id="app">）上加 <code><h1></h1>；应在每个路由组件内部、<main></main>下方动态渲染<h1></h1>，并确保路由切换时旧<h1></h1>被卸载 - 静态 HTML 页面：避免把 logo 图片包裹在
<h1></h1>里（除非它确实是页面主题），更别用display: none隐藏后又用 CSS 伪元素“视觉呈现”——这会让辅助技术完全忽略它
真正难的不是写 <h1></h1> 这行代码，而是判断「此刻这个 URL 所代表的页面，它的不可替代的核心命题到底是什么」——这个判断一旦错，后面所有 SEO 和可访问性优化都在补漏。
