HTML - 框架

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

<frame> 标签不再推荐使用，因为它不受 HTML5 支持。与其使用此标签，不如使用 <iframe> 或结合 CSS 使用 <div> 来实现类似的效果。

语法

<frameset rows="50%,50%">
   <frame name="top" src="link/to/frame1" />
   <frame name="bottom" src="link/to/frame2" />
</frameset>

其中 frameset 的 rows 属性定义了窗口划分成水平部分的方式。在本例中，窗口被分成两行，每行占据可用高度的 50%。

HTML 框架示例

以下是一些示例代码，说明如何在 HTML 中操作框架。

在 HTML 中创建框架

要在页面上创建框架，我们使用 <frameset> 标签代替 <body> 标签。 <frameset> 标签定义如何将窗口分成框架。<frameset> 标签的 rows 属性定义水平框架，cols 属性定义垂直框架。每个框架都由 <frame> 标签指示，它定义哪个 HTML 文档应在框架中打开。

以下是创建三个水平框架的示例。如果您的浏览器不支持框架，则会显示 body 元素。

<!DOCTYPE html>
<html>
<head>
   <title>HTML Frames</title>
</head>
<frameset rows="10%,80%,10%">
   <frame name="top" src="/html/top_frame.htm" />
   <frame name="main" src="/html/main_frame.htm" />
   <frame name="bottom" src="/html/bottom_frame.htm" />
   <noframes>
      <body>
         Your browser does not support frames.
      </body>
   </noframes>
</frameset>
</html>

创建垂直框架

这里我们将 rows 属性替换为 cols 并更改了它们的宽度。这将垂直创建所有三个框架。

<!DOCTYPE html>
<html>
<head>
   <title>HTML Frames</title>
</head>
<frameset cols="25%,50%,25%">
   <frame name="left" src="/html/top_frame.htm" />
   <frame name="center" src="/html/main_frame.htm" />
   <frame name="right" src="/html/bottom_frame.htm" />
   <noframes>
      <body>
         Your browser does not support frames.
      </body>
   </noframes>
</frameset>
</html>

框架的 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>
   Your browser does not support frames.
</body>
   </noframes>
</frameset>
</html>

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

以下是 **menu.htm** 文件的内容

<!DOCTYPE html>
<html>
<body bgcolor="#4a7d49">
   <a href="https://www.google.com" target="main_page">
      Google
   </a>
   <br /><br />
   <a href="https://www.microsoft.com" target="main_page">
      Microsoft
   </a>
   <br /><br />
   <a href="https://news.bbc.co.uk" target="main_page">
      BBC News
   </a>
</body>
</html>

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

<!DOCTYPE html>
<html>
<body bgcolor="#b5dcb3">
   <h3>
      This is main page and content from any link 
      will be displayed here.
   </h3>
   <p>
      So now click any link and see the result.
   </p>
</body>
</html>

frameset 标签的属性

以下列出的属性被 frameset 标签接受。

属性	描述
cols	指定 frameset 中包含多少列以及每列的大小。您可以通过四种方式之一指定每列的宽度。以像素为单位的绝对值。例如，要创建三个垂直框架，请使用 cols="100, 500,100"。浏览器窗口的百分比。例如，要创建三个垂直框架，请使用 cols="10%, 80%,10%"。使用通配符。例如，要创建三个垂直框架，请使用 cols="10%, ,10%"。在这种情况下，通配符占据窗口的剩余部分。作为浏览器窗口的相对宽度。例如，要创建三个垂直框架，请使用 cols="3,2,1"。这是百分比的替代方法。您可以使用浏览器窗口的相对宽度。这里窗口被分成六分之一：第一列占据窗口的一半，第二列占据三分之一，第三列占据六分之一。
rows	此属性的工作方式与 cols 属性相同，并采用相同的值，但它用于指定 frameset 中的行。例如，要创建两个水平框架，请使用 rows="10%, 90%"。您可以像上面对列解释的那样指定每行的高度。
border	此属性以像素为单位指定每个框架边框的宽度。例如 border="5"。值为零表示没有边框。
frameborder	此属性指定是否应在框架之间显示三维边框。此属性的值为 1（是）或 0（否）。例如 frameborder="0" 指定没有边框。
framespacing	此属性指定 frameset 中框架之间的空间量。这可以采用任何整数值。例如 framespacing="10" 表示每个框架之间应有 10 像素的间距。

HTML <frame> 标签属性

以下列出的属性被 frame 标签接受。

属性	描述
src	此属性用于提供应在框架中加载的文件名。其值可以是任何 URL。例如，src="/html/top_frame.htm" 将加载 html 目录中可用的 HTML 文件。
name	此属性允许您为框架命名。它用于指示应将文档加载到哪个框架中。当您想要在一个框架中创建链接并将页面加载到另一个框架中时，这尤其重要，在这种情况下，第二个框架需要一个名称来标识自身作为链接的目标。
frameborder	此属性指定是否显示该框架的边框；如果给定，它将覆盖 <frameset> 标签上 frameborder 属性中给定的值，并且这可以取值为 1（是）或 0（否）。
marginwidth	此属性允许您指定框架边框和框架内容的左侧和右侧之间的空间宽度。该值以像素为单位给出。例如 marginwidth="10"。
marginheight	此属性允许您指定框架边框及其内容的顶部和底部之间的空间高度。该值以像素为单位给出。例如 marginheight="10"。
noresize	默认情况下，您可以通过单击并拖动框架的边框来调整任何框架的大小。noresize 属性可防止用户调整框架的大小。例如 noresize="noresize"。
scrolling	此属性控制出现在框架上的滚动条的外观。这采用“yes”、“no”或“auto”值。例如 scrolling="no" 表示它不应具有滚动条。
longdesc	此属性允许您提供指向另一个页面的链接，该页面包含对框架内容的详细描述。例如 longdesc="framedescription.htm"

框架的缺点

使用框架有一些缺点，因此从不建议在网页中使用框架。

一些较小的设备通常无法处理框架，因为它们的屏幕不够大，无法分割。
有时由于不同的屏幕分辨率，您的页面在不同的计算机上显示方式会有所不同。
浏览器的 *后退按钮* 可能无法按用户希望的那样工作。
仍然有一些浏览器不支持框架技术。

视频 - HTML 框架

打印页面