html5已废弃frameset，应使用语义化标签（如nav、header）配合css Grid/flex布局替代，通过1fr、calc()实现弹性分区与局部滚动，并用js路由或fetch处理内容加载，避免样式和状态污染。
HTML 框架集（）早已被 html5 废弃，现代浏览器不支持，且 seo、可访问性、响应式和单页应用集成全都不兼容。直接用
+ 用
用
用 CSS
+ CSS 布局模拟框架行为，不是“还原旧体验”，而是用语义化结构+CSS控制实现更健壮的分区导航——关键在于布局控制逻辑和 dom 结构设计。
用 display: grid 替代
传统 把页面硬切为顶部固定高度、其余自适应的两块。用 Grid 更精确可控，且支持响应式断点重排：
导航栏 主内容 -
1fr比*更规范，表示剩余可用空间的弹性分配 - 必须显式设
height: 100vh，否则1fr无参照基准 - 避免用
position: fixed模拟顶部栏——它会脱离文档流，导致main内容被遮挡
用
+ target="_self" 替代
旧框架中点击左侧菜单项，在右侧 中加载新页面。HTML5 中没有跨区域页面加载机制，需靠 JS 控制内容替换或路由跳转：
- 若仍用多 HTML 文件：用
设target="_self"（默认），配合服务器端路由返回完整页面 - 若改用单页：监听
click，用fetch()加载 HTML 片段到，或使用history.pushState()配合前端路由 - 绝对不要写
target="main"—— 浏览器找不到对应，会新开标签页
用 CSS overflow-y: auto 替代
旧框架中某个 可独立滚动，不影响其他区域。纯 CSS 实现需明确限制容器尺寸并启用局部滚动：
立即学习“前端免费学习笔记（深入）”；
- 不能只写
overflow: auto—— 若容器无高度约束，会撑满整个页面，失去局部滚动意义 - 用
calc()或 Grid/Flex 的自动分配比写死像素更健壮 - 移动端慎用：ios safari 对嵌套滚动支持不稳定，建议优先用整体页面滚动+锚点跳转
真正难的不是把 换成
，而是旧框架隐含的“多文档上下文隔离”被打破后，JS 全局变量、样式污染、状态同步等问题会立刻暴露。迁移时先确保各区域内容能独立加载，再逐步解耦逻辑，而不是一上来就追求视觉还原。