HTML - iframe 标签

HTML <iframe> 标签用于创建内联框架。内联框架用于将另一个 html 文档显示到适当的 html 文档中。我们可以根据需要使用 HTML 属性和 CSS 属性来装饰 iframe。

语法


 <iframe src=""> ..... </iframe >

属性

HTML <iframe> 标签接受所有 HTML的全局属性和事件属性。

特定属性

HTML <iframe> 标签也接受以下附加属性。

属性	值	描述
align	left right top middle bottom	指定如何根据周围的文本对齐 iframe。
frameborder	1 0	指定是否在框架周围显示边框。
height	pixels	指定内联框架的高度。
longdesc	URL	指向帧内容的详细描述的 URL。
marginheight	pixels	允许您指定框架边框的左右空间与框架内容之间的空间宽度。该值以像素为单位。例如，marginwidth = “10”。
marginwidth	pixels	指定帧内容与其左右边距之间的边距（以像素为单位）。
name	text	框架名称
sandbox （HTML5）	"" allow-forms allow-same-origin allow-scripts allow-top-navigation	为 iframe 中的内容启用一组额外的限制。
scrolling	yes no auto	确定滚动条操作
seamless （HTML5）	seamless	指定 iframe 应看起来像是包含文档的一部分
src	URL	帧内容文件的位置
srcdoc（HTML5）	HTML_code	指定要在 iframe 中显示的页面的 HTML 内容
width	pixels	指定内联框架的宽度。

HTML <iframe> 标签示例

创建简单的 <iframe>

在此示例中，我们将创建一个 <iframe> 并在该 iframe 中呈现我们的主屏幕。


<!DOCTYPE html>
<html>

	 	<head>
	 	 	 <title>启 科 普 HTML iframe 标签教程</title>
	 	</head>

	 	<body>
	 	 	 	<h2>HTML iframe tag Example</h2>
	 	 	 <iframe	
	 	 	 	 	 	 src = "https://www.qikepu.com/index.htm"	
	 	 	 	 	 	 width = "600" height="400">
	 	 	 </iframe>
	 	 		
	 	</body>

</html>

删除 Iframe 的边框

在此示例中，我们将使用 CSS border 属性删除 <iframe> 的默认边框。


<!DOCTYPE html>
<html>

	 	<head>
	 	 	 <title>启 科 普 HTML iframe 标签教程</title>
	 	</head>

	 	<body>
	 	 	 	<h2>HTML iframe tag Example</h2>
	 	 	 <iframe	
	 	 	 	 	 	 src = "https://www.qikepu.com/index.htm"	
	 	 	 	 	 	 width = "600" height="400" style="border:none;">
	 	 	 </iframe>
	 	 		
	 	</body>

</html>

支持的浏览器

Tag
iframe	Yes	Yes	Yes	Yes	Yes

打印本页