共计 2027 个字符，预计需要花费 6 分钟才能阅读完成。
现代网页开发中， 标签是一个非常重要的工具。允许我们在一个网页中嵌入另一个网页，对于展示外部内容、应用嵌套或实现复杂的布局设计都非常有用。来一起探讨如何使用 iframe 标签，包括设置高度和宽度、移除边框，以及如何用 iframe 来显示目标链接页面。
一、了解 标签
标签是 HTML5 中的一部分，用于嵌入另一个 HTML 页面到当前页面中。它的基本语法如下：
-
src 属性指定要嵌入的网页的 URL。 -
width 和 height 属性用于设置 iframe 的宽度和高度。 -
frameborder 属性用于设置 iframe 的边框宽度。
二、设置 iframe 的高度与宽度
使用 标签时，可以通过 width 和 height 属性来控制其显示的尺寸。设置这两个属性的值通常有两种方式：像素值（例如 600px）和百分比值（例如 100%）。
示例 1：固定尺寸的 iframe
Fixed Size iFrame
在这个示例中，创建了一个宽 800 像素、高 600 像素的 iframe。通过在 style 属性中设置 border: none;，去除了边框的显示。
示例 2：响应式 iframe
为了使 iframe 自适应容器的宽度，我们可以使用百分比值。下面的示例展示了如何创建一个宽度为页面宽度的 100% 的 iframe，高度为容器宽度的 50%。
Responsive iFrame
这个示例中，使用了一个包含 iframe 的容器 div。通过设置容器的 padding-top，能够保持 iframe 的纵横比为 16:9，并且使其自适应页面宽度。
三、移除 iframe 的边框
默认情况下，许多浏览器会为 iframe 显示边框。可以通过设置 frameborder 属性或使用 CSS 来移除这些边框。
示例 1：使用 frameborder 属性
设置 frameborder 属性为 0 可移除边框。这种方法已被 HTML5 弃用，建议使用 CSS。
示例 2：使用 CSS
iFrame without Border
这个示例中，通过 CSS 中的 border: none; 去除了 iframe 的边框。这是移除边框的推荐方法，符合现代浏览器的标准。
四、使用 iframe 来显示目标链接页面
iframe 最常见的用途之一就是嵌入外部链接。这可以用来展示来自其他网站的内容，比如视频、地图或者其他信息。使用 iframe 时，需要注意目标网站的安全策略，有些网站可能会阻止被嵌入。
示例 1：嵌入 Gaode Maps
html
Embedding Gaode Maps
My Favorite Place
这个示例中，嵌入了 Gaode Maps 的一部分，展示了小麦岛公园的地图。通过 style="border:0;" 去除了边框，allowfullscreen 属性使地图可以全屏显示。
示例 2：嵌入 Bilibili 视频
Embedding Bilibili Video
Watch this Video
这个示例中，嵌入了一个 Bilibili 视频。设置了 allowfullscreen 属性，允许用户将视频全屏观看。
注意：
出于有些网页不希望被嵌套, 响应头中有一选项
X-Frame-Options
他有三个可配置值
DENY：表示该网站页面不允许被嵌套，即便是在自己的域名的页面中也不能进行嵌套。
SAMEORIGIN：表示该页面可以在相同域名页面中被嵌套展示。
ALLOW-FROM uri：表示该页面可以在指定来源页面中进行嵌套展示。
如有表述错误及欠缺之处敬请批评指正。
原文地址: 【Web 前端】探索 HTML 中的“iframe”标签
