HTML5已废弃frameset，应使用语义化标签（如nav、header）配合CSS Grid/Flex布局替代，通过1fr、calc()实现弹性分区与局部滚动，并用JS路由或fetch处理内容加载，避免样式和状态污染。

HTML 框架集（）早已被 HTML5 废弃，现代浏览器不支持，且 SEO、可访问性、响应式和单页应用集成全都不兼容。直接用

+

+ CSS 布局模拟框架行为，不是“还原旧体验”，而是用语义化结构+CSS控制实现更健壮的分区导航——关键在于布局控制逻辑和 DOM 结构设计。

用 display: grid 替代

传统 把页面硬切为顶部固定高度、其余自适应的两块。用 Grid 更精确可控，且支持响应式断点重排：

<div class="layout">
  <header class="top-bar">导航栏</header><main class="content-area">主内容</main>
</div>
<p><style>
.layout {
display: grid;
grid-template-rows: 100px 1fr;
height: 100vh;
}
@media (max-width: 768px) {
.layout { grid-template-rows: 60px 1fr; }
}
</style></p>

• 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 实现需明确限制容器尺寸并启用局部滚动：

SEO Competitor Analyzer

分析竞争对手网站，识别关键词空白、SEO薄弱环节、内容机会和反向链接策略，提供优先排序且可执行的建议。

下载

<aside class="sidebar"><nav><a href="#">菜单项 1</a></nav><nav><a href="#">菜单项 2</a></nav></aside><p><style>
.sidebar {
height: calc(100vh - 100px); /<em> 扣除 header 高度 /
overflow-y: auto;
}
</style></p>

• 不能只写 overflow: auto —— 若容器无高度约束，会撑满整个页面，失去局部滚动意义
• 用 calc() 或 Grid/Flex 的自动分配比写死像素更健壮
• 移动端慎用：iOS Safari 对嵌套滚动支持不稳定，建议优先用整体页面滚动+锚点跳转

真正难的不是把 换成

，而是旧框架隐含的“多文档上下文隔离”被打破后，JS 全局变量、样式污染、状态同步等问题会立刻暴露。迁移时先确保各区域内容能独立加载，再逐步解耦逻辑，而不是一上来就追求视觉还原。

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