HTML教程-HTML<iframes>标签
HTML的iframe（内联框架）用于在当前HTML文档中嵌入另一个网页。iframe是一个矩形区域，用于显示另一个文档的内容。
网页内容和iframe可以通过JavaScript进行交互。
语法
使用<iframe>标签定义HTML的iframe：
<iframe src="URL"></iframe>在这里，src属性指定了嵌入框架页面的网址（URL）。
设置iframe的宽度和高度
您可以使用width和height属性来设置iframe的宽度和高度。默认情况下，这些属性的值以像素为单位，但也可以以百分比形式设置，例如50%，60%等。
示例（像素）
<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes示例</h2>
<p>使用`height`和`width`属性来指定iframe的大小：</p>
<iframe src="https://www.javatpoint.com/" height="300" width="400"></iframe>
</body>
</html>示例（百分比）
<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes</h2>
<p>您可以使用`height`和`width`属性来指定iframe的大小：</p>
<iframe src="https://www.javatpoint.com/" height="50%" width="70%"></iframe>
</body>
</html>您还可以使用CSS来设置iframe的高度和宽度。
示例
<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes</h2>
<p>使用CSS的`height`和`width`属性来指定iframe的大小：</p>
<iframe src="https://www.javatpoint.com/" style="height:300px;width:400px"></iframe>
</body>
</html>去除iframe的边框
默认情况下，iframe周围有一个边框。您可以使用style属性和CSS的border属性来去除边框。
示例
<!DOCTYPE html>
<html>
<body>
<h2>去除iframe的边框</h2>
<p>这个示例的iframe没有任何边框</p>
<iframe src="https://www.javatpoint.com/" style="border:none;"></iframe>
</body>
</html>您还可以更改iframe的边框大小、颜色和样式。
示例
<!DOCTYPE html>
<html>
<body>
<h2>自定义iframe的边框</h2>
<iframe src="https://www.javatpoint.com/" style="border:2px solid tomato;"></iframe>
</body>
</html>链接的iframe目标
您可以使用iframe为链接设置目标框架。链接的target属性必须引用iframe的name属性。
示例
<!DOCTYPE html>
<html>
<body>
<h2>Iframe - 链接的目标框架</h2>
<iframe height="300px" width="100%" src="new.html" name="iframe_a"></iframe>
<p><a href="http://www.javatiku.cn" target="iframe_a">JavaTpoint.com</a></p>
<p>iframe的名称和链接的目标必须具有相同的值，否则链接将无法在框架中打开。</p>
</body>
</html>使用iframe嵌入YouTube视频
您还可以使用<iframe>标签在网页上添加YouTube视频。附加的视频将在网页上播放，并且您可以设置高度、宽度、自动播放等视频属性。
以下是在网页上添加YouTube视频的步骤：
- 打开您想要嵌入的YouTube视频。
- 点击视频下方的"分享（Share）"按钮。
- 点击"嵌入（Embed）"选项。
- 复制HTML代码。
- 将代码粘贴到您的HTML文件中。
- 根据需要更改高度、宽度和其他属性。
示例
<iframe width="550" height="315" src="https://www.youtube.com/embed/JHq3pL4cdy4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen style="padding:20px;"></iframe>
<iframe width="550" height="315" src="https://www.youtube.com/embed/O5hShUO6wxs" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" style="padding:20px;"></iframe><iframe>的属性
| 属性名 | 值 | 描述 |
|---|---|---|
allowfullscreen | 如果为true，则可以在全屏模式下打开该框架。 | |
height | 像素 | 定义嵌入的iframe的高度，默认高度为150像素。 |
name | 文本 | 给iframe指定一个名称。如果要在一个框架中创建链接，则name属性非常重要。 |
frameborder | 1或0 | 定义是否为iframe添加边框（在HTML5中不支持）。 |
width | 像素 | 定义嵌入框架的宽度，默认宽度为300像素。 |
src | URL | src属性用于指定要加载到iframe中的路径名或文件名。 |
sandbox | ||
| 此属性用于对框架内容应用额外的限制。 | ||
allow-forms | 如果不使用此关键字，则阻止表单提交。 | |
allow-popups | 启用弹出窗口，如果不应用此关键字，则不会打开任何弹出窗口。 | |
allow-scripts | 启用脚本运行。 | |
allow-same-origin | 如果使用此关键字，则嵌入的资源将被视为从相同来源下载的。 | |
srcdoc | HTML代码 | 此属性用于内联框架，其中指定了嵌入的HTML代码。 |
loading | "lazy"、"eager" 或 "auto" | 此属性用于指定框架的加载方式。 |
referrerpolicy | 例如："no-referrer"、"origin"、"unsafe-url"等 | 此属性用于指定框架在获取其他资源时使用的引用策略。 |
title | 文本 | 此属性用于为iframe提供标题。 |
align | "left"、"right"、"top"、"middle"、"bottom"等 | 此属性用于在嵌入框架周围指定对齐方式。 |
请注意，某些属性可能在特定的HTML版本或浏览器中不受支持。在使用这些属性之前，请确保检查其兼容性。
