异常教程

HTML <frameset> 标签（长文讲解）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言

在网页开发的历史长河中，<frameset> 标签曾是一个备受关注的布局工具。它允许开发者将浏览器窗口划分为多个独立的框架区域，每个区域可以独立加载和显示不同的网页内容。尽管现代前端技术已转向更灵活的布局方案（如 CSS Grid 和 Flexbox），但理解 <frameset> 的原理和使用场景，仍能帮助开发者深入理解网页布局的演变逻辑。本文将从基础语法、实际案例到替代方案，系统性地讲解这一标签的用法，并结合编程初学者容易理解的比喻，逐步展开技术细节。

一、什么是 <frameset> 标签？

1.1 核心概念

<frameset> 是 HTML 中用于定义框架集（Frameset）的标签。通过它，开发者可以将浏览器窗口划分为多个矩形区域（称为框架），每个框架独立加载网页内容。例如，左侧框架显示导航菜单，右侧框架显示具体内容，这种布局在早期网页中非常常见。

形象比喻：
可以将 <frameset> 想象为一个“相框组合”，每个框架是相框中的独立画布，而 <frameset> 负责定义这些画布的尺寸和排列方式。

1.2 标签特性

  • cols：定义水平分割的列宽。例如 cols="20%, 80%" 表示将窗口分为左右两列，宽度分别为 20% 和 80%。
  • rows：定义垂直分割的行高。例如 rows="300px, *" 表示第一行固定 300 像素高，第二行占据剩余空间。
  • frameborder：设置框架边框是否可见（0 表示隐藏，默认为 1）。

代码示例：

<frameset cols="20%, 80%" frameborder="0">
  <frame src="navigation.html" />
  <frame src="content.html" />
</frameset>

二、如何构建基础框架布局

2.1 基本语法结构

使用 <frameset> 标签时，需注意以下规则：

  1. 必须将 <frameset> 作为 <html> 标签的直接子元素，且页面中不能同时存在 <body> 标签。
  2. 每个 <frameset> 可以嵌套子 <frameset>，实现多级分隔。

示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>基础框架布局</title>
</head>
<frameset cols="200, *">
  <frame src="left_frame.html" name="left" />
  <frame src="right_frame.html" name="right" />
</frameset>
</html>

2.2 嵌套框架的实现

通过嵌套 <frameset>，可以创建复杂的多区域布局。例如，将窗口分为左、中、右三列，其中中间列再分为上下两行：

<frameset cols="200px, *, 200px">
  <frame src="left.html" />
  <frameset rows="30%, 70%">
    <frame src="top_middle.html" />
    <frame src="bottom_middle.html" />
  </frameset>
  <frame src="right.html" />
</frameset>

三、关键属性与参数详解

3.1 列与行的尺寸定义

3.1.1 百分比（%）与像素（px）

  • 百分比：根据浏览器窗口的实时尺寸动态调整，适合响应式布局。
  • 像素：固定尺寸，但可能在不同设备上导致布局错位。
  • 星号（*）：表示分配剩余空间，例如 cols="*, 200px" 会让第一列占据除 200px 外的所有宽度。

3.1.2 复合尺寸示例

<!-- 水平分三列：第一列固定200px，第二列占剩余空间的50%，第三列占剩余的50% -->
<frameset cols="200px, 50%, *">
  ...
</frameset>

3.2 <frame> 标签的常用属性

  • src：指定框架加载的网页路径。
  • name：为框架命名，便于通过链接跳转到指定框架。例如： 
    <a href="new_content.html" target="right">跳转到右侧框架</a>

四、实际案例：构建导航与内容分离的页面

4.1 场景描述

假设需要设计一个网站，左侧是固定导航栏，右侧是动态内容区。通过 <frameset> 可以轻松实现这一布局。

4.2 完整代码示例

<!DOCTYPE html>
<html>
<head>
  <title>导航与内容分离</title>
</head>
<frameset cols="200, *">
  <!-- 左侧导航栏 -->
  <frame src="navigation.html" name="nav_frame" />
  
  <!-- 右侧内容区域 -->
  <frame src="default_content.html" name="main_frame" />
</frameset>
</html>

4.3 导航页面（navigation.html）示例

<!DOCTYPE html>
<html>
<body>
  <a href="page1.html" target="main_frame">页面1</a><br>
  <a href="page2.html" target="main_frame">页面2</a>
</body>
</html>

五、注意事项与常见问题

5.1 兼容性与现代浏览器支持

虽然 <frameset> 在 HTML4 中被广泛支持，但在 HTML5 标准中已被弃用。主流浏览器（如 Chrome、Firefox）仍能解析该标签，但推荐使用 CSS 布局替代，以避免以下问题：

  • 框架间交互复杂，调试困难。
  • SEO 不友好，搜索引擎可能无法正确索引框架内容。
  • 响应式设计支持不足。

5.2 避免的错误用法

  • 混合使用 <frameset> 和 <body>：会导致浏览器忽略其中一个部分。
  • 未命名框架导致链接跳转失败：若未指定 name 属性，target 可能无法正确定位目标框架。

六、替代方案：现代布局技术对比

6.1 CSS Flexbox

通过 display: flex 可以实现类似框架的布局，且更具灵活性：

<div class="container">
  <div class="sidebar">导航内容</div>
  <div class="content">主内容</div>
</div>

.container {
  display: flex;
}
.sidebar {
  width: 200px;
}
.content {
  flex: 1;
}

6.2 CSS Grid

提供更复杂的二维布局能力：

.layout {
  display: grid;
  grid-template-columns: 200px 1fr;
}

结论

尽管 <frameset> 标签在现代网页开发中已逐渐被替代，但其核心思想——通过分区域管理内容，仍值得开发者深入理解。本文通过语法解析、代码示例和实际案例，帮助读者掌握 <frameset> 的使用逻辑，并结合当前技术趋势，引导读者转向更高效、灵活的布局方案。无论是为了历史知识的补充，还是特定场景的兼容性需求，掌握这一标签的原理都将为你的开发技能锦上添花。

最后提醒：在实际项目中，建议优先使用 CSS Flexbox 或 Grid 布局，以确保代码的可维护性和兼容性。

最新发布

查看更多文章