HTML 嵌入元素 object/embed/iframe
embed/object/iframe嵌入外部内容：PDF预览、SVG交互、跨域iframe安全sandbox属性、loading=lazy延迟加载、srcdoc内联HTML · 难度：入门 · +10XP
HTML 嵌入元素 —— object、embed、iframe 的区别
网页不只是文字和图片，还可以嵌入视频、PDF、地图、甚至其他网页。HTML 提供了三个嵌入元素，但很多新手搞不清什么时候用哪个。
iframe —— 嵌入另一个网页（最推荐）
<iframe src="https://www.example.com" width="800" height="600"></iframe>安全属性 sandbox 限制iframe权限：
<iframe src="..." sandbox="allow-scripts allow-same-origin"></iframe>embed —— 嵌入插件内容（很少用）
<embed src="document.pdf" type="application/pdf" width="600" height="400">三者对比
| 标签 | 用途 | 推荐度 |
|---|---|---|
| iframe | 嵌入网页、地图、视频 | 最推荐 |
| embed | 嵌入PDF等插件内容 | 很少使用 |
| object | 旧式多媒体嵌入 | 已过时 |
动手练习
- 基础练习：用 iframe 嵌入百度地图（搜索百度地图生成器获取嵌入代码）。
- 进阶应用：在一个页面中用 iframe 嵌入B站视频，设置 sandbox 属性限制。
- 项目实战：做一个我的收藏网站页面——用3个iframe并排显示3个你喜欢的网站。