Frameset 框架集

1.Frameset叫框架集。关于布局有很多种方式,框架集是比较古老的方式。

2.通过使用框架集,你可以在同一个浏览器窗口中显示不止一个HTML页面。每个HTML页面称为一个框架,多个框架组成一个框架集。

3.框架集是网页开发必须掌握的知识。例如后台架构、局部刷新、页面分割,都是框架集的表现,尤其是后台页面制作。

4.和框架集相关的三个标签 frameset 标签、frame 标签、iframe 标签。使用 frameset 时不可以和 body 同时使用,因为它们是同级的。一个 frame 引导 了一个 html文档。一个框架集可包含多个 html文档。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Frameset框架集</title>
</head>
<!-- * : 代表余下所有的空間-->
<frameset rows="50%,*">
    <frame src="https://www.baidu.com/"/>
    <frame src="https://www.so.com/?src=hao_360so_button&ls="/>
</frameset>
</html>
Frameset基本结构

5.Frameset 的一些属性

 cols           把一个浏览器窗口按列进行切割(%、px、*)

   rows          把一个浏览器窗口按列进行切割

   border           框架边的大小

   bordercolor   框架边的颜色

 frameboder  是否显示框架边(yes或no)、(1或0),默认显示

   name            框架名称。

   src                 此框架要显示的网页名称或路径。此为必须设置的属性

   scrolling       是否要显示滚动条 (yes或no),默认可滚动

   noresize      是否可改变框架大小 ,默认可以改变

                      设置了noresize的frame会影响其它两旁的frame,如果当前frame在最边上,则只影响它本身。

                      chrome 可设置在 frameset 中,这样全局都不可拖动,而火狐要设置在具体的 frame 上。

  noframes     如果不支持 framset 框架集的话,

                     要使用<noframes> <body>您的浏览器无法处理框架!</body> </noframes>

  iframe         内联框架 可以包含在 body 中,和普通的元素一样 相关属性

                   ①width 可设置内联框架的宽

                   ②height 可设置内联框架的高

                   ③name 设置框架名称

                   ④src 设置页面的路径

                   ⑤scrolling="" yes/no 滚动条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Frameset框架集</title>
</head>
<frameset name="body" cols="50%,*" border="2" bordercolor="red" noresize="noresize" >
    <frame src="https://www.baidu.com/" scrolling="no"/>
    <frame src="https://www.so.com/?src=hao_360so_button&ls=" scrolling="yes"/>
</frameset>
<noframes>
    <body>
        您的浏览器无法处理框架!
    </body>
</noframes>
</html>
Frameset框架集-设置属性
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Frameset框架集</title>
</head>
<frameset  rows="30%,*">
    <frame src="https://www.baidu.com/" />
    <frameset cols="30%,*">
        <frame src="https://www.so.com/?src=hao_360so_button&ls=" />
        <frame src="https://www.baidu.com/"/>
    </frameset>
</frameset>
<noframes>
    <body>
        您的浏览器无法处理框架!
    </body>
</noframes>
</html>
Frameset框架集-嵌套
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Frameset框架集</title>
</head>
<body>
    <a href="http://www.w3school.com.cn/tags/tag_iframe.asp" target="frameset">点击</a>
    <iframe name="frameset" src="https://hao.360.com/" width="500px" height="400px"></iframe>
</body>
</html>
Frameset框架集-iframe

 

posted @ 2019-07-04 17:12  C_XingM  阅读(380)  评论(0编辑  收藏  举报