标题层级设计核心是逻辑清晰：h1唯一且直指主题，h2划分主模块，h3+逐级细化，必须严格嵌套、禁跳级倒序；动态渲染需校验level为1–6整数，服务端输出真实h1，语义与样式分离。
文章标题层级设计的核心是让内容逻辑一目了然：h1 定义全文唯一主题，h2 划分主模块，h3 及以下逐级细化子话题，所有层级必须严格嵌套、不可跳级或倒序。
一个页面只用一个 h1，且必须直指核心
h1 不是装饰，而是整篇文章的“身份证”。首页写品牌+主定位，博客页直接用文章标题本身，产品页就写具体产品名。避免在轮播图、推荐位、侧边栏里各自塞一个 <h1>新品上市</h1>——这会让搜索引擎和读屏器彻底迷失主次。
- 服务端首屏 HTML 必须包含真实 h1，不能等 JS 加载完再动态插入
- SPA 路由切换时，要同步更新 h1 文本，不能靠 CSS 隐藏旧标签、显示新标签
- 组件库里的卡片、弹窗、列表项一律禁用 h1，统一用 h2 或通过
aria-labelledby关联语义
h2 到 h6 必须按逻辑父子关系嵌套
每个 h2 应该是 h1 的直接子模块，每个 h3 必须隶属于某个 h2，依此类推。不是“字号小就层级低”，而是“结构深就从属细”。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 合法结构：
<h1>…</h1> <h2>…</h2> <h3>…</h3>或<h1>…</h1> <h2>…</h2> <h2>…</h2>（同级并列） - 非法结构：
<h1>…</h1> <h3>…</h3>（跳过 h2）、<h2>…</h2> <h4>…</h4>（跳过 h3）、<h3>…</h3> <h1>…</h1>（倒序） - 需要更细颗粒度？优先用
<details></details>、<section></section>或带语义 class 的<div>，而不是硬塞 h5/h6 <h3>动态渲染必须校验 level 值安全边界</h3> <p>React/Vue 中常见 <code><component :is="`h${level}`>写法，但 level=0、level=7、level=" abc>），浏览器静默忽略，大纲直接断裂。 立即学习“前端免费学习笔记（深入）”；
- 只接受 1–6 的整数，其他值统一 fallback 到 h2（比 fallback 到 h1 更稳妥）
- 服务端必须确定 level，客户端 JS 计算不可信（爬虫看不到）
- 富文本编辑器输出的
####若前面没###，需在渲染层自动补逻辑占位，否则结构断裂
样式与语义必须彻底分离
可以用 CSS 把 h3 设得比 h1 还大，只要 DOM 结构正确，机器仍能读对层级。但别用
<div class="h3"> 模拟标题——语义为零，SEO 和无障碍全失效。 <ul> <li>起步建议重置默认样式：<code>h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: normal; line-height: 1.2; } - 禁用
v-html或dangerouslySetInnerHTML拼接标题标签——拼错一个数字，整个大纲就垮了 - 旧版 iOS Safari 对 h6 行高处理异常，统一设
line-height: 1.2可规避
