html(9)-iframe内联框架

最新推荐文章于 2022-11-21 14:34:51 发布

enjoy_code_

最新推荐文章于 2022-11-21 14:34:51 发布

阅读量169

点赞数

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/enjoy_code_/article/details/112725439

版权

html 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文介绍了HTML中的内联框架（iframe）如何用于在一个页面中嵌入另一个页面，例如嵌入百度搜索页面。通过设置iframe的src、height和width属性可以调整显示的内容和尺寸。进一步，展示了如何结合<a>标签使用iframe，通过target属性实现点击链接在iframe中打开页面。此外，还提到可以利用iframe嵌入如B站视频等外部资源，提升网页的交互体验。

摘要由CSDN通过智能技术生成

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。

比如用下面这行代码，可以使得页面中嵌入显示百度搜索页面：

<iframe src="//www.baidu.com"  height="1000px" width="800px"></iframe>

注意：

src是要嵌入的资源地址，如果是互联网上的资源，比如百度搜索页面，记得在开头增添//表示这是公网资源。
height和width见名知义，自定义这个嵌入窗口的大小。

在这里插入图片描述

下面是一些进阶操作：

<a>标签和<iframe>标签的结合：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe内联框架学习</title>
</head>
<body>
<!--src留空，为name属性夫一个值-->
<iframe src="" name="百度搜索" height="400px" width="400px"></iframe>
<!--链接标签的target属性填入iframe的name值-->
<a href="//www.baidu.com" target="百度搜索">打开搜索页面</a>

</body>
</html>

打开这个html的初始状态：
在这里插入图片描述
此时点击一下“打开搜索页面”，
页面就会变成下面这样：

后记

最后，内联框架有很多可以应用的地方，类似桌面版b站，把鼠标移到分享这里就有官方的嵌入代码的链接，把这个链接直接放到你的html中，你会惊讶的发现，你可以利用b站官方的带宽和服务器，将视频嵌入到你博客或别的网站上进行播放。按照这个原理，那么别的网站的一些资源应该也有方法嵌入我们的网站，慢慢钻研去咯 ~ - ~!。
在这里插入图片描述