HTML 框架frameset用于将浏览器窗口分为多个部分，每个部分可以加载单独的 HTML 文档。浏览器窗口中的框架集合称为框架集。窗口被分成框架，其方式与表格的组织方式类似:分为行和列。

框架的缺点

使用框架几乎没有缺点，但是以下情况不适合在网页中使用框架 -

  • 一些较小的设备无法经常处理框架，因为它们的屏幕不够大，无法分割。

  • 有时，由于屏幕分辨率不同，您的页面在不同计算机上的显示也会有所不同。

  • 浏览器的后退按钮可能会没有按照用户希望的那样工作。

  • 仍然有少数浏览器不支持框架技术。

创建框架

要在页面上使用框架，我们使用 <frameset> 标记而不是 <body> 标记。 <frameset> 标签定义如何将窗口划分为帧。 <frameset> 标签的 rows 属性定义水平框架，cols 属性定义垂直框架。每个框架由 <frame> 标签指示，它定义哪个 HTML 文档应在框架中打开。

注意 - HTML5 中不推荐使用 <frame> 标签。

示例

以下是创建三个水平框架的示例 -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Frames</title>
   </head>
	
   <frameset rows = "10%,80%,10%">
      <frame name = "top" src = "/" />
      <frame name = "main" src = "/" />
      <frame name = "bottom" src = "/" />
   
      <noframes>
         <body>您的浏览器不支持框架</body>
      </noframes>
      
   </frameset>
   
</html>

测试一下

示例

让我们修改上面的例子，这里我们用 cols 替换 rows 属性并更改它们的宽度。这将垂直创建所有三个框架 -

<!DOCTYPE html>
<html>
   
   <head>
      <title>HTML Frames</title>
   </head>
   
   <frameset cols = "25%,50%,25%">
      <frame name = "left" src = "/.htm" />
      <frame name = "center" src = "/.htm" />
      <frame name = "right" src = "/.htm" />
      
      <noframes>
          <body>您的浏览器不支持框架</body>
      </noframes>
   </frameset>
   
</html>

测试一下

<frameset> 标签属性

以下是<frameset> 标签重要属性 -

序号属性和描述
1

cols

指定框架集中包含多少列以及每列的大小。您可以通过四种方式之一指定每列的宽度 -

单位为像素px。例如，要创建三个垂直框架，请使用 cols = "100, 500, 100"。

浏览器窗口的百分比。例如，要创建三个垂直框架，请使用cols = "10%, 80%, 10%"。

使用通配符。例如，要创建三个垂直框架，请使用cols = "10%, *, 10%"。在这种情况下，通配符占据窗口的剩余部分。

作为浏览器窗口的相对宽度。例如，要创建三个垂直框架，请使用cols = "3*, 2*, 1*"。这是百分比的替代方案。您可以使用浏览器窗口的相对宽度。这里，窗口被分成六等分:第一列占据窗口的一半，第二列占据三分之一，第三列占据六分之一。

2

rows

此属性的工作方式与 cols 属性类似，并且采用相同的值，但它是用于指定框架集中的行。例如，要创建两个水平框架，请使用rows = "10%, 90%"。您可以按照上面对列的说明相同的方式指定每行的高度。

3

border

此属性指定每个框架的边框宽度（以像素为单位）。例如，border="5"。值为零表示没有边框。

4

frameborder

该属性指定框架之间是否应显示三维边框。该属性的值为 1（是）或 0（否）。例如，frameborder = "0" 指定无边框。

5

framespacing

此属性指定框架集中框架之间的空间量。这可以采用任何整数值。例如，framespacing = "10" 表示每帧之间应有 10 个像素的间距。

<frame> 标记属性

以下是 <frame> 标签的重要属性 -

序号属性和说明
1

src

该属性用于给出应在框架中加载的文件名。它的值可以是任何 URL。例如，src = "/html/top_frame.htm" 将加载 html 目录中可用的 HTML 文件。

2

name

