HTML中的框架是什么？

来源：互联网发布：简单视频网站源码编辑：程序博客网时间：2024/05/29 07:50

1.框架标签（frame）

框架对于页面的设计有着很大的作用；

2.框架集标签（<frameset>）

框架集标签定义如何将窗口分割为框架；

每一个frameset定义一系列行或者列；

rows/cols的值规定了每行或每列占据屏幕的面积；

3.常用标签：

noresize:固定框架大小；

cols：列；

rows：行；

4.内联框架：iframe;

代码详解如下：

【一】框架集标签（<frameset>）

（1）分别新建三个html页面，代码如下：

frame01.html:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title></head><body bgcolor="#8a2be2">    frame01    <br/>    <a href="http://ww.baidu.com" target="_top">打开百度</a></body></html>

frame02.html:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title></head><body bgcolor="#4169e1">    frame02    <iframe src="frame01.html" frameborder="0" width="100%" height="400px"></iframe></body></html>

frame03.html:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title></head><body bgcolor="#7fffd4">    frame03    <iframe src="frame02.html" frameborder="0" width="100%" height="400px"></iframe></body></html>

（2）再新建一个html文件，命名为index，实现如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>框架</title>    <!--<frameset cols="20%,50%,30%">-->        <!--<frame src="frame01.html"></frame>-->        <!--<frame src="frame02.html"></frame>-->        <!--<frame src="frame03.html"></frame>-->    <!--</frameset>--></html>

【内联框架iframe】

（1）新建三个frame的HTML文件同上，在index中实现如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>框架</title></head><!--target属性详解_self:在自己本身这个标签页打开另一个页面；_blank:在浏览器中重新打开一个标签页；_parent:在嵌套自己的父类容器中打开这个页面；_top:在包含自己的最顶级容器中打开这个页面；-->    index    <a href="http://www.baidu.com" target="_self">点击我</a>    <!--<frameset cols="20%,50%,30%">-->        <!--<frame src="frame01.html"></frame>-->        <!--<frame src="frame02.html"></frame>-->        <!--<frame src="frame03.html"></frame>-->    <!--</frameset>-->    <!--内联框架-->    <iframe src="frame03.html" frameborder="0" width="100%" height="400px"></iframe></html>

注意：框架集标签（<frameset>）已经不推荐使用了，现在使用比较广泛的是iframe内联框架。

github主页：https://github.com/chenyufeng1991 。欢迎大家访问！

1 0