是html原生嵌入网页的最直接方式，需必填src属性（绝对url或相对路径），支持独立渲染、样式脚本隔离；推荐补充title、loading="lazy"、sandbox等属性提升可访问性、性能与安全性。
用 <iframe></iframe> 标签就能在当前页面里嵌入另一个网页，这是 HTML 原生、最直接也最通用的方式。它会开辟一个独立的渲染区域，加载目标页面，彼此样式和脚本互不干扰。
基础写法与必填属性
src 是唯一必需的属性，必须指定要嵌入的网页地址（绝对 URL 或相对路径）。其他如宽高、描述等都可选，但建议补全以提升体验和可访问性。
- 写法示例：
<iframe src="https://example.com" width="100%" height="600"></iframe> - 本地 HTML 文件可用相对路径，比如
src="about.html"，但需确保文件存在且服务器环境运行（file://协议下部分功能受限） - 不支持 iframe 的极老浏览器会显示标签内的内容（如提示文字），不过现在基本可忽略该降级场景
关键实用属性推荐
现代开发中，这几个属性既提升安全性，又兼顾性能与无障碍：
-
title：必须加，用于屏幕阅读器识别，例如
title="用户登录表单" - loading="lazy"：对非首屏 iframe 延迟加载，减少初始资源压力
-
sandbox：默认禁用脚本、表单提交、弹窗等能力，按需放开，例如
sandbox="allow-scripts allow-same-origin" -
allow：精细控制权限，如
allow="geolocation; microphone"，常配合视频或地图使用 -
frameborder 已废弃，改用 CSS 控制边框：
style="border: none;"
常见嵌入场景写法
不同用途有对应惯用配置，注意目标页面是否允许被嵌入（受 X-Frame-Options 或 Content-Security-Policy 限制）：
-
嵌入 B 站视频：
<iframe src="https://player.bilibili.com/player.html?bvid=xxx" width="100%" height="450" title="教学视频" allowfullscreen loading="lazy"></iframe> -
嵌入 Google 地图：
<iframe src="https://www.google.com/maps/embed?pb=..." width="100%" height="450" title="公司位置" loading="lazy" style="border:0;" allowfullscreen></iframe> -
嵌入内部子页面（如协议页）：
<iframe src="terms.html" width="100%" height="500" title="服务条款" sandbox="allow-scripts"></iframe>
替代方案简要对比
虽然 <iframe></iframe> 是首选，但某些场景可考虑其他方式：
- ：支持 fallback 内容，适合侧边栏等非核心模块，但兼容性和行为稳定性略逊于 iframe
-
JavaScript 动态加载：用
fetch()读取 HTML 字符串再注入innerHTML，内容能复用主页面样式，但跨域受限、无独立上下文 - 服务端包含（SSI）或构建时内联：适合静态站点，由服务端或工具提前合并 HTML，客户端零额外请求
- frameset / frame：HTML5 已废弃，不可用于现代页面结构
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
