HTML标题标签至核心规范是：一个页面仅一个且须准确表达核心主题，–必须严格逐级嵌套、禁止跳级或倒序，语义结构优先于视觉样式，CSS负责呈现，错误层级会损害SEO与无障碍访问。

用

到

构建语义化标题层级

HTML 的标题标签不是用来调字号的，而是表达内容结构关系。一个页面只该有一个

，它代表整页唯一的核心主题；

是它的直接子级（比如章节），

再往下是小节，依此类推。

常见错误包括：

出现多次、

后直接跳

、用

只因为“看起来大小刚好”。这些都会破坏屏幕阅读器导航逻辑，也让搜索引擎无法准确提取大纲。

• 正确层级示例：
  →
  →
  →

• 错误写法：
  后跟
  （跳过
  ）
• 样式控制交给 CSS：font-size 或 class，别靠换标签“凑大小”

段落

DeepBI DHTML 页面生成器

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

下载

和标题之间不能混用

是纯内容容器，不带层级含义；它和标题标签属于不同语义轨道。把一段说明文字硬塞进

里，哪怕加了 style="font-weight:normal"，也改变不了它在 DOM 结构中被识别为“标题”的事实。

典型误用场景：

• 用
  写按钮文案或表单提示（应使用
  或 + CSS）
• 在
  下面不接
  ，而直接放
  —— 这本身合法，但若该
  实际是某个子主题的导语，就该补上对应层级的标题

• 内部嵌套
  ：语义断裂，浏览器和辅助技术会困惑

辅助工具能帮你验证层级是否合理

仅靠肉眼很难判断标题结构是否连贯。Chrome DevTools 的「Accessibility」面板或 Lighthouse 的「SEO」审计项，会直接报出

缺失、层级跳跃、标题文本为空等问题。

命令行下也可快速检查（需安装 html-validate）：

html-validate --config node_modules/html-validate-config-a11y/index.json index.html

它会输出类似这样的提示：

• error: Heading has wrong level (expected h3, got h5)
• warning: Document does not have a

  element

• error: Heading order invalid (h2 followed by h4)

这类反馈比人工逐行核对更可靠，尤其在长文档或多人协作时。

视觉样式和语义必须分离

很多人改完标题层级后发现“长得不像以前了”，其实是默认浏览器样式被覆盖或未重置。这恰恰说明你正在做正确的事：让结构归结构，样式归样式。

例如，想让所有

显示为 18px 灰色字，就该写：

h3 { font-size: 18px; color: #666; margin: 1.2em 0 0.8em; }

而不是把

换成

—— 后者丢失了语义，CSS 再怎么模拟，也无法被爬虫或读屏软件识别为“第三级标题”。

真正容易被忽略的点是：层级一旦写错，修复成本会随项目变大指数级上升。早期用错一个

，后期可能要同步改 JS 锚点逻辑、SEO meta 生成规则、甚至 CMS 模板配置。

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