Frames

优质

小牛编辑

124浏览

2023-12-01

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

框架的缺点

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

一些较小的设备经常无法应对帧，因为它们的屏幕不够大，无法分割。
由于屏幕分辨率不同，有时您的页面将在不同的计算机上以不同的方式显
浏览器的back按钮可能无法按用户的意愿运行。
仍然很少有浏览器不支持帧技术。

创建框架

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

Note - HTML5中不推荐使用“frame”标记。不要使用此元素。

例子 (Example)

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

<!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>

例子 (Example)

让我们把上面的例子如下，这里我们用cols替换rows属性并改变它们的宽度。这将垂直创建所有三个帧 -

<!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>

标签属性

以下是

标记的重要属性 -

Sr.No	属性和描述
1	cols 指定框架集中包含的列数和每列的大小。您可以使用以下四种方式之一指定每列的宽度 - 绝对值，以像素为单位。例如，要创建三个垂直框架，请使用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个像素的间距。

标签属性

以下是标签的重要属性 -

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

浏览器支持框架

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

所以你必须在元素中放置一个元素，因为元素应该替换元素，但如果浏览器不理解元素，那么它应该理解其中的内容元素包含在元素中。

您可以为使用旧浏览器的用户添加一些好消息。例如， Sorry!! your browser does not support frames. Sorry!! your browser does not support frames. 如上例所示。

框架的名称和目标属性

帧的最常用用途之一是将导航栏放在一个帧中，然后将主页加载到单独的帧中。

让我们看下面的示例，其中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还可以采用以下值之一 -

Sr.No	选项和说明
1	_self 将页面加载到当前帧中。
2	_blank 将页面加载到新的浏览器窗口中。打开一个新窗口。
3	_parent 将页面加载到父窗口中，在单个框架集的情况下，该窗口是主浏览器窗口。
4	_top 将页面加载到浏览器窗口中，替换当前帧。
5	targetframe 将页面加载到命名的目标框架中。