html5中构建页面框架式布局的现代方案有四种：一、用iframe嵌入子页面，支持同源加载与样式隔离；二、用div+javascript动态加载内容，便于dom交互；三、用object标签嵌入html资源，兼容性需测试；四、用spa路由机制模拟多页效果，不刷新页面切换视图。
如果您希望在HTML5中构建页面结构并嵌入子页面，由于HTML5已废弃传统的<frameset></frameset>和<frame>标签，必须使用现代替代方案。以下是实现页面框架式布局的可行方法：
一、使用iframe嵌入子页面
iframe是HTML5中官方支持的内联框架元素，允许将外部HTML文档作为独立可滚动区域嵌入当前页面，具有独立的上下文和样式隔离性。
1、在父页面HTML中插入<iframe></iframe>标签，并设置src属性指向目标子页面URL。
2、通过width和height属性或CSS控制iframe尺寸，推荐使用CSS设置以适配响应式需求。
立即学习“前端免费学习笔记（深入）”；
3、添加title属性提升可访问性，例如title="主内容区域"。
4、如需禁用滚动条，可设置scrolling="no"（HTML5中已不推荐）或使用CSS overflow: hidden；如需去除边框，设置frameborder="0"或CSS border: none。
5、为避免跨域限制导致子页面无法加载，确保iframe的src地址与父页面同源，或目标服务器已正确配置CORS头及X-Frame-Options策略。
二、使用div配合JavaScript动态加载子页面内容
该方法通过AJAX获取子页面HTML片段并注入指定div容器，避免iframe的独立上下文限制，便于父子页面间DOM交互与样式统一。
1、在父页面中定义一个空<div id="content-area"></div>作为子页面内容承载区。
2、使用fetch()或XMLHttpRequest请求子页面URL，获取其HTML文本内容。
3、将返回的HTML字符串解析为DOM节点，提取内有效内容（如去除<script></script>标签以防重复执行），再插入到目标div中。
4、若子页面含内联样式或需复用全局CSS，应在父页面中预先引入对应样式表，且注意避免CSS选择器冲突覆盖。
5、对动态加载的内容执行必要的初始化脚本（如事件绑定），需在内容插入完成后调用，不可依赖DOMContentLoaded。
三、使用HTML5的<object></object>标签嵌入HTML资源
<object></object>标签可用于嵌入外部HTML文档，其行为与iframe类似但语义更偏向“外部资源对象”，部分浏览器对其支持存在差异，需谨慎测试。
1、在页面中插入<object data="subpage.html" type="text/html" width="100%" height="600"></object>。
2、设置type属性为"text/html"以明确指示内容类型。
3、为兼容性考虑，可在<object></object>内部添加备用内容（如提示文字或降级链接）。
4、某些浏览器（如Safari）可能阻止<object></object>加载本地file://协议下的HTML文件，部署时须使用HTTP/HTTPS服务环境。
四、采用单页应用（SPA）路由机制模拟框架结构
利用History API与前端路由库（如原生Router或轻量级router.js），通过URL路径变化动态切换视图内容，不刷新整页即可呈现不同“子页面”效果。
1、在HTML中保留一个主容器，如<main id="router-view"></main>。
2、监听popstate事件及链接点击，拦截默认跳转行为。
3、根据当前URL路径匹配预定义路由规则，异步加载对应HTML模板或组件并渲染至容器。
4、更新document.title与history.pushState()保持URL同步，确保前进后退功能正常。
5、所有路由对应的子页面内容必须通过合法跨域策略或同源方式获取，否则fetch将因CORS被拒绝。
