HTML5框架重构核心是按内容意图校准语义结构：聚焦焦点顺序、div占比超60%、class伪语义三信号；严守等标签使用边界；清除三层div套娃、空包裹、冗余table；用grid/flex/flow-root替代布局wrapper。

HTML5 整体框架重构的核心，不是把所有 div 换成语义标签就完事，而是按内容意图“校准结构”，让每一层都有明确职责、可被机器识别、不拖慢浏览器解析。冗余往往藏在看不见的嵌套、错位的语义和被遗忘的 wrapper 里。

先识别真正该动的信号

别凭感觉删代码。打开开发者工具，盯住这三点：

• 用 Tab 键测试焦点顺序：如果焦点从页脚跳回导航，说明结构扁平化缺失，DOM 层级或语义错乱
• 运行 document.querySelectorAll("div").length / document.querySelectorAll("*").length > 0.6：若超过 60%，且多数 div 只带 class、无业务逻辑，就是冗余高发区
• 右键任意区块 → “Edit as HTML”，看是否仅靠 class="header" 这类命名支撑语义——没有原生标签兜底，就是重构起点

用语义标签替代时守住边界

换标签不是文字替换，是规则重置：

• 全局只能出现一次，不能嵌套在
  、
  或
  内；多个卡片式主区，改用
• 专指主导航链接组（如顶部菜单、侧边菜单），面包屑、页脚链接、文章内锚点都不算，误用会干扰屏幕阅读器快捷键
• 必须有标题（

  –

  ），否则应改用
  或

  ；它不是“万能分块”，而是主题性内容分组
• 和
  必须是 或最近的
  /
  的直系子元素，嵌套错层会导致辅助技术误读

砍掉三类高危嵌套

这些结构对渲染、内存、无障碍影响最直接，优先清理：


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

  …

  ），用

  + display: grid 替代
• 包裹单个内联元素的空
  （如

  文字

  ），且无样式绑定、无 JS 事件监听——直接删，用

  或 承载
• 已用 Flex/Grid 实现布局，却残留的旧式 包裹层（尤其
  套多层

  ），这类结构会触发浏览器自动补全，放大重排范围

  用现代 CSS 消解布局型 wrapper

  很多嵌套只为实现布局，现在可直接交给 CSS，避免 DOM 层级膨胀：

  • 放弃
    ，改用
    设 display: grid，子项用 grid-area 定位
  • 父容器设 display: flex 后，子元素无需额外
    包裹来对齐；用 align-items、justify-content 控制即可
  • 清除浮动不用
    ，改用 display: flow-root 或 overflow: hidden
  • 对纯样式包裹但无语义的父节点，可用 display: contents 让它“消失”在渲染树中，子元素直接受上级 Flex/Grid 控制（注意 Safari 15.4+ 支持）