iframe 元素

<iframe> 元素可以让我们在页面上嵌入另一个网页，比如以下的代码就是在页面中嵌入三眼鸭的官网，并将其宽度设置为600像素，高度设置为400像素。

<iframe
    src="https://3yya.com/"
    width="600"
    height="400"
></iframe>

$$demo

<iframe src="https://3yya.com/" width="600" height="400"

</iframe>

$$

嵌入 B站页面

很多时候一些网站允许你嵌入他们的内容，这样他们的内容就能更好地被传播。比如说，B站等很多视频网站允许你把他们的视频嵌入到你的网站中。

当我们点击 B站视频下方的分享按钮后，可以看到一个嵌入代码的选项，我们点击复制并粘贴到网页中。

<iframe
    src="//player.bilibili.com/player.html?aid=763134173&bvid=BV1P64y187Fh&cid=414623610&page=1"
    scrolling="no"
    border="0"
    frameborder="no"
    framespacing="0"
    allowfullscreen="true"
>
</iframe>

从 B 站的例子中我可以看到使用的是 <iframe> 元素，与图片视频类似，页面来源也是放在 src 属性当中。

$$demo

<iframe

src="//player.bilibili.com/player.html?aid=763134173&bvid=BV1P64y187Fh&cid=414623610&page=1"

scrolling="no"

border="0"

frameborder="no"

framespacing="0"

allowfullscreen="true"

</iframe>

$$

属性

属性名	描述
src	嵌入网页的地址。
width	嵌入元素的宽度。
height	嵌入元素的高度。
frameborder	是否有边框。<ul><li>1：有边框。（默认值）</li><li>0：没有边框。</li></ul>

练习

1. 将你喜欢的 B 站视频嵌入到网页中，并调整合适的宽高。