HTML核心（五）HTML中的框架 iframe标签以及多层iframe嵌套
前面我们讲了frame标签，本节来看iframe标签。二者的区别主要在于能否独立使用，且frame的宽高由frameset设定，frameset设定的宽高为显示比例。当浏览器改变尺寸时，框架的大小也会按比例进行缩放。
而iframe是可以独立使用的，它可以放在页面中的任意位置，iframe的尺寸由iframe自身的width和height属性设定，该设定为像素尺寸，即：固定尺寸。当浏览器尺寸改变时框架的尺寸不会缩放。
下面先看示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML中的框架 iframe标签</title>
</head>
<body>
<iframe src="a.html" frameborder="0" width="400" height="400"></iframe>
<iframe src="b.html" frameborder="0" width="400" height="400"></iframe>
<iframe src="c.html" frameborder="0" width="400" height="400"></iframe>
<iframe src="d.html" frameborder="0" width="400" height="400" name="d"></iframe>
</body>
</html>
以上代码中我们在body标签中添加了四个iframe标签，并分别设置了宽高，然后分别引入了abcd四个html页面，在a.html页面中我们添加了一个a链接，我们希望点击a链接的时候在d页面打开该链接。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
a页面
<br>
<a href="https://www.teamczyx.com" target="d">在d页面中打开</a>
</body>
</html>
实现结果如下：
实现在其它框架中打开指定页面的语法如下：
1、如果要在其它框架中打开一个页面，就把a标签的target设置为对应的框架名name
2、如果要在当前框架中打开一个页面，就把a标签的target设置为_self
3、如果要在父框架中打开一个页面，就把a标签的target设置为_parent
下面我们再看一下框架嵌套的问题
先放上实现结果
看到以上结果图后大家首先想到的实现方法可能是在iframe标签对中再放一个iframe标签对，这是错误的，因为iframe标签对中不能显示任何内容。
正确的方法是：
顶级的页面引入a.html页面，在a.html页面引入b.html，以此类推。
最终形成的代码结构如下：
下面是实现逻辑代码
index.html中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML中的框架 iframe标签以及多层iframe嵌套</title>
</head>
<body>
<iframe src="a.html" frameborder="0" width="500" height="500"></iframe>
</body>
</html>
a.html中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
a页面
<a href="https://www.teamczyx.com" target="d">在d页面中打开</a>
<iframe src="b.html" frameborder="0" width="400" height="400"></iframe>
</body>
<style>
body{
background-color: antiquewhite;
}
</style>
</html>
b.html中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
b页面
<a href="https://www.teamczyx.com" target="_self">在当前页面中打开</a>
<iframe src="c.html" frameborder="0" width="300" height="300"></iframe>
</body>
<style>
body{
background-color: rgb(170, 141, 103);
}
</style>
</html>
c.html中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
c页面
<a href="https://www.teamczyx.com" target="_parent">在父框架中打开，即：b页面</a>
<iframe src="d.html" frameborder="0" width="200" height="200" name="d"></iframe>
</body>
<style>
body{
background-color: rgb(201, 123, 22);
}
</style>
</html>
d.html中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
d页面
</body>
<style>
body{
background-color: rgb(161, 99, 17);
}
</style>
</html>
以上代码中我们还分别演示了如何在当前框架中打开、如何在指定框架中打开、如何在父框架中打开，大家可以把代码复制出去动手测试一下。
以上就是HTML中iframe标签以及多层iframe嵌套的核心知识点，其中iframe还有很多标签，这里就不做讲解了，网上一查iframe的属性，到处都是。
文章在别处看过，不过很有感触。。。。。 编程的不一定是程序员,比如我就只是业余爱好者,一个程序能够运行畅通是我最大的愿望。我甚至是最基本的VB6也没有熟悉，但为了提高实际工作中的效率，只有勉为其难的编一些小程序在工作中用。相比之下你们这些经过系统学习的人是幸运的，共同努力吧，但愿你们能成为中国的娇子。 谢谢，受教了！呵呵。早点看到就好了呀！！ 事实上，有一句话我非常认同：CPU是为用户服务的，不是为程序员服务的。。。非常感谢linyunjia楼主的好帖！！！ 谢谢楼主：从你的文章中我学会很多！ 发人深省！ 学习!!!!!!!!!!!!!!! 受益非浅 很不错的文章！