标题层级设计核心是逻辑清晰：h1唯一且直指主题，h2划分主模块，h3+逐级细化，必须严格嵌套、禁跳级倒序；动态渲染需校验level为1–6整数，服务端输出真实h1，语义与样式分离。

html5 中文章标题层级怎么设计才能展现清晰脉络

文章标题层级设计的核心是让内容逻辑一目了然：h1 定义全文唯一主题，h2 划分主模块，h3 及以下逐级细化子话题，所有层级必须严格嵌套、不可跳级或倒序。

一个页面只用一个 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

下载

合法结构：… … … 或 … … …（同级并列）
非法结构：… …（跳过 h2）、… …（跳过 h3）、… …（倒序）
需要更细颗粒度？优先用、或带语义 class 的，而不是硬塞 h5/h6 动态渲染必须校验 level 值安全边界 React/Vue 中常见），浏览器静默忽略，大纲直接断裂。只接受 1–6 的整数，其他值统一 fallback 到 h2（比 fallback 到 h1 更稳妥）服务端必须确定 level，客户端 JS 计算不可信（爬虫看不到）富文本编辑器输出的 #### 若前面没 ###，需在渲染层自动补逻辑占位，否则结构断裂样式与语义必须彻底分离可以用 CSS 把 h3 设得比 h1 还大，只要 DOM 结构正确，机器仍能读对层级。但别用模拟标题——语义为零，SEO 和无障碍全失效。起步建议重置默认样式：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 可规避