CH05_内联框架

一、为什么学习HTML内联框架

HTML <iframe> 标签用来定义一个内联框架，使用它可以将另一个网页嵌入到当前网页中。<iframe> 标签会在网页中定义一个矩形区域，浏览器可以在这个区域内显示另一个页面的内容。

<iframe> 标签的语法格式如下：

1
<iframe src="url" width="m" height="n"></iframe>

src 属性用来指定要嵌入的网页的地址；width 和 height 属性用来指定框架的宽度和高度，默认单位是像素，当然您也可以使用百分比。

【注意】HTML <iframe> 标签不利于搜索引擎抓取页面内容，对 SEO 具有负面效果，在现代 Web 设计中不建议使用。

下表列举了 <iframe> 标签的所有属性：

image-20230201105005891

【示例】iframe代码如下：

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML &lt;iframe&gt; 标签演示</title>
</head>
<body>
    <p>下面的内联框架将嵌入C语言中文网首页，宽度设置为 330 像素，高度设置为 580 像素，用以模拟手机端的显示效果。</p>
    <iframe src="http://c.biancheng.net/" width="330" height="580"></iframe>
</body>
</html>

运行结果如下图所示：

image-20230201105607221

<center>图：iframe内联框架</center>

二、框架窗口的关联

​ 是可以实现导航窗口,通过点击导航窗口链接在指定的窗口打开关联的窗口

语法如下:

1
2
3
4
5
6
7
8
9
10
11
12
<html>
<head>
<title>创建多框架页面</title>
</head>
<frameset rows="20%,*">
<frame name="top" src="新建文本文档5.html" >
<frameset cols="20%,*">
<frame name="left" src="新建文本文档4.html">
<frame name="right" src="新建文本文档5.html">
</frameset>
</frameset>
</html>
1
2
3
4
5
6
7
8
<html>
<head>
<title>创建导航窗口</title>
</head>
<a href="http://hao123.com" target="right">第一个</a>
<a href="http://baidu.com" target="right">第二个</a>
<a href="http://sohu.com" target="right">第三个</a>
</html>
1
2
3
4
5
6
7
8
<html>
<head>
<title>hahah</title>
</head>
<body>
123
</body>
</html>

三、内联框架

标签规定一个内联框架。一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。

语法如下:

1
2
3
4
5
6
7
<html>
	<head></head>
	<body>
        <h1>插入一个内联框架</h1>
		<iframe src="text.html" width="500" height="300"></iframe>
	</body>
</html>

四、超链接target属性扩展

_parent:表示父窗口

_top:表示顶级窗口

课后作业

练习1：cols进行纵向分割

练习2：公共模板复用及链接

练习3：rows纵向分割为3个窗口

练习4：创建多框架页面1

练习5：创建多框架页面2

练习6：iframe简单使用

练习7：常用属性

练习8：引用google页

练习9：贵美商城