0
点赞
收藏
分享

微信扫一扫

HTML|iframe内联框架


HTML|iframe内联框架

1.iframe标签

src属性为引用页面的地址

我们在iframe标签中将src属性填写为淘宝网的网址:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iframe内敛框架</title>
</head>
<body>

<iframe src="https://www.taobao.com/"></iframe>

</body>
</html>

HTML|iframe内联框架_html

我们可以看到,在这个网页中就嵌入了淘宝网站,但是它的大小不太合适,我们可以用width和height属性对其进行调整:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iframe内敛框架</title>
</head>
<body>

<!--
iframe标签:
src是地址
-->
<iframe src="https://www.taobao.com/" width="1200" height="600"></iframe>

</body>
</html>

HTML|iframe内联框架_html_02

2.name属性

我们可以把iframe标签添加一个name属性:

<iframe src="https://www.taobao.com" name="My_csdn" width="1200" height="600"></iframe>

这里应该能猜到我要做什么了,我再添加一个a标签,将其href属性设置为我的博客网址,target设置为这个内置板块的name:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iframe内敛框架</title>
</head>
<body>

<!--
iframe标签:
src是地址
-->
<iframe src="https://www.taobao.com" name="My_csdn" width="1200" height="600"></iframe>

<!--
a标签将target设置为内联板块的name就可以使用a标签将淘宝切换为我的博客
-->
<a href="target="My_csdn">前往我的博客</a>

</body>
</html>

打开网页可以看到再内联网页的下方多了我们写上的a标签:

HTML|iframe内联框架_html5_03

点击:

HTML|iframe内联框架_a标签_04

这样就可以实现内联网页的跳转了。

人生没有白走的路,每一步都算数!


举报

相关推荐

0 条评论