526互联

HTML学习笔记六：html-body-框架元素

发布时间 2023-12-05 18:04:29作者: yysocket

HTML学习笔记六：html-body-框架元素

MDN元素查询地址

所有的html的元素我们都可以通过以下地址进行相关的查询和理解。
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meta

框架标签 iframe

可以通过使用iframe标签在当前页面的框架内嵌入一个外部链接的网页。
可用于网页嵌入式广告等应用场景。
可嵌入所有链接的内容: 网页，图片，视频，gif，广告等。

iframe标签属性

代码示例：

<iframe src="https://www.taobao.com" frameborder="1" width="450" height="750"></iframe>

  1. src :
    通过src属性值可指向一个链接的路径，
    然后可以将相关的链接嵌入到iframe的框框内。

  2. frameborder:
    iframe内嵌框的边框。

  3. width :
    iframe内嵌框的宽度。

  4. height :
    iframe内嵌框的高度。

  5. name:（不写src时候，可以通过name进行关联）
    通过iframe属性中name的值和a标签、form标签中属性target的值关联使用

name属性特殊用法：
1、name属性与超链接a标签的target属性配合使用，点击后将超链接的内容在嵌入的iframe框架内展示
2、name属性可以与form标签的target属性配合使用，提交表单后将返回的内容在嵌入的iframe框架内显示

示例代码如下：

<a href="http://www.cmentech.com" target="tt">一个官网</a>
<a href="https://www.taobao.com" target="tt">淘宝一下</a>
<form action="http://so.toutiao.com/search" target="tt">
	头条搜索：
	<input type="text" name="keyword">
	<button>确定</button>
</form>
<br>
<iframe name="tt" frameborder="1" width="450" height="750"></iframe>

<iframe name="tb" frameborder="1" width="800px" height="500px"></iframe>

3、width: 框架的宽

4、height: 框架的高

5、frameborder: 是否显示边框，0/1