11.iframe内联框架

内联框架（iframe）是一个可以用来在当前HTML文档内展示另一个HTML页面的HTML标签。

代码结构：

<iframe src="path" name="mainFrame"></iframe>

其中src是网址，name里的mainFrame就和我们前面学的-blank，-self一样，表示网页打开的位置。下面我们直接实战来解释这是什么意思。

---

我们在B站随便打开一个视频，点击分享，可以看到B站提供了很多分享方式，我们选择嵌入代码

将复制到的嵌入代码粘贴到我们vscode新写的html代码中，我们可以发现它是一个iframe标签，在网页端打开效果如下图，它是在整个大网页中有一个小框框，在里面显示我们想分享网页的内容。

<iframe src="//player.bilibili.com/player.html?isOutside=true&aid=1989613&bvid=BV1px411A7ir&cid=3074767&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>

我们除了可以通过分享的方式也可以自己编写iframe标签，比如我们想要展示B站主页，以及设置内联框架的大小,效果如下，打开网页的元素审查，可以看到我们写的代码以及我们设置的内敛框架的大小。

<iframe src="http://www.bilibili.com" frameborder="0" width="1300px" height="1000px"></iframe>

最后我们讲iframe标签里的name参数怎么用了，name里面我们可以写任何东西，相当于给这个框架命名，这里我们要用a标签让我们写的第一个网页在这个内联框架打开，这时src就不用写东西，相当于一个空着待使用的框架。我们设置好大小为500x300，代码和实现效果如下：

<iframe src="" name="bro" frameborder="0" width="500px" height="300px"></iframe>

<br>

<a href="1.我的第一个网页.html" target="bro">点击跳转</a>

在一个500x300的全白框架下，有个点击跳转的a标签，我们点一下就可以把a标签里的1.我的第一个网页.html中的内容展示到框架中

感谢您的观看，能和您一起学习是我最大的荣幸！

参考学习资料：iframe内联框架——狂神说

下面是我的微信公众号，与csdn同步更新，有需要的朋友可以关注一波~