【Web前端】探索HTML中的“iframe”标签

一条晒干的咸魚

已于 2024-10-23 22:56:41 修改

阅读量4.7k

点赞数 24

分类专栏： Web前端文章标签： css 前端 html web前端 web 程序人生

于 2024-08-18 21:47:24 首次发布

本文链接：https://blog.youkuaiyun.com/LEECOO666/article/details/141306108

版权

现代网页开发中，<iframe> 标签是一个非常重要的工具。允许我们在一个网页中嵌入另一个网页，对于展示外部内容、应用嵌套或实现复杂的布局设计都非常有用。来一起探讨如何使用 iframe 标签，包括设置高度和宽度、移除边框，以及如何用 iframe 来显示目标链接页面。

一、了解 `<iframe>` 标签

<iframe> 标签是 HTML5 中的一部分，用于嵌入另一个 HTML 页面到当前页面中。它的基本语法如下：

<iframe src="URL" width="宽度" height="高度" frameborder="边框"></iframe>

src 属性指定要嵌入的网页的 URL。
width 和 height 属性用于设置 iframe 的宽度和高度。
frameborder 属性用于设置 iframe 的边框宽度。

二、设置 `iframe` 的高度与宽度

使用 <iframe> 标签时，可以通过 width 和 height 属性来控制其显示的尺寸。设置这两个属性的值通常有两种方式：像素值（例如 600px）和百分比值（例如 100%）。

示例 1：固定尺寸的 `iframe`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fixed Size iFrame</title>
</head>
<body>
    <iframe src="https://www.baidu.com" width="800" height="600" style="border: none;"></iframe>
</body>
</html>