html5中实现内容内嵌主要依赖iframe和object两个标签，两者都能将外部资源嵌入当前页面，但适用场景和配置方式有所不同，开发者可以根据实际需求选择合适的标签。
iframe标签内嵌外部页面
iframe是html5中用于嵌入另一个HTML文档的标签，最常见的用途是嵌入外部网页，配置简单且兼容性优秀，大部分现代浏览器都支持。
基本语法
iframe的核心属性是<src>，用于指定要嵌入的外部页面地址，基础写法如下：
<!-- 嵌入百度首页示例 --> <iframe src="https://ipipp.com" width="800" height="600"></iframe>
常用属性说明
- src：必填属性，指定要嵌入的外部资源地址，可以是网页、图片、视频等URL
- width/height：设置嵌入区域的宽度和高度，支持像素值和百分比
- frameborder：设置是否显示边框，值为0时不显示边框，值为1时显示边框，html5中更推荐用CSS控制边框样式
- allowfullscreen：是否允许嵌入内容全屏显示，嵌入视频时通常需要开启该属性
- sandbox：对嵌入内容进行安全限制，比如禁止脚本执行、禁止表单提交等，提升页面安全性
完整示例
下面是一个嵌入外部网页并配置基础样式的完整示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>iframe内嵌示例</title>
<style>
.iframe-container {
width: 100%;
max-width: 1000px;
margin: 20px auto;
border: 1px solid #eee;
border-radius: 8px;
overflow: hidden;
}
iframe {
width: 100%;
height: 500px;
border: none;
}
</style>
</head>
<body>
<div class="iframe-container">
<iframe src="https://ipipp.com"
allowfullscreen
sandbox="allow-same-origin allow-scripts">
<!-- 浏览器不支持iframe时显示的内容 -->
您的浏览器不支持iframe标签，请升级浏览器
</iframe>
</div>
</body>
</html>
object标签内嵌外部资源
object标签可以嵌入多种类型的外部资源，包括网页、图片、音频、视频、PDF等，比iframe的支持范围更广，还支持传递自定义参数。
基本语法
object标签通过<data>属性指定资源地址，<type>属性指定资源的MIME类型，基础写法如下：
<!-- 嵌入PDF文件示例 --> <object data="https://ipipp.com/sample.pdf" type="application/pdf" width="800" height="600"></object>
常用属性说明
- data：必填属性，指定要嵌入的资源地址
- type：指定资源的MIME类型，比如网页是text/html，PDF是application/pdf，MP4视频是video/mp4
- width/height：和iframe一样，设置嵌入区域的尺寸
- name：为嵌入对象指定名称，可用于脚本操作
- form：关联页面中的表单，嵌入的资源可以获取表单数据
内嵌不同资源的示例
内嵌外部网页
<object data="https://ipipp.com" type="text/html" width="100%" height="500">
您的浏览器不支持object标签
</object>
内嵌MP4视频
<object data="video.mp4" type="video/mp4" width="800" height="450">
<!-- 不支持时显示提示 -->
您的浏览器不支持播放该视频
</object>
内嵌PDF文件
<object data="document.pdf" type="application/pdf" width="100%" height="700">
<p>无法加载PDF文件，请<a href="document.pdf">点击下载</a>查看</p>
</object>
两种标签的选择建议
| 对比维度 | iframe | object |
|---|---|---|
| 适用场景 | 主要嵌入外部HTML网页 | 嵌入多种类型资源，包括网页、媒体、文档等 |
| 兼容性 | 兼容性更好，老旧浏览器支持度高 | 部分老旧浏览器对特定资源类型支持有限 |
| 参数配置 | 属性简单，配置成本低 | 可配置参数更多，支持自定义资源加载规则 |
| 安全性 | 支持sandbox属性做安全限制 | 安全限制相对少，需要开发者自行处理 |
如果是嵌入普通外部网页，优先选择iframe，配置简单且兼容性更好。如果需要嵌入PDF、视频等非网页类资源，或者需要自定义更多加载参数，可以选择object标签。实际使用时要根据资源类型和项目需求合理选择，同时注意设置合适的尺寸和安全属性，避免出现布局错乱或安全风险。