HTML5已废弃frameset/frame框架机制，现代“框架布局”实为语义化标签（header/nav/main/aside/footer）结合CSS Grid/Flexbox实现；Grid通过grid-template-areas等属性直观划分区域，iframe仅适用于嵌入第三方独立文档且需注意安全与性能问题。
HTML5 没有内置“框架布局”概念
HTML5 本身不提供类似旧版 或 的框架机制，这些标签在 HTML5 中已被**完全废弃**，浏览器不再支持，强行使用会导致渲染失败或被忽略。所谓“HTML5 框架结构”，实际是指用语义化标签 + CSS（尤其是 Flexbox/Grid）构建的现代页面分区结构。
用
这些标签不自带样式，但定义了内容角色，对可访问性、SEO 和维护性至关重要。它们只是容器，布局仍需 CSS 控制。
-
） -
应只包裹**主要导航链接集**，侧边栏菜单或页脚链接通常不用它 -
页面唯一，且不能嵌套在、等内部 -
表示与主内容相关但可独立存在的内容（如侧边栏推荐、作者简介），不是所有“侧边栏”都适用
用 display: grid 快速实现经典三栏+页眉页脚结构
Grid 是目前最直观、可控性最强的布局方式，尤其适合固定区域划分。避免用浮动或绝对定位模拟“框架”。
body {
display: grid;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
grid-template-rows: 60px 1fr 40px;
grid-template-columns: 200px 1fr 250px;
min-height: 100vh;
margin: 0;
}
header { grid-area: header; }
nav { grid-area: nav; }
main { grid-area: main; }
aside { grid-area: aside; }
footer { grid-area: footer; }
注意：grid-template-areas 中重复的字符串名（如 "header header header"）对应列数，必须严格对齐；若某区域不需要（如移动端隐藏侧边栏），可改用 grid-template-areas: "header header" "nav main" "footer footer" 并配合媒体查询。
立即学习“前端免费学习笔记（深入）”；
不要用
仍在 HTML5 中有效，但它加载的是**完整独立的 HTML 文档上下文**，有跨域限制、SEO 不可见、移动端手势冲突、性能开销大等问题。常见误用包括：
- 把左侧菜单和右侧内容分别塞进两个
—— 这会破坏历史记录、URL 同步、打印体验 - 用
加载本地 HTML 片段（如menu.html）—— 多数现代服务器默认禁止直接访问 .html 文件，且无法共享 CSS/JS 上下文 - 依赖
实现“局部刷新”—— 应改用 AJAX + DOM 操作或前端路由（如 React Router、Vue Router）
真正需要嵌入外部系统（如地图、支付弹窗、客户评论 widget）时， 才是合理选择，且务必设置 sandbox、referrerpolicy 等安全属性。
