HTML|iframe内联框架

最新推荐文章于 2025-06-22 11:38:11 发布

原创最新推荐文章于 2025-06-22 11:38:11 发布 · 599 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #html

HTML 专栏收录该内容

26 篇文章

订阅专栏

本文介绍了如何使用HTML iframe标签嵌入淘宝网，并通过添加name属性配合a标签实现页面间的切换。通过width和height属性调整iframe大小，展示了内联框架的基本用法和目标跳转技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>

在这里插入图片描述

我们可以看到，在这个网页中就嵌入了淘宝网站，但是它的大小不太合适，我们可以用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>

在这里插入图片描述

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="https://blog.youkuaiyun.com/qq_45985728" target="My_csdn">前往我的博客</a>

</body>
</html>