300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > HTML5框架 iframe用法 实现嵌套 好玩用法

HTML5框架 iframe用法 实现嵌套 好玩用法

时间:2020-04-13 22:36:23

相关推荐

HTML5框架  iframe用法 实现嵌套 好玩用法

html5框架

现在基本都是适用第四种内联框架来实现:

我们先编写三个html5文件:

第一个:index03.html

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><iframe src="index.html" width="800px" height="800px"></iframe></body></html>

第二个:index.html

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>表单</title></head><body bgcolor="antiquewhite">frame<iframe src="index01.html" width="600px" height="600px"></iframe></body></html>

第三个:index01.html

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body bgcolor="aqua">frame01<iframe src="index02.html" width="400px" height="400px"></iframe></body></html>

然后我们在index02.html中加入一个连接:

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body bgcolor="bisque"><a href="" target="_parent">baidu</a></body></html>

运行index03.html

实现这种效果:

简单梳理一下,就是先在index03.html中加入一个长和宽都是800px的index.html,然后index.html中又引入了长和宽都是600px的index01.html, 接着index01.html 中又引入了长和宽都是400px的index02.html,一次循环嵌套。

注意 a标签这种用法:

<a href="" target="_parent">baidu</a>

这里的target ="_parent" 表示在父级打开连接:

实现效果图:

换成_self

<a href="" target="_self">baidu</a>

效果图:

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。