【HTML基础-3】iframe框架详解及应用案例—实现页面嵌套

像风一样9

已于 2022-04-03 11:09:38 修改

阅读量1.3w

点赞数 7

分类专栏： # 入门04：web安全之语言基础文章标签： HTML Iframe框架页面嵌套

于 2022-03-26 22:57:02 首次发布

本文链接：https://blog.csdn.net/m0_64378913/article/details/123738209

版权

入门04：web安全之语言基础专栏收录该内容

21 篇文章 18 订阅

订阅专栏

1 iframe框架概述

作用：< iframe > 标签规定一个内联框架。一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。即在一个页面中引入另一个页面，实现页面之间的嵌套。可以把需要的文本放置在 < iframe > 和 < /iframe > 之间，这样就可以应对不支持 < iframe > 的浏览器。
使用 CSS 为 < iframe >（包括滚动条）定义样式。
语法示例：

<html>
	<head> 
		<meta charset="utf-8"> 
		<title>菜鸟教程(runoob.com)</title> 
	</head> 
	
	<body>
		<iframe src="//www.runoob.com">
		  <p>您的浏览器不支持  iframe 标签。</p>
		</iframe>
	</body>
</html>

在这里插入图片描述

2 iframe常用属性

2.1 name属性

作用：规定 < iframe > 的名称，并具有下列用途

用于在 JavaScript 中引用元素;
作为< a >或< form >元素的 target 属性的值；
作为或的 formtarget 属性的值。

语法：<iframe name="自定义名称">

2.2 src属性

作用：在iframe中显示的文档的URL。
语法：<iframe src="URL">
可能的值：

绝对 URL ：指向另一个网站（比如 src=“http://www.example.com/default.htm”）
相对 URL ：指向网站中的一个文件（比如 src=“default.htm”）

2.3 width属性

作用：规定< iframe >的宽度，以像素计。
语法：<iframe width="pixels">。
取值：以像素为单位的内联框架的高度（比如 “100px”）也可以为百分比，如100%。
注意：在HTML 4.01中，宽度应该被定义为以像素为单位或者以包含元素的百分比为单位。在 HTML5中，宽度值必须以像素为单位。

2.4 height属性

作用：规定< iframe >的高度，以像素计。
语法：<iframe height="pixels">。
取值：以像素为单位的内联框架的高度（比如 “100px”）。
注意：在 HTML 4.01 中，高度应该被定义为以像素为单位或者以包含元素的百分比为单位。在 HTML5 中，高度值必须以像素为单位。

2.5 frameboder属性

作用：是否显示框架周围的边框，当属性值为1，则显示边框，为0则不显示边框。
语法：<iframe frameboder="1 | 0">。

2.6 其他

其他属性如seamless、sandbox等请参考《HTML< iframe >标签》。
可以利用菜鸟在线编辑器尝试不同属性的应用结果。

3 应用案例

<html>
    <head>
        <meta charset="utf-8">  
    <title>
    testIframe
    </title>
 
    </head>

    <body>
        <h1>testIframe </h1>
        <a href="http://www.baidu.com" target="myframe">百度</a> <br/>
        <a href="http://www.qq.com" target="myframe">QQ</a> <br/>
        <a href="http://www.sohu.com" target="myframe">搜狐</a> <br/>
   <iframe name="myframe" width="100%" frameboder="0"></iframe>
    </body>

</html>

运行结果如下，当点击百度、QQ或搜狐时，会在iframe框中显示击百度、QQ或搜狐的网页，并且可以正常使用。
在这里插入图片描述

4 归纳

（1）了解iframe的作用；
（2）掌握iframe常用属性的作用及用法；
（3）学会将超链接< a >标签与< iframe >结合使用。

参考文章

[1] 《HTML< iframe >标签》
[2] 《【HTML基础】iframe框架》

像风一样9

关注

7
点赞
踩
53

收藏

觉得还不错? 一键收藏
3
评论
【HTML基础-3】iframe框架详解及应用案例—实现页面嵌套

目录1 iframe框架概述2 iframe常用属性2.1 name属性2.2 src属性2.3 width属性2.4 height属性2.5 frameboder属性2.6 其他3 应用案例4 归纳参考文章1 iframe框架概述作用：< iframe > 标签规定一个内联框架。一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。即在一个页面中引入另一个页面，实现页面之间的嵌套。可以把需要的文本放置在 < iframe > 和 < /iframe
复制链接

扫一扫