必须唯一、是直接子元素、仅包裹当前URL独有的核心业务内容，如博客正文、商品详情或表单主体，不得嵌套在等标签内，也不含导航或复用模块。

标签不是用来“套住视觉上最显眼那块”的，而是精准锚定页面中**唯一、不可复用、随 URL 变化而变化的核心业务内容**。它不靠位置或样式说话，靠的是语义结构的正确性。

必须满足的三个硬性条件

• 只能出现一次：整个 HTML 文档中，

必须且仅能存在一个。重复使用（哪怕用 JS 动态插入）会被读屏器忽略第二个起的所有实例，Lighthouse 会直接报 duplicate-main 错误。

• 必须是 的直接子元素：不能嵌套在

、

、

、

或另一个

内部。例如

是无效结构，屏幕阅读器可能完全跳过该

。

• 内容必须“不可复用”：把这块内容复制粘贴到另一个页面还能原样用？那它就不属于

。比如全局导航、版权信息、登录框、面包屑、侧边推荐——这些都得剔除。

哪些内容适合放进

判断标准很简单：它是否代表当前路由/URL 下独有的业务主体？

• 博客列表页：

里放

组成的文章卡片流，每张卡片含标题、摘要、发布时间

• 商品详情页：

里放商品主图、名称、价格、SKU 选择器、加入购物车按钮、详情图文描述

• 后台仪表盘首页：

里放实时数据卡片、图表组件、关键指标表格——但不包括顶部导航栏或左侧菜单

DeepBI DHTML 页面生成器

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

下载

• 表单提交页：

里放表单标题、字段组、提交按钮；不包括页头 Logo 和底部帮助链接

框架项目中的常见陷阱与写法

• React（如 React Router v6）：在根 Layout 组件中定义

，用 插入子路由内容。不要在每个页面组件（如 Dashboard.tsx）里再写

。

• Vue（如 Vue Router）： 渲染的具体页面组件（如 Article.vue）应在模板顶层直接包裹

，而不是在 App.vue 里统一包死。

• Next.js App Router：全局壳层（app/layout.tsx）里禁止放

；真正的主体必须落在 app/page.tsx、app/[slug]/page.tsx 等页面文件内部。

• SSR 场景：服务端拼接模板时，确保只有当前页面逻辑输出

，避免多个 partial 模板各自渲染导致 HTML 中实际出现两个

。

搭配使用的细节要点

•

内部建议包含一个

，且全页只应有一个

，它应准确反映当前页面主题（如“订单确认”“编辑用户资料”）

• 可以合法嵌套

、

、

、 等语义化元素，但不要用

替代它们做“分块布局”

• 不需要加 class 或 id，也不依赖 CSS 样式生效；它的价值在 DOM 结构和语义角色（自动具有 role="main"）

• 旧浏览器兼容可加 display: block，但无需 polyfill；IE 不支持可退化为

，不过优先用原生

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