html中的target是干什么的,html target属性的使用

首页 > 技术 > 作者:YD1662023-04-16 23:47:48

框架元素并没有换行,所有我们可以推测出<iframe>标签实际上是个内联元素,如何让它换行呢?

为<iframe>的style属性中写入display:block即可。这句代码的意思是按照块元素来显示<iframe>内容。

示例代码如下:

<iframe height=498 width=510 style = "display:block;"src='https://www.toutiao.com/i6790673377188119052/'></iframe>

页面效果如下:

html中的target是干什么的,html target属性的使用(9)

是不是很有意思。

下面我们来介绍一个更有趣的玩法。如图所示:

html中的target是干什么的,html target属性的使用(10)

这个怎么做呢?

这就要介绍<iframe>标签中的另一个属性:name(名字)

示例代码如下:name="iframe"

<iframe name = "iframe" height=498 width=510style = "display:block;"src='https://www.toutiao.com/i6790673377188119052/'allowfullscreen'></iframe>

这里讲个题外话,如果大家了解中国古代的"请神术"的话就会知道这样一个有趣的传说,就是如果我们能叫出鬼神的名字就可以驱使它。

html中的target是干什么的,html target属性的使用(11)

编程也是这样,我们给函数或变量一个名字后,就可以随时随地的驱使它。

现在我们给<iframe>起了个名字叫做"iframe",当然您可以使用其他名字也没问题,但要使用英文或汉语拼音命名,名字是英语字母组合最好。

有了名字之后,<a>标签就要驱使<iframe>标签来显示自己路径下的内容,如何驱使呢?

大家还记得<a>标签中有一个target属性吗?只要让target="iframename"即可!

也就是target="iframe"。示例代码如下:大家要注意的是<a>标签也是内联元素,也需要添加display:block,不然也是排在一列显示。

<a style = "display:block;" target="iframe" href="https://www.toutiao.com/i6790673377188119052/">HTML中的块级元素与内联元素——零基础自学网页制作</a><!--第一个a链接的是头条文章--> <a style = "display:block;" target="iframe" href="https://baike.baidu.com/item/歼-20/1555348?fromtitle=歼20&fromid=1838467&fr=aladdin"> 歼20战斗机百科</a><!--第二个a链接的是百度百科--> <a style = "display:block;"target="iframe" href="image1.jpg">IT美女</a><!--第三个a链接的是本地图片--> <iframe name = "iframe" height=498 width=510style = "display:block;"></iframe>

只要我们为不同的<a>标签赋予target="iframe"的属性,点击这些<a>标签就可以在叫做"iframe"的框架元素中显示自己的页面。这时我们可以把<iframe>标签中的src属性删除掉,保存文件后,关闭测试网页,再重新打开,效果如下:

html中的target是干什么的,html target属性的使用(12)

上一页1234下一页

栏目热文

文档排行

本站推荐

Copyright © 2018 - 2021 www.yd166.com., All Rights Reserved.