现代HTML模板最高效布局方案是CSS Grid+语义化HTML5标签。frameset和frame已废弃，导致SEO失效、URL不可分享、无障碍差、无响应式；iframe仅适用于跨域隔离场景；Grid容器配合grid-template-areas和显式尺寸约束可确保DOM完整性、样式可控与响应式布局。
现代 HTML 模板最高效布局方案是 CSS Grid + 语义化 HTML5 标签，而非 frameset 或嵌套 iframe —— 后两者已废弃、不可 SEO、跨域受限且调试困难。
为什么不能用 frameset 和 frame
这些标签在 HTML5 中已被正式废弃，Chrome/Firefox/Edge 等主流浏览器虽仍解析，但会触发控制台警告，且无法通过 W3C 验证。更重要的是：frameset 强制移除 <body>，导致无法使用现代 JS 框架挂载点（如 id="app"），也无法注入全局样式或运行初始化脚本。
- SEO 彻底失效：搜索引擎只索引框架页本身（空壳），不抓取
src指向的子页面 - URL 不可分享：用户复制地址栏 URL，得到的是框架容器页，不是实际内容页
- 无障碍支持差：屏幕阅读器难以正确识别多框架上下文
- 无响应式能力：
rows="100px,*"在小屏上直接撑爆视口，无法用媒体查询干预
iframe 仅适合特定隔离场景，别当“页面框架”用
把 iframe 当主布局手段，等于主动放弃 DOM 完整性、样式继承和事件冒泡。它唯一合理用途是加载第三方、跨域、需沙箱隔离的内容（如支付弹窗、客服 widget、广告位）。
- 父页无法获取
iframe内document.title或滚动位置，做导航高亮或返回顶部就卡死 -
height必须写死或靠 JS 动态同步（如postMessage回传高度），否则内容溢出或留白 - 移动端双层滚动（父页 + iframe 内）体验极差，iOS 上常触发卡顿
- 若子页含表单，
target="_self"会跳转整个 iframe，target="_top"又会跳出框架 —— 没有中间态
真正高效的模板布局：Grid 容器 + 语义区域 + 显式尺寸约束
用一个 <div class="layout"> 做 Grid 容器，配合 grid-template-areas 声明逻辑区块，再用 grid-template-columns 控制物理宽度分配。所有区域保持在同一个 DOM 树里，样式、JS、动画全部可控。
立即学习“前端免费学习笔记（深入）”；
-
grid-template-areas: "header header" "nav main" "footer footer";—— 区域名必须是合法 CSS 标识符（不能含空格、斜杠、中文） - 侧边栏固定宽：用
grid-template-columns: 240px 1fr;，别用auto，否则长文本会撑开整个列 -
main区域要显式设width: 100%，否则 flex/grid 子项默认不继承宽度，文字可能溢出容器 - IE11 兼容需加
display: -ms-grid;和对应旧语法，但 2026 年绝大多数项目已无需支持
SPA 模板中 <router-view> 或 <Outlet> 不是“框架”，而是占位符
Vue 的 <router-view> 和 React Router 的 <Outlet> 本质是 JS 渲染指令，它们不创建新文档上下文，只是动态替换 DOM 片段。因此不能指望它们实现 iframe 那种隔离，也不该给它们套 iframe 标签。
-
<router-view name="sidebar">必须配合路由配置里的components: { sidebar: Sidebar }，否则不生效 -
<Outlet>不接受任何children，父组件里写的静态 HTML 会被完全清空 —— 权限校验必须放在布局组件useEffect或onMounted阶段，不能等<Outlet>渲染完再判断 - 导航守卫（如未登录跳登录页）必须在路由进入前执行，否则用户会看到“闪一下”空白或错误内容
真正容易被忽略的点是：Grid 容器内子元素的 min-width: 0 缺失会导致 1fr 列被内部长单词或 URL 撑破；还有，grid-area 值大小写敏感，写成 "Header" 和 CSS 里定义的 grid-area: header; 就对不上 —— 这类细节不报错，但布局直接失效。
