HTML中的框架集怎么使用？ frameset标签应用实例-html教程-PHP中文网

HTML中的框架集怎么使用？ frameset标签应用实例

星降

发布： 2025-08-02 15:03:01

原创

222人浏览过

现代网页开发不再使用html框架集（frameset）是因为它存在用户体验差、seo不友好、无障碍性弱、安全性低和维护困难等问题，1. 用户体验方面，多个滚动条和书签无法定位具体框架内容导致操作混乱；2. 搜索引擎难以索引分散在不同frame中的内容，影响网站排名；3. 屏幕阅读器对frameset结构支持差，不利于残障用户访问；4. 存在点击劫持等安全风险；5. 需要管理多个html文件，增加开发和调试复杂度。取而代之的现代替代方案是使用css的flexbox或grid布局来实现页面区域划分，既能灵活控制布局又利于seo和可访问性；对于嵌入外部内容的需求，可使用<iframe>标签，适用于加载第三方支付、地图、视频等独立组件，因其提供沙盒隔离保障安全；但不应使用<iframe>进行主页面布局，以免造成性能下降和结构混乱。因此，在实际项目中应优先采用css布局或前端框架构建页面，仅在必要时使用<iframe>嵌入不可控的外部内容，从而确保网站的性能、安全与可维护性。

HTML中的框架集怎么使用？ frameset标签应用实例

HTML中的框架集，也就是那个

frameset

登录后复制

标签，它过去是用来把一个浏览器窗口切分成好几个独立区域的，每个区域都能加载一个不同的HTML页面。想象一下，就像在同一个浏览器里同时打开了好几扇窗户。不过说实话，现在你基本不会在新的项目里看到它了，因为它已经是个“老古董”了，在现代网页开发中几乎被完全淘汰了。

解决方案

要用

frameset

登录后复制

，你得在HTML文件的根部，也就是

<html>

登录后复制

标签里，直接用它替换掉

<body>

登录后复制

。这本身就挺特别的，因为它改变了页面内容的传统承载方式。然后，你可以在

frameset

登录后复制

里定义行或列，用

rows

登录后复制

或

cols

登录后复制

属性来指定每个区域的大小比例，比如

cols="25%,75%"

登录后复制

就是左边25%，右边75%。每个被切分出来的区域，你都需要用一个

frame

登录后复制

标签来指定它要加载哪个HTML文件，通过

src

登录后复制

属性来指向文件路径，

name

登录后复制

属性则可以给这个框架起个名字，方便其他框架里的链接通过

target

登录后复制

属性来控制内容显示到这个特定的框架里。

举个例子，一个简单的两列框架集看起来会是这样：

立即学习“前端免费学习笔记（深入）”；

<!DOCTYPE html>
<html>
<head>
<title>我的框架集页面</title>
</head>
<frameset cols="20%, 80%">
  <frame src="navigation.html" name="nav_frame">
  <frame src="content.html" name="main_frame">
  <noframes>
    <body>
      <p>您的浏览器不支持框架集。请升级您的浏览器。</p>
      <p>或者您可以访问 <a href="navigation.html">导航</a> 和 <a href="content.html">内容</a>。</p>
    </body>
  </noframes>
</frameset>
</html>

登录后复制

这里，

navigation.html

登录后复制

会显示在左侧20%宽度的区域，而

content.html

登录后复制

则在右侧80%的区域。如果

navigation.html

登录后复制

里有一个链接想让内容显示在

main_frame

登录后复制

里，它会是这样：

<a href="newpage.html" target="main_frame">加载新内容</a>

登录后复制

。另外，

noframes

登录后复制

标签是为了那些不支持框架集的浏览器或者为了更好的可访问性而准备的，它里面的内容会在不支持框架集时显示出来。

为什么现代网页开发不再使用HTML框架集？

为什么我们现在很少见到

frameset

登录后复制

的身影了？这事儿得从好几个角度看。最直接的感受就是用户体验。你想想，一个页面里好几个独立滚动条，来回切换内容，点个返回键可能都不知道返回到哪个“层”了。书签也麻烦，你收藏的是整个框架集，而不是某个特定框架里的内容，下次打开可能还是最初状态。这在移动设备上更是灾难，屏幕那么小，再切分几个区域，简直没法用。

从技术层面讲，SEO是个大问题。搜索引擎蜘蛛过来爬取内容时，面对框架集就有点懵了，它很难理解这些分散在不同文件里的内容到底有什么关联，哪些是核心。这就导致你的内容很难被有效索引，自然就影响了网站的排名。再者，无障碍性也差，屏幕阅读器对这种结构的处理能力很弱，对残障人士很不友好。还有安全问题，比如点击劫持（clickjacking），攻击者可以利用框架集把恶意页面覆盖在你的页面上，诱导用户点击。维护起来也复杂，你得管理多个独立的HTML文件，它们之间还有联动关系，调试起来头疼。这些缺点累积起来，就让它逐渐退出了历史舞台。

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

查看详情

如果必须使用类似框架的功能，有哪些现代替代方案？

那如果我真的需要把页面分成几个区域，或者想在页面里嵌入点什么，现在该怎么做呢？首先，如果你只是想把一个页面布局成几块，比如左边导航右边内容，或者上下两部分，那CSS才是王道。Flexbox和Grid布局简直是为这种需求量身定制的，它们能让你非常灵活地控制元素的排列和尺寸，而且完全在一个文档流里，对SEO和无障碍性都非常友好。

比如，一个简单的两列布局，用CSS Flexbox可以这样实现：

<style>
  .container {
    display: flex;
    height: 100vh; /* 让容器占据整个视口高度 */
  }
  .nav {
    flex: 0 0 200px; /* 固定宽度导航 */
    background-color: #f0f0f0;
    padding: 15px;
  }
  .content {
    flex-grow: 1; /* 内容区域占据剩余空间 */
    padding: 15px;
  }
</style>

<div class="container">
  <div class="nav">
    <!-- 导航内容 -->
    <ul>
      <li><a href="#">链接1</a></li>
      <li><a href="#">链接2</a></li>
    </ul>
  </div>
  <div class="content">
    <!-- 主内容 -->
    <h1>欢迎来到主内容区</h1>
    <p>这里是页面的主要内容。</p>
  </div>
</div>

登录后复制

这种方式，所有的内容都在一个HTML文件里，管理和维护都方便得多。

如果说要嵌入外部内容，比如YouTube视频、地图或者其他网站的组件，那