<iframe> 标签在 HTML 中用于嵌入另一个 HTML 文档或外部内容到当前网页中。<iframe>（内联框架）允许在一个网页中嵌套另一个网页，常用于嵌入地图、视频、广告或其他第三方内容。
<iframe> 标签的主要作用：
嵌入外部网页：
- 可以在当前网页中嵌入另一个网页的内容。
- 示例：
<iframe src="https://example.com" width="600" height="400"></iframe>
嵌入多媒体内容：
- 可以嵌入视频、音频等多媒体内容。
- 示例：
<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" width="560" height="315"></iframe>
嵌入地图：
- 可以嵌入地图服务，如 Google Maps。
- 示例：
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3153.8354345093747!2d144.9537353153166!3d-37.81627974202105!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad642af0f11fd81%3A0xf577d8a32f7f8c8e!2sFlinders%20Street%20Station!5e0!3m2!1sen!2sus!4v1625070000000!5m2!1sen!2sus" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
嵌入表单或其他交互内容：
- 可以嵌入表单、调查问卷等交互内容。
- 示例：
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSfX8X8X8X8X8X8X8X8X8X8X8X8X8X8X8X8X8X8X8X8X8X8X8X8/viewform?embedded=true" width="640" height="800" frameborder="0" marginheight="0" marginwidth="0">加载中…</iframe>
<iframe> 标签的常用属性：
src：指定要嵌入的内容的 URL。width和height：指定<iframe>的宽度和高度。frameborder：指定是否显示边框（0 表示无边框，1 表示有边框）。scrolling：指定是否显示滚动条（auto、yes、no）。allowfullscreen：允许<iframe>内容全屏显示。sandbox：对<iframe>内容施加安全限制，防止潜在的安全风险。name：为<iframe>指定一个名称，以便在其他地方引用。loading：指定<iframe>的加载方式（eager或lazy）。
示例代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>iframe 示例</title>
</head>
<body>
<h1>嵌入外部网页</h1>
<iframe src="https://example.com" width="600" height="400" frameborder="0" allowfullscreen></iframe>
<h1>嵌入 YouTube 视频</h1>
<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" width="560" height="315" frameborder="0" allowfullscreen></iframe>
<h1>嵌入 Google 地图</h1>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3153.8354345093747!2d144.9537353153166!3d-37.81627974202105!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad642af0f11fd81%3A0xf577d8a32f7f8c8e!2sFlinders%20Street%20Station!5e0!3m2!1sen!2sus!4v1625070000000!5m2!1sen!2sus" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
<h1>嵌入 Google 表单</h1>
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSfX8X8X8X8X8X8X8X8X8X8X8X8X8X8X8X8X8X8X8X8X8X8X8X8/viewform?embedded=true" width="640" height="800" frameborder="0" marginheight="0" marginwidth="0">加载中…</iframe>
</body>
</html>
示例解析：
<iframe src="https://example.com" width="600" height="400" frameborder="0" allowfullscreen></iframe>：嵌入一个外部网页，设置宽度、高度、无边框和允许全屏显示。<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" width="560" height="315" frameborder="0" allowfullscreen></iframe>：嵌入一个 YouTube 视频，设置宽度、高度、无边框和允许全屏显示。<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3153.8354345093747!2d144.9537353153166!3d-37.81627974202105!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad642af0f11fd81%3A0xf577d8a32f7f8c8e!2sFlinders%20Street%20Station!5e0!3m2!1sen!2sus!4v1625070000000!5m2!1sen!2sus" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>：嵌入一个 Google 地图，设置宽度、高度、无边框和允许全屏显示。<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSfX8X8X8X8X8X8X8X8X8X8X8X8X8X8X8X8X8X8X8X8X8X8X8X8/viewform?embedded=true" width="640" height="800" frameborder="0" marginheight="0" marginwidth="0">加载中…</iframe>：嵌入一个 Google 表单，设置宽度、高度、无边框和无边距。
总结：
<iframe>标签用于在网页中嵌入另一个 HTML 文档或外部内容，如网页、视频、地图、表单等。- 通过设置
src、width、height、frameborder、allowfullscreen等属性，可以控制<iframe>的显示和行为。 <iframe>是嵌入外部内容的强大工具，但需要注意安全性和性能问题。
学在每日，进无止境！更多精彩内容请关注微信公众号。
原文出处：
内容由AI生成仅供参考，请勿使用于商业用途。如若转载请注明原文及出处。
出处地址：http://www.07sucai.com/tech/799.html
版权声明：本文来源地址若非本站均为转载，若侵害到您的权利，请及时联系我们，我们会在第一时间进行处理。
