HTML5标题设计核心是“一个锚点、两级约束、三层实践”：h1唯一且语义精准；结构需连贯合法、语义须真实有效；嵌套宜浅、模块边界清晰、样式与语义解耦。

掌握 HTML5 标题层级设计，关键不是记住六个标签，而是理解“一个锚点、两级约束、三层实践”这个骨架逻辑。

一个锚点：h1 必须唯一且直指页面本质

它不是视觉上最大的字，而是整页内容的语义起点。首页写品牌+主定位，文章页就用文章标题本身，产品页就写具体产品名。模板里轮播图、侧边栏、推荐位塞的

全是干扰项，必须删掉。SPA 路由切换时，h1 文本要同步更新，不能靠 CSS 隐藏旧的、显示新的。

两级约束：结构合法 + 语义真实

结构合法指 DOM 层级必须连贯：h1 → h2 → h3 → h4 是合法路径；h1 → h3（跳级）、h2 → h4（缺父级）、h3 → h1（倒序）全部非法。语义真实指标题必须反映实际内容，不能用

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

或 CSS 加粗模拟 h2，屏幕阅读器和搜索引擎都读不到。

• 服务端首屏 HTML 必须含有效 h1，JS 动态插入不算数
• 富文本中出现 #### 却没 ###，渲染层要自动补占位 h3，否则大纲断裂
• 动态生成如 ，level 只接受 1–6 整数，其他值统一 fallback 到 h2

三层实践：嵌套深度、模块边界、样式解耦

嵌套建议控制在 h1 → h2 → h3 以内，h4 及以下只在政策文件等极少数场景使用。每个 h2 应是一个独立信息单元，比如“事件经过”“影响范围”，能被单独理解。用

包裹功能区块时，内部用 h2 起始，不破坏全局层级。样式彻底交给 CSS：可把 h3 设得比 h1 还大，但 DOM 结构不能乱；起步建议重置默认样式：h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: normal; line-height: 1.2; }

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！