0

0

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

星降

星降

发布时间:2025-08-02 15:03:01

|

239人浏览过

|

来源于php中文网

原创

现代网页开发不再使用html框架集(frameset)是因为它存在用户体验差、seo不友好、无障碍性弱、安全性低和维护困难等问题,1. 用户体验方面,多个滚动条和书签无法定位具体框架内容导致操作混乱;2. 搜索引擎难以索引分散在不同frame中的内容,影响网站排名;3. 屏幕阅读器对frameset结构支持差,不利于残障用户访问;4. 存在点击劫持等安全风险;5. 需要管理多个html文件,增加开发和调试复杂度。取而代之的现代替代方案是使用css的flexbox或grid布局来实现页面区域划分,既能灵活控制布局又利于seo和可访问性;对于嵌入外部内容的需求,可使用

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

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

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

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

解决方案

要用

frameset
,你得在HTML文件的根部,也就是
标签里,直接用它替换掉
。这本身就挺特别的,因为它改变了页面内容的传统承载方式。然后,你可以在
frameset
里定义行或列,用
rows
cols
属性来指定每个区域的大小比例,比如
cols="25%,75%"
就是左边25%,右边75%。每个被切分出来的区域,你都需要用一个
frame
标签来指定它要加载哪个HTML文件,通过
src
属性来指向文件路径,
name
属性则可以给这个框架起个名字,方便其他框架里的链接通过
target
属性来控制内容显示到这个特定的框架里。

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

立即学习前端免费学习笔记(深入)”;

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



我的框架集页面


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

这里,

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

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

为什么我们现在很少见到

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

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

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

Moshi Chat
Moshi Chat

法国AI实验室Kyutai推出的端到端实时多模态AI语音模型,具备听、说、看的能力,不仅可以实时收听,还能进行自然对话。

下载

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

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

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



欢迎来到主内容区

这里是页面的主要内容。

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

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