HTML5已废弃frameset，应使用语义化标签（如nav、header）配合CSS Grid/Flex布局替代，通过1fr、calc()实现弹性分区与局部滚动，并用JS路由或fetch处理内容加载，避免样式和状态污染。
HTML 框架集（ 传统 旧框架中点击左侧菜单项，在右侧 旧框架中某个 立即学习“前端免费学习笔记（深入）”； 真正难的不是把 ）早已被 HTML5 废弃，现代浏览器不支持，且 SEO、可访问性、响应式和单页应用集成全都不兼容。直接用 + CSS 布局模拟框架行为，不是“还原旧体验”，而是用语义化结构+CSS控制实现更健壮的分区导航——关键在于布局控制逻辑和 DOM 结构设计。用
display: grid 替代
把页面硬切为顶部固定高度、其余自适应的两块。用 Grid 更精确可控，且支持响应式断点重排：
1fr 比 * 更规范，表示剩余可用空间的弹性分配height: 100vh，否则 1fr 无参照基准position: fixed 模拟顶部栏——它会脱离文档流，导致 main 内容被遮挡用
+ target="_self" 替代
中加载新页面。HTML5 中没有跨区域页面加载机制，需靠 JS 控制内容替换或路由跳转：
包裹链接，所有 设 target="_self"（默认），配合服务器端路由返回完整页面click，用 fetch() 加载 HTML 片段到 ，或使用 history.pushState() 配合前端路由target="main" —— 浏览器找不到对应 ，会新开标签页用 CSS
overflow-y: auto 替代
可独立滚动，不影响其他区域。纯 CSS 实现需明确限制容器尺寸并启用局部滚动：
overflow: auto —— 若容器无高度约束，会撑满整个页面，失去局部滚动意义calc() 或 Grid/Flex 的自动分配比写死像素更健壮 换成
