: 内联框架标签</h1> <p class="page-updated">最后更新：2026-09-12</p> <h2><iframe>内联框架标签</h2> <p class="tutorial-intro">在当前页面内嵌入另一个网页或资源，形成“画中画”，常用于地图、视频、第三方组件。</p> <div class="tag-quickinfo"><table class="ref-detail-table"><tbody> <tr><th>分类</th><td><span class="tag-badge badge-cat">脚本与嵌入</span></td></tr> <tr><th>内容模型</th><td>流式内容</td></tr> <tr><th>允许的父元素</th><td>接受流式内容的元素</td></tr> <tr><th>闭合标签</th><td>需要 <code></iframe></code> 标签</td></tr> <tr><th>状态</th><td><span class="tag-badge badge-stable">标准</span></td></tr> </tbody></table></div> <h2 id="syntax">📝 语法</h2> <pre class="ref-syntax-block"><code class="language-html"><iframe src="https://example.com"></iframe></code></pre> <h2 id="attributes">⚙️ 属性</h2> <p class="ref-attr-intro">该元素支持全局属性及以下专有属性：</p> <table class="ref-detail-table"><thead><tr><th>属性</th><th>值</th><th>描述</th></tr></thead><tbody> <tr><td><code>src</code></td><td></td><td>要嵌入的页面地址。</td></tr> <tr><td><code>srcdoc</code></td><td></td><td>直接用 HTML 字符串作为嵌入内容（优先级高于 src）。</td></tr> <tr><td><code>width</code></td><td></td><td>嵌入区域的宽度。</td></tr> <tr><td><code>height</code></td><td></td><td>嵌入区域的高度。</td></tr> <tr><td><code>title</code></td><td></td><td>无障碍标题，描述嵌入内容（必填）。</td></tr> <tr><td><code>sandbox</code></td><td></td><td>限制嵌入内容的权限（如 allow-scripts、allow-same-origin）。</td></tr> </tbody></table> <div class="ref-attr-links"> <a href="/cn/html/reference/global-attributes.html" class="ref-attr-link">查看所有全局属性 →</a> <a href="/cn/html/reference/event-attributes.html" class="ref-attr-link">查看所有事件属性 →</a> </div> <h2 id="example" class="example-heading">▶ 示例</h2> <p class="tryit-intro">编辑下方代码，在 playground 中查看实时效果：</p> <div class="tryit-wrapper"><iframe class="tryit-iframe" src="/html/editor.html?lang=zh&mode=playground&embed=1&code=%7B%22html%22%3A%20%22%3C%21--%20%E5%B5%8C%E5%85%A5%E4%B8%80%E6%AE%B5%E5%86%85%E8%81%94%E5%86%85%E5%AE%B9%20--%3E%5Cn%3Ciframe%20srcdoc%3D%5C%22%3Ch1%20style%3D%27color%3Atomato%27%3Eiframe%20%E5%86%85%E9%83%A8%E5%86%85%E5%AE%B9%3C%2Fh1%3E%5C%22%5Cn%20%20%20%20%20%20%20%20width%3D%5C%22300%5C%22%20height%3D%5C%22120%5C%22%20title%3D%5C%22%E7%A4%BA%E4%BE%8B%5C%22%3E%3C%2Fiframe%3E%22%2C%20%22css%22%3A%20%22%22%2C%20%22js%22%3A%20%22%22%7D" sandbox="allow-scripts allow-modals allow-same-origin allow-forms" title="Try It playground">

🌐 浏览器支持

浏览器	Chrome	Edge	Firefox	Safari	Opera
<iframe>	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
所有主流浏览器均支持

提示： iframe 要始终加 title 以利无障碍；用 sandbox 可缩小被嵌入内容的安全风险。

更多案例即将上线，敬请期待。

📚 相关教程

HTML Media HTML iframes

HTML 标签参考手册

查看全部 HTML 标签的语法、属性与示例。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。