此属性允许您为框架指定名称。它用于指示文档应该加载到哪个框架中。当您想要在一个框架中创建将页面加载到另一个框架中的链接时，这一点尤其重要，在这种情况下，第二个框架需要一个名称来将自己标识为链接的目标。

3

frameborder

该属性指定是否显示该框架的边框；它会覆盖 <frameset> 标记上的frameborder属性中给定的值（如果给定），并且该值可以为1（是）或0（否）。

4

marginwidth

该属性允许您指定框架左右边框与框架内容之间的空间宽度。该值单位为像素px。例如 marginwidth = "10"。

5

marginheight

此属性允许您指定框架边框及其内容的顶部和底部之间的空间高度。该值单位为像素px。例如 marginheight = "10"。

6

noresize

默认情况下，您可以通过单击并拖动框架的边框来调整任何框架的大小。 noresize 属性阻止用户调整框架大小。例如 noresize = "noresize"。

7

scrolling

此属性控制框架上出现的滚动条的外观。该值可以是"yes"、"no"或"auto"。例如，scrolling = "no" 表示不应有滚动条。

8

longdesc

此属性允许您提供指向另一个包含框架内容的详细描述的页面的链接。例如 longdesc = "framedescription.htm"

浏览器对框架的支持

如果用户使用任何旧版本浏览器或任何不支持框架的浏览器，则应向用户显示 <noframes> 元素。

因此，您必须在 <noframes> 元素内放置 <body> 元素，因为 <frameset> 元素应该替换 <body> 元素，但如果浏览器不理解 <frameset> 元素，那么它应该理解 <body> 元素中包含的内容，该元素包含在 <noframes> 元素中。

您可以为使用旧浏览器的用户添加一些不错的消息。例如，对不起！您的浏览器不支持框架。如上例所示。

框架的name和target属性

框架最流行的用途之一是放置导航栏在一个框架中，然后将主页加载到一个单独的框架中。

让我们看看下面的示例，其中 test.htm 文件具有以下代码 -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Target Frames</title>
   </head>
	
   <frameset cols = "200, *">
      <frame src = "/html/menu.htm" name = "menu_page" />
      <frame src = "/html/main.htm" name = "main_page" />
      
      <noframes>
         <body>您的浏览器不支持框架.</body>
      </noframes>
   </frameset>
	
</html>

测试一下

在这里，我们创建了两列来填充两个框架。第一个框架宽 200 像素，包含由 menu.htm 文件实现的导航菜单栏。第二列填充剩余空间，并将包含页面的主要部分，它由 main.htm 文件实现。对于菜单栏中可用的所有三个链接，我们都将目标框架称为 main_page，因此每当您单击菜单栏中的任何链接时，可用链接都会在主页中打开。

以下是内容menu.htm 文件

<!DOCTYPE html>
<html>

   <body bgcolor = "#4a7d49">
      <a href = "http://www.baidu.com" target = "main_page">百度</a>
      <br />
      <br />
      
      <a href = "http://www.taobao.com" target = "main_page">淘宝</a>
      <br />
      <br />
      
      <a href = "http://qq.com" target = "main_page">QQ</a>
   </body>
	
</html>

测试一下

以下是 main.htm 文件的内容 -

<!DOCTYPE html>
<html>

   <body bgcolor = "#b5dcb3">
           <h3>这是主页，任何链接的内容都将显示在此处。</h3>
       <p>现在点击任意链接即可查看结果。</p>
   </body>
	
</html>

测试一下

当我们加载test.htm文件时，它会产生以下结果 -

HTML frameset

现在您可以尝试单击左侧面板中的可用链接并查看结果。 targetattribute 还可以采用以下值之一 -

序号选项和说明
1

_self

将页面加载到当前框架中。

2

_blank

将页面加载到新的浏览器窗口中。打开新窗口。

3

_parent

将页面加载到父窗口中，在单个框架集的情况下，父窗口是主浏览器窗口。

4

_top

将页面加载到浏览器窗口中，替换任何当前帧。

5

targetframe

将页面加载到一个命名的目标框架。