HTML内联框架

news2025/3/13 2:47:02

前言:

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

标签介绍:

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.coloradmin.cn/o/1600846.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

DNS服务器配置与管理(3)——综合案例

DNS服务器配置与管理 前言 在之前&#xff0c;曾详细介绍了DNS服务器原理和使用BIND部署DNS服务器&#xff0c;本文主要以一个案例为驱动&#xff0c;在网络中部署主DNS服务器、辅助DNS服务器以及子域委派的配置。 案例需求 某公司申请了域名example.com&#xff0c;公司服…

linux C -- 消息队列

linux C -- 消息队列 前言一、System V(IPC)消息队列接口调用主要涉及到 msgget、msgsnd、msgrcv 和 msgctl 四个接口&#xff1a; 1、创建消息队列 msgget2、发送消息到队列3、从队列接收信息4、控制消息队列 msgctl5、删除消息队列 二、代码编写1、发送部分的代码2、代码完成…

牛客-环形链表的约瑟夫问题

目录 题目 描述 示例1 示例2 图解 代码(解析在注释中) 题目 描述 编号为 1 到 n 的 n 个人围成一圈。从编号为 1 的人开始报数&#xff0c;报到 m 的人离开。 下一个人继续从 1 开始报数。 n-1 轮结束以后&#xff0c;只剩下一个人&#xff0c;问最后留下的这个人编号…

大数据平台搭建2024(一)

一&#xff1a;基础配置 创建虚拟机并查出ip地址进行连接 ip a1.配置node01静态ip地址与主机名 vi /etc/sysconfig/network-scripts/ifcfg-ens33修改或添加如下内容&#xff1a; BOOTPROTO"static" ONBOOTyes #根据虚拟机网卡信息配置 IPADDR192.168.200.141 NET…

SQL-Post注入

Post注入 在登录过程中&#xff0c;输入用户名和密码&#xff0c;用户名和密码以表单的形式提交&#xff0c; 提交到服务器后服务器再进行验证。这就是一次post的过程的。 在输入正确的用户名和密码后显示 尝试会不会回显报错信息&#xff0c;输入admin--,回显报错了。 尝试…

一个文生视频MoneyPrinterTurbo项目解析

最近抖音剪映发布了图文生成视频功能,同时百家号也有这个功能,这个可以看做是一个开源的实现,一起看看它的原理吧~ 一句话提示词 大模型生成文案 百家号生成视频效果 MoneyPrinterTurbo生成视频效果 天空为什么是蓝色的? 天空之所以呈现蓝色,是因为大气中的分子和小粒子会…

Cisco ACI使用Postman配置交换机-未完待续

先看下不使用脚本的情况下是怎么配置交换机端口的&#xff1f; 例&#xff1a; 有10个交换机接口要开trunk&#xff0c;透传50个vlan&#xff0c; 使用GUI的操作方式为 1 进入EPG -->Static port 2 右键&#xff0c;绑定接口 3 选中node -->指定接口—>指定vlan —>…

Python赋能AI数据分析开启人工智能新时代

文章目录 一、Python是办公自动化的重要工具二、Python是提升职场竞争力的利器三、Python是企业数字化的重要平台四、Python是AI发展的重要通道之一《编程菜鸟学Python数据分析》编辑推荐内容简介作者简介目录前言为什么要写这本书读者对象如何阅读本书 随着我国企业数字化和信…

每日一题(PTAL2-006):树的遍历--树的构建,队列

因为要层序遍历&#xff0c;所以我们可以考虑构建一颗二叉树。构建完只有利用队列就可以就行层序遍历。 #include <bits/stdc.h> using namespace std; int p1[35]; int p2[35]; typedef struct Tree {int val;struct Tree* left;struct Tree* right; }TT; typedef TT* …

基于逐笔数据合成高频订单簿:DolphinDB 订单簿引擎

订单簿是交易市场上买卖双方正在报价的不同价格的列表。订单簿快照反应了特定时刻市场上的交易意图&#xff0c;比如交易活跃的证券标的往往有着密集的订单簿。订单簿快照对量化金融的交易策略、风险管理和市场分析等方面都具有重要意义。 通常交易所可以提供实时和历史的行情…

