异常教程

HTML <frame> 标签（手把手讲解）

更新时间:

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

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 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+ 小伙伴加入学习 ，欢迎点击围观

前言：理解框架标签的核心作用

在网页开发的早期阶段，框架（Frame）技术曾是实现多区域页面布局的重要工具。HTML 标签允许开发者将浏览器窗口分割为多个独立的区域，每个区域可以独立加载不同的网页内容。尽管现代开发更倾向于使用CSS Flexbox或Grid布局，但理解标签的原理仍能帮助开发者深入理解浏览器渲染机制，并在特定场景下灵活应用。

本篇文章将通过循序渐进的方式，从历史背景、语法结构、使用案例到技术局限性等维度展开讲解。通过形象的比喻和实际代码示例，帮助读者全面掌握这一经典布局技术。

一、框架标签的前世今生

1.1 从相框到网页框架的类比

想象你走进一个艺术画廊，每个画框（Frame）独立展示不同的画作，但整体又构成完整的展览空间——这正是标签的核心设计理念。它允许开发者将浏览器窗口划分为多个独立显示区域，每个区域（称为"frame"）可独立加载不同网页内容，同时保持整体页面的统一性。

1.2 技术演进历程

  • 1997年：HTML 4.0正式引入标签系统
  • 2000年代：因布局灵活性成为主流布局方案
  • 2010年后：随着CSS3的普及逐渐被取代
  • HTML5：明确将标记为废弃（Deprecated）

这一演变过程反映了浏览器技术从静态布局向动态响应式设计的转型。

二、语法结构与核心标签解析

2.1 基础语法框架

使用框架布局需要三个核心标签协同工作：

<frameset>
  <frame>
  <noframes>
</frameset>

表格1：核心标签功能对照表

标签功能描述必需性
<frameset>定义框架集合容器必须
<frame>定义单个框架区域必须
<noframes>为不支持框架的浏览器提供替代内容可选

2.2 案例：三栏式布局实现

<!DOCTYPE html>
<html>
<head>
  <title>框架布局案例</title>
</head>
<frameset cols="20%, 60%, 20%">
  <frame src="sidebar.html" name="left" />
  <frame src="main.html" name="center" />
  <frame src="ads.html" name="right" />
</frameset>
<noframes>
  <p>您的浏览器不支持框架，请升级浏览器或访问 <a href="/">标准版</a></p>
</noframes>
</html>

此案例中：

  • cols属性将窗口水平分割为三列
  • 每个<frame>通过src指定内容来源
  • name属性为后续跨框架通信做准备

2.3 关键属性详解

2.3.1 <frameset>属性

属性说明示例值
cols按列分割窗口，值可为百分比或像素"200px, *"
rows按行分割窗口"15%, 85%"
framespacing框架边框间距（已废弃）"5"

2.3.2 <frame>属性

属性说明示例值
src需要加载的页面路径"content.html"
name用于跨框架跳转的目标标识"menu_frame"
noresize禁止用户调整框架尺寸（默认可调整）"noresize"

三、实际应用场景解析

3.1 传统应用场景

  1. 管理后台布局：左侧菜单栏 + 中心内容区
  2. 多文档协同编辑：左侧目录树 + 右侧内容编辑器
  3. 在线文档阅读：左侧目录导航 + 右侧章节内容

3.2 典型案例：登录界面框架设计

<frameset rows="150,*">
  <frame src="header.html" name="header_frame" />
  <frameset cols="25%,75%">
    <frame src="login_form.html" name="login_frame" />
    <frame src="welcome_message.html" name="content_frame" />
  </frameset>
</frameset>

此布局实现：

  • 顶部固定高度的导航栏
  • 底部区域水平分割为登录表单与内容展示区
  • 通过嵌套实现多级布局

四、框架技术的优缺点分析

4.1 技术优势

  • 内容独立性：各框架内容可独立更新
  • 资源复用：导航栏等公共内容无需重复加载
  • 浏览器兼容：早期浏览器普遍支持

4.2 显著缺陷

  1. SEO不友好：搜索引擎难以正确抓取内容
  2. 用户体验问题：
    • 框架间跳转易导致导航栏丢失
    • 框架尺寸调整可能破坏布局
  3. 安全性风险：跨框架脚本攻击（XSS）隐患

4.3 与iframe的区别

对比维度标签