中文

HTML 框架

HTML 框架允许你在一个浏览器窗口中显示多个 HTML 文档。在现代 Web 开发中，这通常是通过 <iframe> 标签来实现的。

注意: 传统的基于 <frameset> 和 <frame> 标签的框架技术在 HTML5 中已被废弃。它们存在很多可用性、可访问性和 SEO 方面的问题，不应再被使用。本章将重点介绍现代的 <iframe>。

`<iframe>` - 内联框架

<iframe> (Inline Frame) 标签用于在当前 HTML 文档中嵌入另一个独立的 HTML 文档。它会创建一个矩形区域，该区域内可以显示来自不同来源的内容。

这对于嵌入第三方内容非常有用，例如：

在线视频 (如 YouTube, Vimeo)
交互式地图 (如 Google Maps)
社交媒体帖子
广告横幅

示例:

<iframe src="https://www.example.com" title="示例网站">
</iframe>

`src` 属性

src 属性指定了要嵌入的页面的 URL 地址，这是 <iframe> 最核心的属性。

`width` 和 `height` 属性

你可以使用 width 和 height 属性来指定 <iframe> 框架的尺寸（以像素或百分比为单位）。

<iframe src="demo_iframe.htm" height="200" width="300" title="Iframe 示例"></iframe>

你也可以使用 CSS 来控制其尺寸，这在响应式设计中是更推荐的做法。

iframe {
  width: 100%;
  height: 400px;
  border: none; /* 移除默认边框 */
}

`title` 属性

为 <iframe> 提供一个 title 属性对于可访问性至关重要。屏幕阅读器会读出这个标题，告诉用户这个内联框架中包含什么内容，帮助他们决定是否要与之交互。

移除边框

默认情况下，<iframe> 会带有一个边框。通常我们希望移除它以实现无缝嵌入。这可以通过 CSS 的 border 属性来实现：

<iframe src="demo_iframe.htm" style="border:none;" title="Iframe 示例"></iframe>

或者在样式表中定义：

iframe { border: 0; }

`<iframe>` 的 `target` 属性

<iframe> 可以作为链接的目标。如果你在一个页面中有一个链接，并且希望点击它后，链接的内容在 <iframe> 中显示，你可以这样做：

为 <iframe> 设置一个 name 属性。
将链接 <a> 标签的 target 属性设置为 <iframe> 的 name 值。

示例:

<iframe src="default.html" name="myFrame" height="300" width="500"></iframe>

<p><a href="https://www.w3.org" target="myFrame">在 Iframe 中打开 W3.org</a></p>

点击链接后，W3C 的网站将会加载到名为 myFrame 的 <iframe> 中。