在 Web 开发的早期岁月里，将浏览器窗口分割成不同的部分是一种非常流行且实用的技术。你是否曾好奇过，那些老式的导航栏网站是如何做到在点击左侧链接时，只有右侧的内容发生变化，而侧边栏却保持静止的？
这就是 HTML 框架 的魔力。虽然现代 Web 开发已经转向了更加灵活和响应式的设计，但了解框架技术不仅有助于我们理解 Web 的历史，也能让我们在维护某些遗留系统时游刃有余。更重要的是，掌握 INLINECODE9e847e71 与传统的 INLINECODE24e25bc3 之间的区别，对于深入理解前端架构至关重要。
在本文中，我们将带你回到过去，深入探讨如何使用 HTML 标签创建框架，从最基本的分割窗口到复杂的布局。我们将一步步讲解代码，分析其工作原理，并探讨为何这项技术逐渐淡出了主流视野，以及你在今天应该如何正确看待它。
什么是 HTML 框架？
简单来说，HTML 框架允许我们将浏览器窗口分割成多个独立的区域（或者叫“子窗口”）。每一个区域都可以加载并显示一个独立的 HTML 文档。这就像是把一个大的画板切割成了几个小格子，每个小格里都可以画不同的画。
实现这一功能的核心在于 INLINECODEf64c6ca0 标签。这与我们通常编写标准 HTML 页面时使用的 INLINECODE92326c5b 标签截然不同。在使用框架集的页面中，INLINECODE3362e76e 标签是被 INLINECODE96b172ce 标签取代的。
框架集的主要组成部分：
- 水平框架： 使用
rows属性定义。它允许我们将窗口按水平方向切割，即上下排列。 - 垂直框架： 使用
cols属性定义。它允许我们将窗口按垂直方向切割，即左右排列。
让我们一步步来完成在 HTML 中创建框架的过程
为了让你直观地理解这个过程，让我们来构建一个典型的框架页面。我们需要创建三个独立的 HTML 文件作为内容填充，然后创建一个主文件来将它们“组装”在一起。
#### 第 1 步：创建独立的 HTML 文件
首先，我们需要准备三个“素材”。这些是普通的 HTML 页面，它们将分别显示在框架的不同区域中。
1. frame1.html
这个文件将作为我们框架的第一个区域。我们给它加了一个标题，方便识别。
Frame 1
欢迎来到框架 1
这里是顶部（或左侧）区域的内容。
2. frame2.html
Frame 2
框架 2
这段内容位于框架 2 中。
3. frame3.html
Frame 3
框架 3
这段内容位于框架 3 中。
#### 第 2 步：创建主 HTML 文件（垂直分栏示例）
现在，让我们创建“总指挥”——INLINECODE92153c28。在这个文件中，我们将使用 INLINECODEf3647c7f 标签来告诉浏览器如何划分地盘，以及使用 标签来指定每个区域显示哪个文件。
在这个例子中，我们将使用 cols 属性创建一个三列布局：第一列占 33%，第二列占 33%，剩下的 34% 给第三列。
垂直分栏框架集示例
<!-- 注意：在使用 frameset 时，不能包含 标签 -->
代码解析：
当浏览器加载这个 INLINECODE28444af1 时，它会看到 INLINECODEfb3a1c8f。这告诉浏览器：“嘿，别给我渲染 body 了，把窗口切成三列，宽度比例是 33:33:34。”
然后，浏览器读取 INLINECODE38867967，并在第一列加载 INLINECODE69fd6ad6 的内容。其他两列同理。
输出效果：
你将看到一个被垂直分割成三部分的窗口，每一部分都展示了我们之前定义的独立页面内容。
#### 第 3 步：切换为水平布局
让我们来尝试另一种布局。如果我们想让页面上下排列，而不是左右排列，该怎么办呢？非常简单，我们只需要将 INLINECODE7c7981cb 属性替换为 INLINECODEc695de41 属性。
修改后的 index.html（水平分栏）：
水平分栏框架集示例
输出效果：
现在，页面变成了上下结构。最上面的 INLINECODEdfbf7630 占据了一半的高度，下面两个 INLINECODEa91164d0 平分了剩下的空间。
进阶实战：嵌套框架集
你可能会问：“如果我想要一个复杂的布局，比如上面一个大块，下面分成左右两块，该怎么办？” 这就需要用到嵌套框架集了。我们可以在 INLINECODE387acc18 中再嵌套另一个 INLINECODEdff02be3。
让我们来看一个更贴近 90 年代末网站风格的实战案例：顶部是通栏的横幅，下面左侧是导航，右侧是主要内容。
4. menu.html (导航文件)
导航菜单
5. main.html (初始内容文件)
主要内容区域
点击左侧链接，这里的内容会发生变化。
6. nested_index.html (嵌套框架主文件)
嵌套框架布局示例
关键点解析：
- INLINECODE6cee5dcd：在 INLINECODEb99aa061 中，我们在 INLINECODE76b8bc6a 标签里使用了 INLINECODE7e7156cf 属性。这是框架技术的核心交互方式。当用户点击“首页”时，浏览器会查找名为 INLINECODE3108faef 的窗口，并在那里打开 INLINECODE03794ec7，而不是在当前的导航栏窗口打开。
- 通配符 INLINECODE3160bd67：在 INLINECODEd444bc8f 中，
*代表“剩余的所有空间”。这是一种非常实用的技巧，不需要手动计算百分比，让布局自动填满窗口。
- 无障碍性与兼容性：你可能会注意到这种布局在某些移动设备上体验极差，这也是它被淘汰的原因之一。
重要属性与最佳实践
在构建这些框架时，除了 INLINECODE2be2b405 和 INLINECODE48f6dbe9，我们还需要了解一些控制框架外观和行为的属性。
#### 1. frameborder 属性
默认情况下，框架之间会有一个立体感的边框。如果你想要一个无缝、干净的平面设计，可以将 INLINECODE52b52c11 设置为 INLINECODE07588824。
#### 2. noresize 属性
通常情况下，用户可以通过拖动框架的边缘来改变各个区域的大小。但在某些设计严谨的布局中（比如固定宽度的侧边栏），我们不希望用户乱动。这时，加上 noresize 属性即可。
#### 3. scrolling 属性
你可以控制框架内是否出现滚动条。
auto：默认值。内容超出时显示滚动条。yes：始终显示滚动条。no：始终不显示滚动条（可能会导致内容被裁剪）。
为什么框架技术（Frameset）过时了？
虽然我们现在使用起来很顺手，但作为一名负责任的开发者，我必须提醒你：INLINECODE18f11a96 和 INLINECODE6c836881 标签在 HTML5 中已经被废弃（Deprecated）了。
让我们看看其中的原因：
- 用户体验问题：用户很难将特定的页面加入书签。如果用户正在浏览 INLINECODE6120e902 中的精彩内容，但 URL 栏显示的永远是 INLINECODEcc5697a0，一旦他们分享这个网址，其他人打开后看到的只是初始页面，而不是那个精彩内容。这被称为“ Bookmarkability 问题”。
- 搜索引擎优化（SEO）灾难：早期的搜索引擎爬虫在处理框架时经常感到困惑，它们可能只索引了外层的
index.html，而完全忽略了里面真正的内容页面。
- 移动端友好性差：在小屏幕手机上分割屏幕空间简直是灾难性的体验。
- 无障碍访问性差：屏幕阅读器在解读框架结构时往往步履维艰。
现代替代方案：Iframe 与 CSS
如果你仍然需要在一个页面中嵌入另一个页面的内容（比如嵌入 YouTube 视频或第三方地图），现代 HTML 推荐使用 (Inline Frame)。
INLINECODEf3b9b196 不同的是，它就像 INLINECODE956e3996 标签一样，是作为文档流的一部分存在于 中的，而不是取代整个页面结构。
Iframe 示例：
这是一个包含 Iframe 的页面
对于复杂的页面布局（如侧边栏+内容区），现代前端开发完全依赖 CSS Flexbox 或 CSS Grid 来实现。这不仅能实现同样的视觉效果，还保证了所有内容都在同一个 DOM 中，极大地利于 SEO 和交互操作。
总结
今天，我们一起深入探索了 HTML 框架的创建过程，从最基础的 INLINECODE8a1467fb 和 INLINECODEa301472c 分割，到嵌套 INLINECODEd0a77b42 的复杂布局，再到 INLINECODE29c9dd25 属性实现的页面联动。这不仅仅是一次技术的回顾，更是一次对 Web 结构演变的理解。
关键要点：
- INLINECODE9663b6fa 替代 INLINECODEb4021b28，负责定义分割结构（行或列）。
-
负责加载具体的 HTML 文件。 - 使用
target属性可以在指定的框架窗口中打开链接。 - 嵌套
可以实现复杂的网格布局。 - 生产环境警告：由于严重破坏用户体验和 SEO，请避免在新的项目中使用
标签。
虽然 INLINECODE17cc21d8 已经成为了历史，但理解它的工作原理能让你在面对老旧代码库时不再恐慌，同时也让你更加珍惜现代 CSS 布局带来的灵活性。既然我们掌握了这项技术，下一次当你需要嵌入第三方内容时，不妨考虑使用现代的 INLINECODE249e58d9；而在设计页面布局时，请自信地选择 CSS Grid 或 Flexbox 吧。
希望这篇文章能帮助你建立起对 HTML 框架的完整认知！如果你正在维护旧项目，尝试根据上面的步骤去修改一下你的框架结构，看看会发生什么变化吧。