HTML 嵌入网页

介绍

<iframe> 标签用于将一个网页嵌入到另一个网页中。在这个实验中，你将学习如何使用 <iframe> 标签在当前网页中显示另一个网页。

注意：你可以在 index.html 中练习编码，并学习 如何在 Visual Studio Code 中编写 HTML。请点击右下角的 'Go Live' 以在端口 8080 上运行 Web 服务。然后，你可以刷新 Web 8080 标签以预览网页。

在 HTML 文件中添加 <iframe> 标签

要在 HTML 文件中添加 <iframe>，你需要使用 <iframe> 的开始和结束标签，并包含 src 属性，该属性指定要显示的网页的 URL。以下是一个 <iframe> 标签的示例：

<iframe src="https://www.example.com"></iframe>

设置 <iframe> 的高度和宽度

你可以使用 height 和 width 属性根据需求调整 <iframe> 的大小。height 和 width 属性可以接受像素、百分比或 em 单位的值。以下是一个示例：

<iframe src="https://www.example.com" height="500" width="500"></iframe>

使用 sandbox 和 allow 属性控制显示功能

你可以使用 sandbox 和 allow 属性来控制 <iframe> 的各种功能，例如允许全屏显示、启用 <iframe> 内的脚本执行等。以下是一个示例：

<iframe
  src="https://www.example.com"
  sandbox="allow-modals allow-forms"
></iframe>

使用替代内容

建议在使用 <iframe> 标签时添加 alternative 内容，以便在浏览器不支持内联框架时显示。你可以在 <iframe> 的开始和结束标签之间添加替代文本，如果 <iframe> 标签不被支持，这些文本将会显示。以下是一个示例：

<iframe src="https://www.example.com" height="500" width="500"
  >Your browser does not support inline frames.</iframe
>

总结

恭喜！你已经学会了如何使用 <iframe> 标签在当前网页中显示另一个网页。记得将 src 属性设置为你想显示的网页的 URL，并使用 height 和 width 属性根据需求调整显示效果。你还可以使用 sandbox 和 allow 属性来控制 <iframe> 的各种功能。此外，请确保为不支持 <iframe> 标签的浏览器添加替代内容。