在html5中语法非法,浏览器直接忽略并可能退入怪异模式;它已被标准彻底移除,不可用于现代开发,必须用css grid/flexbox配合替代。

frameset 在 HTML5 中直接无效,不是“不推荐”,而是语法错误
浏览器解析到 <frameset></frameset> 时,会忽略整个标签及其所有子 <frame>,并可能退入 quirks mode(怪异模式)。这不是兼容性问题,是标准层面的移除:HTML5 规范里根本不存在这个元素。如果你在现代项目里还看到它,基本可以判定是遗留系统或未更新的模板引擎输出。
为什么不能用 frameset + frame 实现“固定导航+内容区”
常见错误现象:<frameset cols="20%,80%">
<frame src="nav.html">
<frame src="main.html">
</frameset> 在 Chrome/Firefox/Safari 中完全不渲染,或只显示空白页;控制台无报错但 DOM 树里找不到任何 <frame> 节点。
- 语义断裂:每个
<frame>是独立文档上下文,document对象互不可见,CSS 和 JS 无法跨 frame 统一管理 - 可访问性失效:屏幕阅读器无法建立父子页面关系,
title属性被忽略,aria-属性不生效 - SEO 归属混乱:搜索引擎无法判断
nav.html是当前页面的导航模块,还是独立页面 - 响应式失能:
cols/rows只支持像素/百分比/星号,无法适配 flex/grid 的弹性行为
iframe 替代 frameset 时必须加的三个关键属性
<iframe></iframe> 没被废弃,但用法完全不同——它必须嵌在正常流式文档中,且需显式声明可访问性与安全边界。
-
title:必填,用于无障碍识别,如title="左侧导航栏";空值或缺失会导致 Lighthouse 报告“iframe缺少描述” -
sandbox:默认禁用脚本、表单提交、弹窗等能力,若需执行 JS,至少写sandbox="allow-scripts",严禁用sandbox="" -
loading="lazy":防止首屏 iframe 阻塞主文档渲染,尤其适用于非首屏区域的嵌入内容
示例:<iframe src="nav.html" title="主菜单" sandbox="allow-scripts" loading="lazy"></iframe>
CSS Grid + iframe 才是真正的 frameset 替代方案
用 display: grid 划分区域,再把 <iframe></iframe> 放进对应格子,才能复现旧 frameset 的布局意图,同时保留现代 Web 的全部能力。
注意:不要直接复制 <frameset cols="250px,1fr"></frameset> 的逻辑。CSS Grid 的列定义要写成 grid-template-columns: 250px 1fr,且必须包裹在常规 <div> 容器中,不能替代 <code>。
容易踩的坑:<iframe></iframe> 默认有边框和滚动条,需用 CSS 显式清除:border: none; overflow: hidden;;高度设为 100% 时,父容器必须有明确高度(如 height: 100vh),否则 iframe 会塌缩为 150px 默认高。











