在html网页中如何创建一个内联框架 (2)

2024-10-17 05:57:17

1、如图所示,我们新建一个记事本,并将记事本的名字改为“引入内联框架.html”,并回车键确定,以使文件转化为浏览器可以打开的html网页文件。

在html网页中如何创建一个内联框架 (2)

3、如图所示,我们输入html5的声明标签为—<!DOCTYPE html>,以告诉浏览器我们编写的是一个html5的网页。

在html网页中如何创建一个内联框架 (2)

5、如图所示,我们接下来我们在里面依次编写html5网页的头部标签—<head></head>这一对标签,用于写入html网页的头部内容(主要为标题、编码格式等。)。

在html网页中如何创建一个内联框架 (2)

7、如图所示,我们再编写主体部分的标签—<body>和</body>,<body>标签主要用来写如网页的主体内容的比如:图片、文字的段落、视频等。(html标签一般是成对出现的比如:<head>和</head>这一对。)

在html网页中如何创建一个内联框架 (2)

9、如图所示,我们在src属性中写入引入网页的地址,这样就可以成功引入一个其他网页到这个网页中了(我们就引入上一篇百度经验写的一个插入图片的html文件。)。我们再给这个内联框架设置宽度width=“700”,设置其高度为height=“890”。

在html网页中如何创建一个内联框架 (2)

11、如图所示,我们可以看到这就是我们引入的那个插入图片的网页了,是为上一篇百度经验所写的html网页了。

在html网页中如何创建一个内联框架 (2)

12、这是本教材的源码,提供大家参考哦!<!--对文档声明为html5的文件--><!DOCTYPE html><!--html的文档被<html>的标签包围--><html><!--<head>包裹的是html的头部文件--><head><!--<title>标签包裹的是网页的标题,标题为“引入内联框架”--><meta charset="UTF-8" /><title>引入内联框架</title></head><!--<body>标签包裹的是html文件的主体部分--><body><!--用<iframe>标签引入内联框架--><!--用<iframe>标签的src属性填写另一个网页的地址进行引入,并设置内联框架的宽度width和高度height,以便内联框架引入的网页更好的展示--><iframe src="G:\教程\硅谷jc\尚硅谷HTML+CSS视频\视频\视频1\html与css经验\在html网页中如何插入图片本(3)\插入图片.html" width="780"height="890"></iframe></body></html>

猜你喜欢