HTML - 框架

HTML 框架用于将浏览器窗口分为多个部分，每个部分可以加载单独的 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 = "/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>

这将产生以下结果 -

<frameset> 标签属性

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

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

<frame> 标签属性

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

先生编号	属性及描述
1	源代码该属性用于给出应加载到框架中的文件名。它的值可以是任何 URL。例如，src =“/html/top_frame.htm”将加载 html 目录中可用的 HTML 文件。
2	姓名该属性允许您为框架指定名称。它用于指示文档应该加载到哪个框架中。当您想要在一个框架中创建将页面加载到另一个框架中的链接时，这一点尤其重要，在这种情况下，第二个框架需要一个名称来将自己标识为链接的目标。
3	框架边框该属性指定是否显示该框架的边框；它会覆盖 <frameset> 标记上的frameborder 属性中给定的值（如果给定了该值），并且该值可以为 1（是）或 0（否）。
4	边距宽度该属性允许您指定框架左右边框与框架内容之间的空间宽度。该值以像素为单位给出。例如边距宽度=“10”。
5	边距高度此属性允许您指定框架边框及其内容的顶部和底部之间的空间高度。该值以像素为单位给出。例如边距高度=“10”。
6	诺雷尺寸默认情况下，您可以通过单击并拖动框架的边框来调整任何框架的大小。noresize 属性阻止用户调整框架大小。例如 noresize =“noresize”。
7	滚动该属性控制框架上出现的滚动条的外观。该值可以是“yes”、“no”或“auto”。例如，scrolling =“no”意味着它不应该有滚动条。
8	长描述此属性允许您提供指向另一个页面的链接，该页面包含框架内容的详细描述。例如longdesc =“framedescription.htm”

浏览器对框架的支持

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

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

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

框架的名称和目标属性

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

让我们看看下面的示例，其中 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，因此每当您单击菜单栏中的任何链接时，可用链接都会在主页中打开。

以下是menu.htm文件的内容

现场演示

<!DOCTYPE html>
<html>

   <body bgcolor = "#4a7d49">
      <a href = "http://www.google.com" target = "main_page">Google</a>
      <br />
      <br />
      
      <a href = "http://www.microsoft.com" target = "main_page">Microsoft</a>
      <br />
      <br />
      
      <a href = "http://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>

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

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

先生编号	选项和说明
1	_自己将页面加载到当前框架中。
2	_空白的将页面加载到新的浏览器窗口中。打开一个新窗口。
3	_parent 将页面加载到父窗口中，在单个框架集的情况下，父窗口是主浏览器窗口。
4	_顶部将页面加载到浏览器窗口中，替换任何当前框架。
5	目标框架将页面加载到指定的目标框架中。