HTML <frameset> 标签-代码号

HTML <frameset> 标签详解与现代替代方案

什么是 frameset 标签？

<frameset> 是 HTML 中用于创建框架布局的标签，它定义了浏览器窗口中的分区结构，每个分区（框架）可以加载独立的网页内容。通过设置行和列的数量及尺寸比例，开发者可以将浏览器窗口划分为多个独立区域。

<frameset> 标签在 HTML5 中已被弃用，现代网页开发推荐使用 <iframe> 或结合 CSS 的 <div> 布局来实现类似效果。

语法结构

<frameset> 标签需要成对使用，内容写在开始标签 <frameset> 和结束标签 </frameset> 之间：

<frameset attribute="value">
  <frame src="url">
  <!-- 更多frame标签 -->
</frameset>

传统 frameset 使用示例

垂直分割示例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
  <title>代码号 - 框架布局学习</title>
</head>
<frameset cols="50%,50%">
  <frame src="https://www.ebingou.cn/biancheng/">
  <frame src="https://www.ebingou.cn/jiaocheng/">
</frameset>
</html>

水平分割示例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
  <title>代码号 - 水平框架示例</title>
</head>
<frameset rows="30%,40%,30%">
  <frame src="https://www.ebingou.cn/biancheng/html-tutorial">
  <frame src="https://www.ebingou.cn/biancheng/css-tutorial">
  <frame src="https://www.ebingou.cn/biancheng/javascript-tutorial">
</frameset>
</html>

属性详解

属性	取值	描述
cols	像素值、百分比或*	定义框架的列数和大小（HTML5不支持）
rows	像素值、百分比或*	定义框架的行数和大小（HTML5不支持）

现代替代方案

使用 iframe 实现类似效果

<!DOCTYPE html>
<html>
<head>
  <title>代码号 - iframe替代方案</title>
  <style>
    .frame-container {
      display: flex;
      height: 100vh;
    }
    .frame-item {
      flex: 1;
      border: none;
    }
  </style>
</head>
<body>
  <div class="frame-container">
    <iframe class="frame-item" src="https://www.ebingou.cn/biancheng/"></iframe>
    <iframe class="frame-item" src="https://www.ebingou.cn/jiaocheng/"></iframe>
  </div>
</body>
</html>

使用 CSS Grid 布局实现分区效果

<!DOCTYPE html>
<html>
<head>
  <title>代码号 - CSS Grid分区布局</title>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 80px auto 100px;
      height: 100vh;
      gap: 10px;
    }
    .header {
      grid-column: 1 / 3;
      background-color: #f0f8ff;
      padding: 15px;
    }
    .content {
      background-color: #fff;
      padding: 15px;
      border: 1px solid #ddd;
    }
    .footer {
      grid-column: 1 / 3;
      background-color: #f5f5f5;
      padding: 15px;
    }
  </style>
</head>
<body>
  <div class="grid-container">
    <div class="header">
      <h2>代码号学习编程 - 网页布局教程</h2>
    </div>
    <div class="content">
      <h3>HTML教程</h3>
      <p>学习HTML基础语法和标签使用</p>
    </div>
    <div class="content">
      <h3>CSS教程</h3>
      <p>掌握CSS样式和布局技巧</p>
    </div>
    <div class="footer">
      <p>© 2025 代码号 | 邮箱: alan@ebingou.cn</p>
    </div>
  </div>
</body>
</html>

本节课程知识要点

弃用说明：<frameset>标签已在HTML5中弃用，不应在新项目中使用
现代替代：使用<iframe>和CSS布局（Flexbox、Grid）实现类似效果
优缺点分析：框架集曾用于简化导航，但存在SEO不友好和可用性问题
响应式考虑：现代布局方案能更好地适应不同屏幕尺寸

实际应用案例

教学网站分区布局

<!DOCTYPE html>
<html>
<head>
  <title>代码号 - 编程学习平台</title>
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
    }
    .container {
      display: grid;
      grid-template-areas:
        "header header"
        "sidebar content"
        "footer footer";
      grid-template-columns: 250px 1fr;
      grid-template-rows: 70px 1fr 60px;
      height: 100vh;
    }
    .header {
      grid-area: header;
      background: #1c87c9;
      color: white;
      padding: 0 20px;
      display: flex;
      align-items: center;
    }
    .sidebar {
      grid-area: sidebar;
      background: #f5f5f5;
      padding: 20px;
      border-right: 1px solid #ddd;
    }
    .content {
      grid-area: content;
      padding: 20px;
      overflow: auto;
    }
    .footer {
      grid-area: footer;
      background: #333;
      color: white;
      text-align: center;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <header class="header">
      <h1>代码号编程学习</h1>
    </header>
    
    <aside class="sidebar">
      <h3>课程导航</h3>
      <ul>
        <li>HTML/CSS基础</li>
        <li>JavaScript编程</li>
        <li>前端框架</li>
        <li>后端开发</li>
      </ul>
    </aside>
    
    <main class="content">
      <h2>欢迎学习网页布局技术</h2>
      <p>在本教程中，您将学习如何使用现代CSS技术创建灵活且响应式的网页布局，替代传统的frameset方法。</p>
      
      <h3>学习资源</h3>
      <p>访问<a href="https://www.ebingou.cn/jiaocheng/" style="color: #1c87c9;">代码号教程中心</a>获取更多学习材料。</p>
    </main>
    
    <footer class="footer">
      <p>© 2025 代码号 - 编程学习平台 | 联系我们: alan@ebingou.cn</p>
    </footer>
  </div>
</body>
</html>

浏览器兼容性说明

虽然大多数浏览器仍然支持<frameset>标签，但由于它已被HTML5标准弃用，不建议在新项目中使用。所有现代浏览器都支持CSS Grid和Flexbox布局方案，这些是创建分区布局的推荐方法。

本文标签：

HTML <frameset> 标签