框架元素并没有换行,所有我们可以推测出<iframe>标签实际上是个内联元素,如何让它换行呢?
为<iframe>的style属性中写入display:block即可。这句代码的意思是按照块元素来显示<iframe>内容。
示例代码如下:
<iframe height=498 width=510 style = "display:block;"src='https://www.toutiao.com/i6790673377188119052/'></iframe>
页面效果如下:
是不是很有意思。
下面我们来介绍一个更有趣的玩法。如图所示:
这个怎么做呢?
这就要介绍<iframe>标签中的另一个属性:name(名字)
示例代码如下:name="iframe"
<iframe name = "iframe" height=498 width=510style = "display:block;"src='https://www.toutiao.com/i6790673377188119052/'allowfullscreen'></iframe>
这里讲个题外话,如果大家了解中国古代的"请神术"的话就会知道这样一个有趣的传说,就是如果我们能叫出鬼神的名字就可以驱使它。
编程也是这样,我们给函数或变量一个名字后,就可以随时随地的驱使它。
现在我们给<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属性删除掉,保存文件后,关闭测试网页,再重新打开,效果如下: