详解HTML内联标签iframe的使用

淡淡的烟草味﹌ 2023-10-08 21:22 2阅读 0赞

### Iframe内联框架 ###

iframe是HTML标签，它可以把一个网页的框架和内容，嵌入在现有的网页中，也就是说，我们可以在自己的网页中加载别人的网站，当然，iframe标签的一些属性也是我们在使用iframe时所需要了解的，帮助我们更好的使用它。

### 用法以及属性 ###

**用法：**

在页面中直接使用iframe标签

<table style=""> 
 <tbody> 
  <tr> 
   <td style="width:369px;vertical-align:top;height:52px;"><p style="">1</p></td> 
   <td style="width:369px;vertical-align:top;height:52px;"><p style="">&lt;iframe src="" frameborder="0"&gt;&lt;/iframe&gt;</p></td> 
  </tr> 
 </tbody> 
</table>

属性：

src:引入页面的地址

framedorder:是否显示边框，属性值有yes和no,yes表示显示边框，no表示不显示

name:框架标识名

scrolling:是否出现滚动条，属性值有yes，no，auto。yes是显示滚动条，而no表示不显示滚动条。auto是自动适应窗口的大小。

width:定义iframe宽度,可以用px来调整，也可以用百分比%

hight：定义iframe高度，,可以用px来调整，也可以用百分比%

noresize:是否允许调整框架窗口的大小

algin:根据周围元素对齐的方式

接下来来看看它是如何使用的吧。

1.在页面直接使用嵌套

<table style=""> 
 <tbody> 
  <tr> 
   <td style="width:369px;vertical-align:top;height:52px;"><p style="">1</p><p style="">2</p><p style="">3</p></td> 
   <td style="width:369px;vertical-align:top;height:52px;"><p style="">```html</p><p style=""> &lt;iframe src="<a style="color:#0A6CFF;" href="http://www.baidu.com" rel="nofollow">http://www.baidu.com</a>" frameborder="0" width="60%" height="500px" scrolling="auto"&gt;</p><p style=""> &lt;/iframe&gt;</p></td> 
  </tr> 
 </tbody> 
</table>

![e9856a9ac4bab23ad58d9c781f764257.jpeg][]

如何快速入门VUE3.0：进入学习

2.与a标签结合使用

<table style=""> 
 <tbody> 
  <tr> 
   <td style="width:369px;vertical-align:top;height:52px;"><p style="">1</p><p style="">2</p><p style="">3</p><p style="">4</p></td> 
   <td style="width:369px;vertical-align:top;height:52px;"><p style="">&lt;p&gt;&lt;a href="<a style="color:#0A6CFF;" href="http://www.baidu.com" rel="nofollow">http://www.baidu.com</a>" target="right-frame"&gt;百度&lt;/a&gt;&lt;/p&gt;</p><p style=""> &lt;p&gt;&lt;a href="<a style="color:#0A6CFF;" href="http://qq.com" rel="nofollow">http://qq.com</a>" target="right-frame"&gt;腾讯&lt;/a&gt;&lt;/p&gt;</p><p style=""> &lt;iframe src="<a style="color:#0A6CFF;" href="http://qq.com" rel="nofollow">http://qq.com</a>" name="right-frame" width="400px" height="300px"&gt;</p><p style=""> &lt;/iframe&gt;</p></td> 
  </tr> 
 </tbody> 
</table>

![78b90212c53730e786a0f1d9bc1a31a6.jpeg][]

此时点百度这个超链接可以跳转页面

![ef642b11b9c92fbbcaeaaf86c1d1e841.jpeg][]

这两个页面可以实现简单的跳转了。

[e9856a9ac4bab23ad58d9c781f764257.jpeg]: https://img-blog.csdnimg.cn/img_convert/e9856a9ac4bab23ad58d9c781f764257.jpeg
[78b90212c53730e786a0f1d9bc1a31a6.jpeg]: https://img-blog.csdnimg.cn/img_convert/78b90212c53730e786a0f1d9bc1a31a6.jpeg
[ef642b11b9c92fbbcaeaaf86c1d1e841.jpeg]: https://img-blog.csdnimg.cn/img_convert/ef642b11b9c92fbbcaeaaf86c1d1e841.jpeg