HTML5中仅支持iframe嵌入外部页面，需结合CSS Grid构建多区域布局，利用sandbox提升安全性，并通过name与target实现页面内跳转。
如果您希望在HTML5页面中嵌入其他网页内容并构建多区域布局结构，则需要使用iframe元素来实现类似传统框架的功能。HTML5已废弃frameset、frame等框架集相关标签，仅支持iframe作为嵌入外部页面的标准化方式。以下是具体设置方法：
一、使用iframe嵌入单个子页面
iframe是HTML5中唯一合法的内联框架元素，用于在当前页面中嵌入另一个完整的HTML文档。它具有独立的渲染上下文和JavaScript执行环境，可控制尺寸、边框及加载行为。
1、在HTML文档的
区域内插入<iframe>标签。
2、为<iframe>设置src属性，其值为要嵌入的子页面URL，例如src="header.html"。
立即学习“前端免费学习笔记（深入）”；
3、通过width和height属性设定显示区域尺寸，推荐使用CSS单位如width="100%"或height="400px"。
4、添加title属性以提升可访问性，例如title="顶部导航栏"。
5、如需隐藏边框，使用CSS样式border: none;或内联样式style="border:none;"。
二、用CSS Grid构建多区域框架布局
通过CSS Grid可将页面划分为多个逻辑区域（如头部、侧栏、主内容、底部），再在各区域中分别放置iframe，从而模拟传统frameset的多框架效果，且具备响应式与语义化优势。
1、为父容器元素（如
display: grid;并定义网格模板，例如grid-template-areas: "header header" "nav main" "footer footer";。
2、为每个子容器分配grid-area名称，如grid-area: header;。
3、在对应区域的子容器内插入iframe，并设置其src指向对应功能页面，例如src="nav-menu.html"。
4、对所有iframe统一设置width: 100%; height: 100%; border: none;，确保填满所在网格区域。
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
5、使用overflow: hidden;或overflow: auto;控制子页面溢出行为。
三、通过iframe sandbox属性增强安全性
当嵌入不受信任的第三方页面时，sandbox属性可限制iframe内的脚本执行、表单提交、弹窗等能力，防止恶意操作影响主页面。
1、在iframe标签中添加sandbox属性，例如<iframe sandbox src="untrusted.html"></iframe>。
2、若需启用特定权限，在sandbox后添加空格分隔的令牌，如sandbox="allow-scripts allow-same-origin"。
3、注意：不带任何值的sandbox会禁用JavaScript、插件、表单提交及跨域请求。
4、确保目标页面支持CORS策略，否则allow-same-origin无法生效。
5、测试不同sandbox组合下iframe内容的可交互性，避免功能缺失。
四、使用iframe的name与target实现页面内跳转
通过为iframe指定name属性，并在链接中设置target指向该name，可使链接在iframe内部打开，替代传统frame的target跳转机制。
1、为iframe添加name="contentFrame"属性。
2、在导航链接中设置target="contentFrame"，例如<a href="article1.html" target="contentFrame">文章一</a>。
3、确保所有目标页面均适配iframe容器宽度，避免水平滚动条出现。
4、为提升用户体验，可在链接上添加rel="noopener"防止新上下文获取window.opener引用。
5、必须确保目标页面未设置X-Frame-Options: DENY响应头，否则将被浏览器阻止加载。
