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

风之吻网站开发 2025-08-02 99

HTML中的框架集怎么使用？ frameset标签应用实例-第1张图片-风享汇

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

frameset

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

　　解决方案

　　要用

frameset

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

<html>

　　标签里，直接用它替换掉

<body>

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

frameset

　　里定义行或列，用

rows

　　或

cols

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

cols="25%,75%"

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

frame

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

src

　　属性来指向文件路径，

name

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

target

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

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

<html>

<title>我的框架集页面</title>


<noframes>
    <body>
      <p>您的浏览器不支持框架集。请升级您的浏览器。</p>
      <p>或者您可以访问 <a href="navigation.html">导航</a> 和 <a href="content.html">内容</a>。</p>
    </body>
<noframes>

　　这里，

navigation.html

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

content.html

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

navigation.html

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

main_frame

　　里，它会是这样：

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

　　。另外，

noframes

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

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

　　为什么我们现在很少见到

frameset

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

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

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

　　那如果我真的需要把页面分成几个区域，或者想在页面里嵌入点什么，现在该怎么做呢？首先，如果你只是想把一个页面布局成几块，比如左边导航右边内容，或者上下两部分，那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视频、地图或者其他网站的组件，那