|
主题设置

卡片式面板通常用于非白色背景色的主体内

内联框架

<iframe> 标签定义 HTML 内联框架,其结束标签为 </iframe>

内联框架介绍

所谓内联框架,指的是可以在当前 HTML 文档中嵌入另一个文档,并且可以同时显示出来。

通过使用内联框架,可以在同一个浏览器窗口中显示不止一个页面。

内联框架展示

在当前页面中再次显示“HTML 入门”笔记内容:

内联框架语法

内联框架的语法非常简单,其中 src 属性指向要显示的页面地址。

<iframe src="url"></iframe>
尝试一下

内联框架标签

标签 属性 属性值 描述
<iframe> src 定义指向的页面地址
name 定义内联框架名称
width

可以是具提数值,也可以是百分比

比如:100 和 70%

单位默认为像素(px)

定义内联框架的宽度
height

可以是具提数值,也可以是百分比

比如:100 和 70%

单位默认为像素(px)

定义内联框架的高度
frameborder

0:无边框

1:有边框

no:无边框

yes:有边框

定义内联框架的边框

内联框架宽高

widthheight 属性用来定义内联框架的宽高。

属性值可以是数值也可以是百分比,默认以像素(px)为单位。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>内联框架宽高</title>
	</head>
	<body>
		<iframe src="http://www.bjbcode.com/" width="100%" height="300"></iframe>
	</body>
</html>
尝试一下

内联框架边框

frameborder 属性用来设置内联框架的边框。

属性值:

  • 0:无边框
  • 1:有边框
  • no:无边框
  • yes:有边框
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>内联框架边框</title>
	</head>
	<body>
		<iframe src="http://www.bjbcode.com/" frameborder="0"></iframe>
	</body>
</html>
尝试一下

显示链接里的页面

我们可以使用内联框架的 src 属性指向需要展示的页面,也可以不用 src 属性,通过点击 <a> 标签向内联框架里展示指定的页面。

以下示例中,<a> 标签的 target 属性的值,是 <iframe> 的名称:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>显示链接里的页面</title>
	</head>
	<body>
		<iframe src="" name="iframe_a" width="100%" height="300"></iframe>
		<a href="html-first.html" target="iframe_a">HTML 入门</a>
	</body>
</html>
尝试一下