框架对于页面的设计有着很大的作用
框架集标签定义如何将窗口分割为框架
每个 frameset 定义一系列行或列
rows/cols 的值规定了每行或每列占据屏幕的面积
noresize: 固定框架大小
cols: 列
rows: 行
框架集标签已经被弃用, 在这里做一个大致的了解
打开 netBeans, 创建一个 FrameDemo 的项目, 创建 4 个 HTML 文件
framea.html, frameb.html 和 framec.html 分别为 body 设置不同的背景色:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- </head>
- <!--把不同的frame设置不同的颜色 其它的一样, 只改变颜色-->
- <body bgcolor="#5f9ea0">
- </body>
- </html>
在 index.html 中键入代码:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- 框架
- </title>
- </head>
- <!-- IDE已提示frameset已经被弃用 设置行的比例为20:30:50 -->
- <frameset rows="20%, 30%, 50%">
- <!--用src引入外部frame-->
- <frame src="framea.html">
- </frame>
- <frame src="frameb.html">
- </frame>
- <frame src="framec.html">
- </frame>
- </frameset>
- </html>
运行起来再浏览器中查看一下效果.
iframe
为了诠释内联框架, 这里用超链接的打开方式来说明内联框架, 便宜共同理解.
首先先看 a 标签的 target 参数:
上面的四种方式咋一看, 看不懂说的啥, 下面具体代码说名下
1. htmla.html 里面的代码:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- </head>
- <!--被不同的frame设置不同的颜色 其它的一样, 只改变颜色-->
- <body bgcolor="#dc143c">
- frameA
- <a href="http://www.baidu.com" target="_parent">
- 没事儿就找找度娘
- </a>
- </body>
- </html>
2. htmlb.html, 在 htmlb 中内联一个 htmla 的框架
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- </head>
- <body bgcolor="#6495ed">
- <!-- 在htmlb里面去承载htmla -->
- frameb
- <iframe src="framea.html" width="400" height="400">
- </iframe>
- </body>
- </html>
3. htmlc.html, 在 htmlc 中内联一个 htmlb 的框架
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- </head>
- <body bgcolor="#ff8c00">
- <!-- 在htmlc里面去承载htmlb -->
- frameC
- <iframe src="frameb.html" width="600px" height="600px">
- </iframe>
- </body>
- </html>
4. index.html, 在 index 中内联一个 ftmlc 的框架
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>框架</title>
- </head>
- <!--
- target: 打开页面的方式
- 参数:
- _blank: 在新建窗口中打开
- _self: 在当前的窗口中打开
- _parent: 在上一个父窗口中打开
- _top: 在顶级窗口中打开
- -->
- <a href="http://www.baidu.com" target="_top">没事儿就找找度娘</a>
- <!--
- iframe: 设置内联框架
- frameborder: 设置边框 0 标示没有边框
- width: 宽度
- height: 高度
- -->
- <iframe src="framec.html" frameborder="0" width="800" height="800"></iframe>
- </html>
依次更改 htmla.html 中 a 标签中 target 的参数, 然后再刷新浏览器后, 点击超链接, 看看奇迹是如何发生的.
来源: http://www.cnblogs.com/winsoncheung/p/6566937.html