嵌入技术可以说为网页的功能完善做出了不少的贡献
<iframe> 用于嵌入其他网页它提供了一种将整个 web 页嵌入到另一个网页的方法，看起来就像那个 web 页是另一个网页的一个 <img> 或其它元素一样。不过与 <img> 不同，<iframe> 不是空元素，需要闭合标签 </iframe>
拿来主义
<iframe> 使用场景可以很广泛，它使得我们直接通过 API 实现特定的功能，例如：
- 嵌入你喜欢的视频
- 在你的网页中也能播放喜欢的歌曲
- 嵌入 Bing 地图
- 假如你留心之前关于 HTML 的文章，以 HTML-网站架构 | Shaw 为例，仅供参考的答案可以在集成开发环境 Codepen 中编写之后嵌入到博客中
Bilibili 视频
打开 哔哩哔哩
找到自己喜欢的视频，这里我选择视频 CNBC Markets Now | August 8, 2022 | Michael Santoli
首先一键三连（开个玩笑），然后选择分享中的嵌入代码
1
2
3
4
5
6<iframe src="//player.bilibili.com/player.html?aid=471890055&bvid=BV1UT411w7MS&cid=799999293&page=1"
scrolling="no"
border="0"
frameborder="no"
framespacing="0"
allowfullscreen="true"> </iframe>将代码黏贴到 HTML 中
网易云音乐
打开 网易云音乐
选择一首喜欢的歌曲
点击生成外链播放器
1
2
3
4
5
6
7<iframe frameborder="no"
border="0"
marginwidth="0"
marginheight="0"
width=330
height=86
src="//music.163.com/outchain/player?type=2&id=27471609&auto=0&height=66"></iframe>将代码黏贴到 HTML 中
Codepen
新建作品
保存之后选择 Embed，选择使用
iframe方式进行嵌入（不过官方推荐使用 HTML 进行嵌入）1
2
3
4
5
6
7
8
9
10
11
12<p class="codepen"
data-height="300"
data-default-tab="html,result"
data-slug-hash="gOjRqXe"
data-editable="true"
data-user="KiritoShaw"
style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/KiritoShaw/pen/gOjRqXe">
网站结构</a> by KiritoShaw (<a href="https://codepen.io/KiritoShaw">@KiritoShaw</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
See the Pen 网站结构 by KiritoShaw (@KiritoShaw) on CodePen.