HTML框架

时间:2019-06-08 23:19:23  来源:igfitidea点击:

HTML框架用于将浏览器窗口分成多个部分,每个部分都可以加载单独的HTML文档。

浏览器窗口中的框架集合称为框架集。窗口以类似于表格组织的方式划分为框架:分为行和列。

框架的缺点

使用框架有一些缺点,所以不建议在网页中使用框架。

  1. 有少数浏览器不支持框架技术。

  2. 一些较小的设备通常无法处理框架,因为它们的屏幕不够大,无法分割。

  3. 有时,由于屏幕分辨率不同,页面在不同计算机上的显示方式也会有所不同。

  4. 浏览器的后退按钮可能无法像用户希望的那样工作。

创建框架

要在页面上使用框架,我们使用<frameset>标记而不是<body>标记。

<frameset>标记定义了如何将窗口划分为多个框架。

标签的rows属性定义水平框架,cols属性定义垂直框架。

每个框架用<frame>标记表示,它定义了应该打开哪个HTML网页到框架中。

注意 HTML5中不推荐使用标记。请勿使用此元素。

创建HTML框架示例

下面是创建三个水平框架的示例:

<!DOCTYPE html>
<html>

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

示例2

使用cols替换rows属性,在垂直方向上创建所有三个框架。并改变了它们的宽度。

<!DOCTYPE html>
<html>
   
   <head>
      <title>HTML 框架示例2</title>
   </head>
   
   <frameset cols = "20%,50%,30%">
      <frame name = "left" src = "top_frame.htm" />
      <frame name = "center" src = "main_frame.htm" />
      <frame name = "right" src = "bottom_frame.htm" />
      
      <noframes>
         <body>您的浏览器不支持框架。</body>
      </noframes>
   </frameset>
   
</html>

<frameset>标签属性

属性说明
cols指定框架集中包含的列数以及每列的大小。
我们可以通过以下四种方式之一指定每列的宽度:
1. 以像素为单位的绝对值。例如,要创建三个垂直框架,使用 cols = "100, 500, 100"。
2. 浏览器窗口的百分比。例如,要创建三个垂直框架,使用cols= "10%, 70%, 20%"。
3. 使用通配符。例如,要创建三个垂直框架,使用cols="10%, *, 10%"。 通配符将获取窗口的其余部分。
4. 作为浏览器窗口的相对宽度。 例如,要创建三个垂直框架,请使用cols= "3*, 2*, 1*"。
这是窗口百分比的另一种选择。
我们可以使用浏览器窗口的相对宽度。窗户将被分为六个部分:
第一列占窗户的一半,第二列占三分之一,第三列占六分之一。
rows此属性的工作方式与cols属性相同,并采用相同的值,但它用于指定框架集中的行。
例如,要创建3个水平框架,请使用rows="10%, 80%, 10%"。
border此属性指定每框架边框的宽度(以像素为单位)。
例如,border="5"。值为0表示没有边界。
frameborder此属性指定是否应在框架之间显示三维边框。
此属性的值为1(是)或0(否)。
例如frameborder="0"不指定边框。
framespacing框架间距,此属性指定框架集中框架之间的空间量。
例如framespacing="10"表示每个框架之间应该有10个像素的间距。

<frame>标签属性

属性说明
src此属性用于指定应加载到框架中的网页。它的值可以是任何URL。
name此属性允许我们为框架指定名称。它用于指示文档应加载到哪个框架中。
当我们希望在一个框架中创建链接并将页面加载到另一个框架中时,
这一点尤其重要,在这种情况下,第二个框架需要一个名称来将自己标识为链接的目标。
frameborder框架边框, 该属性指定是否显示该框架的边框;
如果指定了该值,它将覆盖<frameset>标记的frameborder属性中给定的值,
该值可以是1(是)或0(否)。
marginwidth边距宽度,此属性允许我们指定框架边框左右两侧与框架内容之间的空间宽度。该值以像素为单位。marginwidth="2"。
marginheight边距高度,此属性允许我们指定框架边框及其内容的顶部和底部之间的空间高度。该值以像素为单位。marginheight="2"。
noresize禁止调整框架窗口尺寸。
默认情况下,可以通过单击并拖动框架的边框来调整任何框架的大小。例如:noresize = "noresize".
scrolling此属性控制框架上显示的滚动条的外观。它的值可以是"yes", "no" or "auto"。例如,scrolling="no"表示没有滚动条。
longdesc此属性允许我们提供指向另一页的链接,其中包含框架内容的详细说明。例如longdesc="framedescription.htm"

浏览器对框架的支持

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

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