本文深入解析了HTML框架集（frameset）的使用及其在现代网页开发中被淘汰的原因。传统frameset因其用户体验差、SEO不友好、无障碍性弱、安全性低以及维护困难等问题，已逐渐被现代技术所取代。文章详细阐述了frameset的语法和用法，并通过实例展示了如何使用`

这里，navigation.html会显示在左侧20%宽度的区域，而content.html则在右侧80%的区域。如果navigation.html里有一个链接想让内容显示在main_frame里，它会是这样：加载新内容。另外，noframes标签是为了那些不支持框架集的浏览器或者为了更好的可访问性而准备的，它里面的内容会在不支持框架集时显示出来。

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

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

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

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

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

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

  

    
    

      
链接1
      
链接2
    
  
  

    
    
欢迎来到主内容区
    
这里是页面的主要内容。
  

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

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