HTML 内嵌框架
在开发网页时，你可能希望在当前页面中嵌入其他网页内容。比如，你想在你的页面中展示一段来自其他网站的视频、地图，甚至是另一个网页的整体内容，这时候就可以使用 <iframe>（内嵌框架）。
什么是 <iframe>？
<iframe> 标签用于在网页中嵌入另一个 HTML 页面。被嵌入的网页会显示在一个指定区域内，就像你在页面中“开了一个小窗口”。
基本语法如下：
<iframe src="https://www.example.com" width="600" height="400"></iframe>
属性说明：
src：设置要嵌入页面的 URL。width：设置 iframe 的宽度。height：设置 iframe 的高度。
示例：嵌入一个网页
下面这个例子会在当前页面中嵌入 GetIoT.tech 的首页：
<iframe src="https://getiot.tech" width="100%" height="400"></iframe>
你可以把 src 替换为任意你想要嵌入的网址，前提是对方网站允许 iframe 加载（有的网站会通过 HTTP 头阻止这种嵌入行为）。
显示效果：
设置边框
你可以通过 CSS 来控制 iframe 的边框。比如下面这个例子移除了边框：
<iframe src="https://getiot.tech" style="border:none;" width="600" height="400"></iframe>
你也可以添加边框样式：
<iframe src="https://getiot.tech" style="border:2px solid #ccc;" width="600" height="400"></iframe>
使用 title 提升无障碍性
建议你为每个 <iframe> 添加 title 属性，这样可以让使用屏幕阅读器的用户知道 iframe 的作用。例如：
<iframe src="https://getiot.tech" title="人人都懂物联网" width="600" height="400"></iframe>
防止 iframe 滚动条
你可以使用 CSS 或 HTML 属性来控制 iframe 是否显示滚动条。
方法一：通过 scrolling 属性（已废弃，不推荐）
<iframe src="https://getiot.tech" width="600" height="400" scrolling="no"></iframe>
虽然 scrolling 依然可用，但它已经不被 HTML5 推荐，最好使用 CSS 来控制。
方法二：使用 CSS overflow 属性（推荐）
<iframe src="https://getiot.tech" width="600" height="400" style="overflow:hidden;"></iframe>
注意：你无法控制被嵌入页面的真实滚动行为，除非该页面允许你控制（同源或跨域开放权限）。
设置 iframe 内容加载时的替代文字
你可以在 <iframe> 标签对之间插入文字，作为 iframe 无法加载时的备用内容，例如：
<iframe src="no-such-page.html" width="600" height="400">
很抱歉，您的浏览器不支持 iframe 标签，或页面加载失败。
</iframe>
安全性提示：使用 sandbox 属性
为了增强安全性，HTML5 提供了 sandbox 属性，它可以限制 iframe 内部页面的行为。
<iframe src="https://getiot.tech" sandbox></iframe>
你也可以指定一些例外权限，例如：
<iframe src="https://getiot.tech" sandbox="allow-scripts allow-same-origin"></iframe>
常见的 sandbox 权限包括：
allow-same-origin：允许 iframe 与当前页面处于同源策略。allow-scripts：允许执行 JavaScript 脚本。allow-forms：允许提交表单。allow-popups：允许弹出窗口。
小结
<iframe> 是一个非常实用的 HTML 标签，可以让你在页面中嵌入其他网站或页面内容。你可以通过 src 设置嵌入地址，通过 CSS 控制样式，还可以使用 sandbox 来提升安全性。虽然 iframe 功能强大，但使用时也要注意跨域限制和性能问题。掌握了这些基础知识后，你就可以灵活地在网页中嵌入地图、视频、工具页等各种资源啦。
