HTML5 中 语法无效，浏览器直接忽略或进入怪异模式；其与 DOCTYPE 冲突，DOM 中不生成节点， 已被 取代，推荐用 CSS Grid 和服务端包含或 SPA 路由重构布局复用逻辑。

HTML5 中 不是“不推荐”，而是语法无效——浏览器解析时直接忽略，或强制进入怪异模式（quirks mode）。

为什么 会触发解析失败

现代浏览器的 HTML 解析器在遇到 时，会判定文档类型与 DOCTYPE 不匹配。哪怕你写了 ，只要出现 ，HTML5 解析规则就中断，回退到类似 IE5 的旧引擎逻辑。这不是警告，是硬性拒绝。

• DOM 中根本不会生成 节点，document.querySelector('frameset') 永远返回 null
• 控制台通常不报错，但 Network 面板里可能看到子 frame 请求被静默取消
• 若混用 和 ， 内容会被丢弃，只渲染 frameset 区域（如果还能渲染的话）

和 的本质区别

是 frameset 的子元素，必须嵌套在 内；而 是独立的流式内容容器，可放在任意合法 HTML 上下文中。

• ：无语义、不可聚焦、无法被屏幕阅读器识别为导航区域
• ：显式声明用途，支持键盘导航和语义暴露
• 共享父页面的 JavaScript 执行上下文（容易污染）； 默认隔离，需主动用 postMessage() 通信

CSS Grid 替代 的关键细节

用 grid-template-columns: 20% 80% 看似等价，但行为完全不同：百分比基于容器宽度，而旧 frameset 的列宽是强制固定比例、无视内容挤压。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 必须设 height: 100vh 或明确高度，否则 1fr 无计算基准，整行会塌缩
• 推荐用 minmax(250px, 20%) 替代纯百分比，兼顾最小可用宽度与响应式弹性
• 局部滚动要加 overflow-y: auto 到具体区域容器（如 .sidebar），不是给 加——后者只控制 iframe 自身视口，不代理内部文档滚动

服务端 include 与前端 SPA 路由哪个更接近原 frameset 语义

两者都不是“模拟 frameset”，而是重构交互契约： 的核心其实是“布局复用 + 内容解耦”。服务端 include 在构建时合并，SPA 路由在运行时切换，但都避免了多文档上下文带来的状态割裂问题。

• PHP 的 include 'header.php'; 或 Nunjucks 的 {% include 'nav.html' %}：适合内容静态、SEO 敏感场景，URL 变化即整页刷新
• React Router 的 或 Vue Router 的 ：适合交互密集型应用，导航不刷新页面，但需手动管理 document.title、scroll behavior 等
• 共同底线：不再让“导航”和“内容”属于不同 window 对象，也就绕开了 parent.frames[0].location 这类脆弱引用

真正难迁移的不是布局代码，而是那些隐式依赖跨 frame 全局变量、window.name 传参、或靠 target="main" 触发跳转的逻辑——这些在新架构里没有对应物，必须重写。

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