【ROS2笔记六】ROS2中自定义接口

6.ROS2中自定义接口 文章目录 6.ROS2中自定义接口6.1接口常用的CLI6.2标准的接口形式6.3接口的数据类型6.4自定义接口Reference 在ROS2中接口interface是一种定义消息、服务或动作的规范&#xff0c;用于描述数据结构、字段和数据类型。ROS2中的接口可以分为以下的几种消息类型…

鸿蒙南向开发:【编译和烧录】指导

编译 #进入源码目录 #rm -rf ohos_config.json #hb set #. #如下图所示,按↑↓键&#xff0c;选择需要编译的工程名&#xff0c;然后回车 #hb build -f #然后回车&#xff0c;等待屏幕出现&#xff1a;BUILD SUCCESS字样&#xff0c;说明编译成功。如下图 #编译生成的固件在…

WPS的JS宏如何实现全文件路径字符串中截取文件名(excel)

从全文件路径的字符串中&#xff0c;截取文件名称&#xff0c;例如&#xff1a; 全文件路径字符串为&#xff1a;C:\Windows\System32\drivers\acpi1.sys 需要截取文件名&#xff1a;acpi1.sys 方法如下&#xff1a; 1、简单的方式&#xff1a;把全文件路径字符串拷贝&…

优斯特:防静电包装解决方案的巧妙运用

在现代电子产品生产与运输领域&#xff0c;防静电包装已成为保障产品安全的必备环节。优斯特凭借其创新的防静电包装解决方案&#xff0c;为客户提供了一种巧妙的方式来确保产品在存储和运输过程中不受静电影响&#xff0c;并且不会被刮花或损坏。 静电对产品的影响 静电对电子…

淘系电商课程,0基础实战教学,实操性系统性实时性

课程下载&#xff1a;https://download.csdn.net/download/m0_66047725/89064789 更多资源下载&#xff1a;关注我。 课程内容&#xff1a; 00.前言一做好电商的基本认知 .mp4 01.电商卖货的底层逻辑和权重解析,mp4 02.做好产品的前期准备工作.mp4 03.店铺如何布局产品,m…

开源全方位运维监控工具:HertzBeat

HertzBeat&#xff1a;实时监控系统性能&#xff0c;精准预警保障业务稳定- 精选真开源&#xff0c;释放新价值。 概览 HertzBeat是一款深受广大开发者喜爱的开源实时监控解决方案。它以其简洁直观的设计理念和免安装Agent的特性&#xff0c;实现了对各类服务器、数据库及应用…

毕设论文的分类号与UDC查询

对于毕业论文分类号与UDC&#xff0c;可以根据个人研究领域查询。 中图分类号查询链接&#xff1a; 中图分类号查询 | 中国图书馆分类法 | 中图法 | 中图分类号 (clcindex.com)https://www.clcindex.com/category/ UDC查询链接: UDC Summaryhttps://udcsummary.info/php/ind…

8thWall vs. AR.js

对于熟悉 JavaScript、WebGL 和 HTML5 等 Web 技术的数字创作者来说&#xff0c;8th Wall 提供了功能丰富且强大的 AR 开发平台&#xff0c;尽管价格较高。 然而&#xff0c;新手开发人员和专注于基于标记的 AR 的开发人员可能会发现 AR.js 更易于使用且更经济实惠。 1、8th Wa…

【央国企专场】——军工研究所

研究所目录 一、企业概述1.1 中国航天1.2 中国电科1.3 中国船舶1.4 中国兵器 二、招聘信息2.1 中国航天2.2 中国电科2.3 中国船舶2.4 中国兵器 一、企业概述 在校招中会有很多企业来学校开宣讲会&#xff0c;其中就有许多广为人知的军工研究所&#xff0c;比如&#xff1a;中国…

外面收费的彩虹自助下单系统模板

搭建教程 下载之后上传到template文件夹里面 注意带上里面的文件夹 然后去后台替换就行 源码免费下载地址抄笔记 (chaobiji.cn)