主页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table border="1">
<!--iframe:向一个页面发送了一个请求,
一个页面嵌套了另一个页面。
-->
<!--
这里我们要注意,iframe不能写空标签,
不然不显示框架。
-->
<!--src="left.html"链接当前页面的资源-->
<td><iframe name="left" src="left.html" frameborder="1"></iframe></td>
<td><iframe name="right" src="right.html" frameborder="1"></iframe></td>
</table>
</body>
</html>
默认页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>默认页面</title>
</head>
<body>
right
right
right
right
right
<iframe src="content.html" name="aaa"></iframe>
</body>
</html>
父框架页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>链接页面</title>
</head>
<body>
<!--
所有的框架的顶级框架是最大的这个页面的框架。
-->
<!-- href="content.html"作用是转接页面的标签-->
<!--
target="_top"显示最顶层,为顶级框架。
起作用是破坏了整个框架,
而来显示它自己的框架。
-->
<!--target="_blank"为新开一个窗口-->
<!--target="_parent"为链接到当前页面的父框架-->
<!--target="_search"-->
<!--target="_self"代表自身-->
<a href="content.html" target="_top">第一节</a>
<!--原来框架的默认页面为right right right right right,
这里将原来右边默认页面的内容替换掉了-->
<!--这样的好处就是,指定我们点击链接所要显示的页面-->
<a href="content.html" target="right">第一节</a>
<a>第一节</a>
<a>第二节</a>
<a>第三节</a>
</body>
</html>
父框架的链接页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>父框架的链接页面</title>
</head>
<body>
content
<a href="index-2.html" target="_parent">链接显示到父框架:</a>
</body>
</html>
操作结果:
1、点击主框架的第一个(紫色)链接
- 关闭页面,重新启动。点击主框架第二(紫色)链接。