HTML - 框架

原创

admin 4个月前 (08-07) 阅读数 21 #HTML

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框架</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>
         您的浏览器不支持框架。
      </body>
   </noframes>
</frameset>
</html>

创建垂直框架

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

<!DOCTYPE html>
<html>
<head>
   <title>HTML框架</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>
         您的浏览器不支持框架。
      </body>
   </noframes>
</frameset>
</html>

框架的name和target属性

框架最受欢迎的用途之一是在一个框架中放置导航栏，然后在另一个框架中加载主页面。

让我们看下面的例子，其中test.htm文件包含以下代码：

<!DOCTYPE html>
<html>
<head>
   <title>HTML目标框架</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，因此每当您点击菜单栏中的任何链接时，可用链接将在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新闻
   </a>
</body>
</html>

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

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

frameset标签的属性

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

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