首 页IT知识库收藏内容
当前位置:翔宇亭IT乐园IT知识库WEBHTML

HTML iframe框架

减小字体 增大字体 作者:本站  来源:本站整理  发布时间:2023-06-23 18:52:00

在HTML中,框架用于在一个网页中嵌入另外一个网页的内容。

HTML 框架定义方式

在HTML中使用 <iframe> 标签来定义一个框架,其基本格式如下:

<iframe src="url"></iframe>

src属性用于给出内嵌的网页地址。网页地址可以是绝对地址或相对地址

下面是一个例子:

<h1>iframe框架网页的例子</h1>
<iframe src="/other/example-6590.html">
</iframe>

其显示效果如下:

iframe例子

指定框架的宽度和高度

上面的例子是默认情况下的显示效果,在实际中为了较好的显示iframe中网页的内容,可以使用width属性height属性指定iframe的宽度和高度。

<iframe src="/other/example-6590.html" width="600" height="480"></iframe>

 宽度和高度默认单位是像素。我们也可以使用iframe的style属性来设置width和height的值。

<iframe src="/other/example-6590.html" style="width:600px;height:480px;"></iframe>

 设置iframe的边框

我们根据实际情况可以设置iframe的边框。

移除边框

可以使用iframe的frameborder属性或style属性将iframe的边框移除掉。

下面的例子通过将frameborder的值设置为0来实现移除边框的效果。

<iframe src="/other/example-6590.html" frameborder="0"></iframe>

 下面的例子使用style属性移除iframe的边框。

<iframe src="/other/example-6590.html" style="border:none;"></iframe>

 设置iframe边框的粗细和颜色

我们可以使用style属性来设置边框的粗细和颜色。

<iframe src="/other/example-6590.html" style="border:2px solid blue;"></iframe>

上例中,将iframe的边框设置为2个像素的宽度,实线,蓝色。其效果显示如下:

指定iframe边框的粗细和颜色

使用iframe作为链接的目的框架

我们可以使用iframe来作为其它链接的目的框架,即通过设置链接的target属性使打开的网页在iframe中进行显示。

此时,需要为iframe指定name属性,并让链接target的值为name属性的值即可。

下面的例子演示了这种用法。

 <p>
  <a href="/other/example-6596.html" target="myiframe">无序列表</a> |
  <a href="/other/example-6599.html" target="myiframe">HTML颜色</a>
 </p>
 <iframe src="/other/example-6604.html" name="myiframe" style="width:600px; height:480px;"></iframe>

本文的所有例子可以点击这里预览效果

微信搜索“优雅的代码”关注本站的公众号,或直接使用微信扫描下面二维码关注本站公众号,以获取最新内容。

个人成长离不开各位的关注,你的关注就是我继续前行的动力。

知识评论评论内容只代表网友观点,与本站立场无关!

   评论摘要(共 0 条,得分 0 分,平均 0 分) 查看完整评论
愿您的精彩评论引起共鸣,带来思考和价值。
用户名: 查看更多评论
分 值:100分 90分 80分 70分 60分 40分 20分
内 容:
验证码:
关于本站 | 网站帮助 | 广告合作 | 网站声明 | 友情连接 | 网站地图
本站部分内容来自互联网,如有侵权,请来信告之,谢谢!
Copyright © 2007-2024 biye5u.com. All Rights Reserved.