HTML内联框架

前言:

我们有时候打开网页时会有广告窗的出现,而这些窗口并不是来自于本站的,而是来自于外部网页,只是被引用到了自己网页中而已。这一种技术可以通过内联来实现。

标签介绍:

HTML 内联框架元素 (<iframe>) 表示嵌套的。它能够将另一个 HTML 页面嵌入到当前页面中,并且它自带了一些有用的特性,如调整大小、滚动等。

使用介绍:

基本操作框架:

<iframe src="路径"></iframe>

例子(以CSDN为例):
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><iframe src="https://www.csdn.net/"></iframe>
</body>
</html>

 效果如下:

部分属性(展示部分):

1)src   

~用于指定此处的URL地址(路径)

例子:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><iframe src="https://www.csdn.net/"></iframe>
</body>
</html>

2)  width和height   

~指定框架的长宽

例子:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><iframe src="https://www.bilibili.com/" width="200" height="1000"></iframe>
</body>
</html>

3)name 

~指定iframe的名称

例子:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><iframe name="B站" src="https://www.bilibili.com/" width="222" height="333"></iframe>
</body>
</html>

4)allowfullscreen

~是否允许全屏播放

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><iframe allowfullscreen="yes" src="https://www.bilibili.com/" width="555" height="555"></iframe>
</body></html>

5)allowtransparency 

~允许内嵌框架指定透明度。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><iframe allowtrans="yes" src="https://www.bilibili.com/" width="555" height="555"></iframe>
</body></html>

6) scrolling 

~是否显示滚动条,

~决定是否显示滚动条,可以使用"auto"自动决定是否显示滚动条,或者设为"yes"和"no"指定是否一直显示或隐藏滚动条

例子:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><iframe scrolling = "no" src="https://www.bilibili.com/" width="222" height="333"></iframe>
</body>
</html>

7)  frameborder 

~是否显示边框

~可以使用值"0"、“1"和"no”、"yes"来指定是否显示边框

例子:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><iframe frameborder="yes" src="https://www.bilibili.com/" width="222" height="333"></iframe>
</body>
</html>

【由于变化不是很明显,就不展示参考图了】

8) id 为框架的唯一标识

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><iframe id="B站" src="https://www.bilibili.com/" width="555" height="555"></iframe>
</body></html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/623695.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

自动化测试-如何优雅实现方法的依赖

在复杂的测试场景中&#xff0c;常常会存在用例依赖&#xff0c;以一个接口自动化平台为例&#xff0c;依赖关系&#xff1a; 创建用例 --> 创建模块 --> 创建项目 --> 登录。 用例依赖的问题 • 用例的依赖对于的执行顺序有严格的要求&#xff0c;比如让被依赖的方…

数据结构——栈(C++实现)

数据结构——栈 什么是栈栈的实现顺序栈的实现链栈的实现 今天我们来看一个新的数据结构——栈。 什么是栈 栈是一种基础且重要的数据结构&#xff0c;它在计算机科学和编程中扮演着核心角色。栈的名称源于现实生活中的概念&#xff0c;如一叠书或一摞盘子&#xff0c;新添加…

sort用法

前两个参数传范围&#xff0c;可以是迭代器也可以是指针&#xff0c;最后传比较方法。该方法判断cmp的第一个参数是否在第二个参数之前&#xff0c;比如这里想从小到大排序&#xff0c;x为小的时候在前&#xff0c;所以当x<y的时候我们返回1.

材料物理 笔记-6

原内容请参考哈尔滨工业大学何飞教授&#xff1a;https://www.bilibili.com/video/BV18b4y1Y7wd/?p12&spm_id_frompageDriver&vd_source61654d4a6e8d7941436149dd99026962 或《材料物理性能及其在材料研究中的应用》&#xff08;哈尔滨工业大学出版社&#xff09; 文…

再也不想用丑东西了!一个高颜值的备忘录,分享给你们【文末领源码】

谁工作中不得有点丢三落四的&#xff0c;但是被老大点名批评确实有点过不去了&#xff0c;提醒小伙伴们把必要的事情挂出来&#xff0c;同事说虽然已经有一款系统&#xff0c;但展示的不好看&#xff0c;根本不想用&#xff0c;于是找到了一款颜值还不错的备忘录工具 -- memo …

前端开发框架BootStrap

版权声明 本文原创作者&#xff1a;谷哥的小弟作者博客地址&#xff1a;http://blog.csdn.net/lfdfhl BootStrap概述 Bootstrap是一个开源的前端框架&#xff0c;它由Twitter的设计师和开发者创建并维护。Bootstrap提供了许多现成的Web组件&#xff0c;可帮助开发者快速设计和…

免单优选电商模式:激发购买欲望的创新销售策略

免单优选电商模式&#xff0c;作为一种创新的销售策略&#xff0c;其核心在于通过价格优惠、渐进式激励和社交网络结合&#xff0c;有效刺激消费者的购买行为&#xff0c;进而推动销售业绩的快速增长。 一、合法合规&#xff0c;规避多层次奖励风险 该模式坚持合法合规的运营原…

【Web】VS Code 插件

专栏文章索引&#xff1a;Web 有问题可私聊&#xff1a;QQ&#xff1a;3375119339 目录 一、安装步骤 二、插件 1.Chinese (Simplified) (简体中文) 2.open in browser 3.vscode-icons 4.Live Server 5.Live Server Preview 6.翻译(英汉词典) 一、安装步骤 点击 “扩…

R-Tree的概念

R-Tree可以称作空间索引的基石&#xff0c;目前流行的时空索引架构都是基于R-Tree衍生而来。 R-Tree的概念 R-Tree 主要用于索引多维信息&#xff08;如地理点坐标、矩形或多边形&#xff09;的一种数据结构。R -Tree是由Guttman在1984年提出的&#xff0c;在理论和应用上都有…

软考-系统集成项目管理中级--进度管理(输入输出很重要!!!本章占分较高,着重复习)

本章历年考题分值统计(16年11月及以后按新教材考的&#xff09; 本章重点常考知识点汇总清单(学握部分可直接理解记忆) 12、参数估算:参数估算是一种基于历史数据和项目参数&#xff0c;使用某种算法来计算成本或持续时间的估算技术。参数估算是指利用历史数据之间的统计关系和…

Turbo并发插件使用说明

文章目录 一、安装Turbo Intruder插件1. 安装方式12. 安装方式2二、并发短信验证码轰炸示例一、安装Turbo Intruder插件 1. 安装方式1 在BurpSuite的扩展里的BApp商店可直接安装 打开BurpSuite,点击扩展点击BApp商店搜索turbo Intruder选择Turbo Intruder插件点击安装2. 安装…

5_vscode+valgrind+gdb调试程序

需求 项目程序, 读取串口数据, 出现程序崩溃问题valgrind 可以调试定位内存问题: 内存泄漏,非法地址访问,越界访问等内存问题vscode gdb 可视化调试效果, 比命令行简单快捷很多期望使用vscode valgrind gdb 调试程序内存异常, 崩溃退出的问题 环境准备 sudo apt install v…