语义化标签搭骨架配合CSS Grid/Flexbox布局，禁用div堆砌和frameset；header仅含标识与导航入口，nav专管导航链接，main全页唯一且直包核心内容，section必配标题，aside限补充性内容，Grid用grid-template-areas划分区域，Flex处理一维排列，避免多main、nav混操作控件、section无标题等陷阱。
用语义化标签搭骨架，配合 CSS Grid 或 Flexbox 控制布局，不靠 div 堆砌，也不用已废弃的 frameset。
用对语义化标签，让结构自己说话
每个标签承担明确职责，不能混用或嵌套错位：
-
放页面顶部标识、Logo 和主导航入口，但搜索框、登录按钮这类操作控件建议移入 - 只包真正起导航作用的链接列表；多个导航区（如主导航+面包屑）可各自用
-
全页只能有一个，且必须直接包裹核心内容，不能被 或
包着再进 - 每个都要有标题（
起），没标题就说明它可能只是视觉分块，该用
或删掉- 用于补充性内容，比如作者简介、相关推荐、术语解释；不是所有右侧栏都算 aside，纯广告或无关链接不算
用 CSS Grid 定义模块位置，避免浮动和绝对定位
Grid 适合整体框架划分，尤其多区域、固定逻辑的布局：
DeepBI DHTML 页面生成器下载生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 外层容器设 display: grid，用 grid-template-areas 直观命名区域：
"header header" "nav main" "footer footer" - 子元素通过 grid-area 对应名称，比如
grid-area: nav;的 div 就自动落到导航区 - 列宽推荐用 fr 单位（如
1fr 3fr），比像素或百分比更适应内容变化和响应式切换 - 小屏时可重定义 grid-template-areas 为垂直堆叠，比如
"header" "nav" "main" "footer"，无需额外媒体查询写死高度
用 Flexbox 处理线性组合，比如导航条或主侧结构
Flex 更适合一维排列，响应式切换自然：
立即学习“前端免费学习笔记（深入）”；
- 左右结构：父容器 display: flex，flex-direction: row，侧边栏设 flex: 0 0 240px，主内容区 flex: 1
- 上下结构：比如顶部导航 + 可滚动主体，父容器 flex-direction: column，主体区加 flex: 1 并设 overflow-y: auto
- 移动端适配：用 flex-wrap: wrap 配合媒体查询，在窄屏下让原本横排的导航项自动折行，或把侧栏移到主内容下方
避免常见结构陷阱
很多页面用了语义标签却依然混乱，问题常出在逻辑错位：
- 多个
：首页一个，文章页一个，但同一页面里只允许一个 没标题还硬套：检查是否真有独立主题，没有就改用 或直接去掉包裹层
- 每个都要有标题（
