可使用HTML框架集(frameset)划分网页区域并分别加载内容,包括rows/cols分割、嵌套框架、命名跳转及noframes兼容方案。

如果您希望将网页划分为多个独立区域并分别加载不同内容,则可以使用HTML框架集(frameset)来组织页面布局。以下是实现此结构的具体方法:
一、使用<frameset>标签定义框架结构
<frameset>是专门用于划分浏览器窗口的容器标签,替代标准的<body>标签,通过rows或cols属性指定水平或垂直分割方式。每个子框架由<frame>标签定义,并通过src属性加载对应HTML文档。
1、将HTML文档的<body>标签及其闭合标签完全移除。
2、在</head>之后插入<frameset rows="20%,60%,20%">标签,表示将页面按百分比分成三行区域。
立即学习“前端免费学习笔记(深入)”;
3、在<frameset>内部依次添加三个<frame src="header.html">、<frame src="content.html">、<frame src="footer.html">标签。
4、以</frameset>结束整个框架集定义。
二、通过cols属性创建左右分栏布局
当需要并排显示导航栏与主内容区时,可使用cols属性控制列宽比例,各<frame>按从左到右顺序加载指定资源,支持像素值、百分比及相对单位(*)混合使用。
1、编写<frameset cols="200px, *">,左侧固定200像素宽,右侧自动填充剩余空间。
2、在该<frameset>内嵌套第一个<frame src="nav.html">作为导航面板。
3、插入第二个<frame src="main.html">承载主体内容。
4、确保外部<frameset>被正确闭合,不遗漏</frameset>标签。
三、嵌套框架集实现复杂网格结构
单一frameset仅支持单向分割,如需同时实现行列组合(例如顶部横幅+左导航+右内容),必须在某个<frame>位置嵌入新的<frameset>,形成多层嵌套关系。
1、外层使用<frameset rows="15%,85%">划分顶部与主体区域。
2、第一个<frame src="banner.html">置于顶部区域。
3、在第二行区域中不再使用<frame>,而是嵌入一个新的<frameset cols="25%,75%">。
4、该嵌套<frameset>中分别放入<frame src="menu.html">和<frame src="article.html">。
四、为框架设置名称并实现页面内跳转
通过name属性标识特定框架,可在其他页面的链接中使用target属性指向该名称,使点击链接后的内容仅在指定框架中加载,避免整页刷新。
1、给目标<frame>添加name属性,例如<frame name="content" src="default.html">。
2、在导航页的链接中写入<a href="page1.html" target="content">页面一</a>。
3、确保所有相关链接均使用相同target值,且与frame的name严格一致,包括大小写。
4、注意:target值必须与frame的name完全匹配,否则链接将在新窗口打开或覆盖整个页面。
五、添加<noframes>提供无框架环境兼容内容
由于现代浏览器逐步弃用frameset,且搜索引擎难以索引框架页,必须提供<noframes>区块作为降级方案,其中可放置普通<body>结构及替代性导航信息。
1、在</frameset>闭合后立即添加<noframes>标签。
2、在<noframes>内部插入标准<body>标签(部分浏览器允许省略起始标签但需保留语义结构)。
3、写入简明文字说明:“您的浏览器不支持框架,请点击此处访问首页”。
4、必须包含至少一个可访问的链接,确保用户在禁用框架时仍能获取核心内容。











