语义化标签搭骨架配合CSS Grid/Flexbox布局，禁用div堆砌和frameset；header仅含标识与导航入口，nav专管导航链接，main全页唯一且直包核心内容，section必配标题，aside限补充性内容，Grid用grid-template-areas划分区域，Flex处理一维排列，避免多main、nav混操作控件、section无标题等陷阱。

用语义化标签搭骨架，配合 CSS Grid 或 Flexbox 控制布局，不靠 div 堆砌，也不用已废弃的 frameset。

用对语义化标签，让结构自己说话

每个标签承担明确职责，不能混用或嵌套错位：

• 放页面顶部标识、Logo 和主导航入口，但搜索框、登录按钮这类操作控件建议移入
  或

  ，别硬塞进去
• 只包真正起导航作用的链接列表；多个导航区（如主导航+面包屑）可各自用
  ，加 aria-label 区分
• 全页只能有一个，且必须直接包裹核心内容，不能被
  或

  包着再进

  每个都要有标题（

  起），没标题就说明它可能只是视觉分块，该用

  或删掉

  用于补充性内容，比如作者简介、相关推荐、术语解释；不是所有右侧栏都算 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 配合媒体查询，在窄屏下让原本横排的导航项自动折行，或把侧栏移到主内容下方

  避免常见结构陷阱

  很多页面用了语义标签却依然混乱，问题常出在逻辑错位：

  • 多个
    ：首页一个，文章页一个，但同一页面里只允许一个
  • 里塞搜索框、语言切换器：这些属于操作控件，不是导航链接，放进

    或

    更合适
  • 没标题还硬套：检查是否真有独立主题，没有就改用

    或直接去掉包裹层

    塞满友情链接：若链接有导航功能，单独用

    包一层，保持语义纯净

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