HTML 嵌入网页

HTMLHTMLBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

介绍

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

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


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/MultimediaandGraphicsGroup(["`Multimedia and Graphics`"]) html(("`HTML`")) -.-> html/AdvancedElementsGroup(["`Advanced Elements`"]) html/MultimediaandGraphicsGroup -.-> html/embed_media("`Embedding External Media`") html/AdvancedElementsGroup -.-> html/inter_elems("`Interactive and Dynamic Elements`") html/AdvancedElementsGroup -.-> html/custom_attr("`Custom Data Attributes`") subgraph Lab Skills html/embed_media -.-> lab-70775{{"`HTML 嵌入网页`"}} html/inter_elems -.-> lab-70775{{"`HTML 嵌入网页`"}} html/custom_attr -.-> lab-70775{{"`HTML 嵌入网页`"}} end

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

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

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

设置 <iframe> 的高度和宽度

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

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

使用 sandboxallow 属性控制显示功能

你可以使用 sandboxallow 属性来控制 <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,并使用 heightwidth 属性根据需求调整显示效果。你还可以使用 sandboxallow 属性来控制 <iframe> 的各种功能。此外,请确保为不支持 <iframe> 标签的浏览器添加替代内容。

您可能感兴趣的其他 HTML 教程