个性化阅读
专注于IT技术分析

html框架frame – HTML教程

上一章HTML教程请查看:html邮件链接

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

框架frame的缺点

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

  • 一些更小的设备通常不能处理帧,因为它们的屏幕不够大,不能分割。
  • 有时由于不同的屏幕分辨率,你的页面会在不同的计算机上以不同的方式显示。
  • 浏览器的后退按钮可能不会像用户希望的那样工作。
  • 目前仍有少数浏览器不支持帧技术。

创建框架frame

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

注意,<frame>标签在HTML5中被弃用,不要使用这个元素。

例子

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

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Frame</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属性并更改它们的宽度。这将创建所有的三个垂直frame:

<!DOCTYPE html>
<html>
   
   <head>
      <title>HTML Frame</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>

<frameset>标签属性

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

编号 属性和描述
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”。0表示没有边界。
4 frameborder 此属性指定是否应在帧之间显示三维边框。该属性的值为1 (yes)或0 (no)。例如,frameborder = “0”不指定边界。
5 framespacing 此属性指定帧集中帧之间的空间量。它可以取任何整数。例如,frame espace = “10”表示每帧之间应该有10个像素的间距。

<frame>标记属性

以下是<frame> tag−的重要属性

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

对框架的浏览器支持

如果用户正在使用任何旧的浏览器或不支持帧的浏览器,那么<noframes>元素应该显示给用户。

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

你可以放一些不错的消息,你的用户有旧的浏览器。例如,对不起! !你的浏览器不支持框架。如上例所示。

框架的名称和目标属性

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

让我们看看下面的例子,其中test.htm文件具有以下代码

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Frame</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,因此无论何时单击菜单栏中的任何一个链接,都将在主页中打开可用链接。

下面是menu.htm文件的内容

<!DOCTYPE html>
<html>

   <body bgcolor = "#4a7d49">
      <a href = "http://www.g.com" target = "main_page">姑姑</a>
      <br />
      <br />
      
      <a href = "http://www.m.com" target = "main_page">微软</a>
      <br />
      <br />
      
      <a href = "http://news.b.uk" target = "main_page">BBC电台</a>
   </body>
    
</html>

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

<!DOCTYPE html>
<html>

   <body bgcolor = "#b5dcb3">
      <h3>这是主页,任何链接的内容都会显示在这里。</h3>
      <p>所以现在点击任何链接,看看结果。</p>
   </body>
    
</html>

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

编号 选项和描述
1 _self 将页面加载到当前帧。
2 _blank 将页面加载到新的浏览器窗口。打开一个新窗口。
3 _parent 将页面加载到父窗口,对于单个框架集,父窗口是主浏览器窗口。
4 _top 将页面加载到浏览器窗口,替换当前的任何帧。
5 targetframe 将页面加载到指定的targetframe中。
赞(0)
未经允许不得转载:srcmini » html框架frame – HTML教程

评论 抢沙发

评论前必须登录!