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

下载

• <main></main> 全局只能出现一次，不能嵌套在 <article></article>、<aside></aside> 或 <nav></nav> 内；多个卡片式主区，改用 <section aria-labelledby="card1-title"></section>
• <nav></nav> 专指主导航链接组（如顶部菜单、侧边菜单），面包屑、页脚链接、文章内锚点都不算，误用会干扰屏幕阅读器快捷键
• <section></section> 必须有标题（<h2>–<h6></h6> </h2>），否则应改用 <div> 或 <code><article></article>；它不是“万能分块”，而是主题性内容分组
• <header></header> 和 <footer></footer> 必须是 或最近的 <section>/<article></article></section> 的直系子元素，嵌套错层会导致辅助技术误读

砍掉三类高危嵌套

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

立即学习“前端免费学习笔记（深入）”；

• 连续三层以上 <div> 套娃，且每层只带一个 class（如 <code><div class="wrapper"><div class="container"><div class="inner">…</div></div></div>），用 <main></main> + display: grid 替代
• 包裹单个内联元素的空 <div>（如 <code><div>文字</div>），且无样式绑定、无 JS 事件监听——直接删，用 <p></p> 或 <span></span> 承载
• 已用 Flex/Grid 实现布局，却残留的旧式 <table> 包裹层（尤其 <code><tr><td> 套多层 <code><div>），这类结构会触发浏览器自动补全，放大重排范围 <h3>用现代 CSS 消解布局型 wrapper</h3> <p>很多嵌套只为实现布局，现在可直接交给 CSS，避免 DOM 层级膨胀：</p> <ul> <li>放弃 <code><div class="row"><div class="col"></div></div>，改用 <section></section> 设 display: grid，子项用 grid-area 定位
• 父容器设 display: flex 后，子元素无需额外 <div> 包裹来对齐；用 <code>align-items、justify-content 控制即可
• 清除浮动不用 <div class="clearfix"></div>，改用 display: flow-root 或 overflow: hidden
• 对纯样式包裹但无语义的父节点，可用 display: contents 让它“消失”在渲染树中，子元素直接受上级 Flex/Grid 控制（注意 Safari 15.4+ 支持）