HTML:框架

案例:

<frameset cols="5%,*" ><frame src="left_frame.html"><frame src="right_frame.html">
</frameset>

一、<frameset>标签

<frameset>标签:称为框架标记,将一个HTML页面变成框架,设定浏览器视图分割,可以容纳多个HTML页面,一个页面变成一个框架,每个框架独立于其它框架。

属性描述
rows%,*划分行。
cols%,*划分列。

*号可以自动对链接页面分配屏幕剩余空间。

注意:乱用*号或者不合理使用<frameset>标签可能会导致页面布局混乱、可访问性问题和不良的用户体验。

注:html5已不支持frameset标签!

二、<frame>标签

<frame>标签:用于链接不同的html页面。

属性描述
srcurl规定在框架中显示的文档的 URL。
scrollingyes
no
auto
规定是否在框架中显示滚动条。
frameborder1/0规定是否显示框架周围的边框。
noresizenoresize规定无法改变框架大小。

注:html5已不支持frameset标签!

三、<iframe>标签

<iframe>标签:创建包含另外一个文档的内联框架(即行内框架),用来替代被淘汰的frameset标签和frame标签。

属性描述
heightpixels、%高。
widthpixels、%宽。
srcurl用于加载外部页面的URL。
srcdocHTML_code用于指定要显示的HTML内容,值为html代码。
sandbox

allow-forms、allow-pointer-lock、

allow-popups、allow-same-origin、

allow-scripts、allow-top-navigation

启用一系列对 <iframe>中内容的额外限制。

allow-forms:允许在<iframe>中提交表单。

allow-pointer-lock:启用鼠标指针锁定功能。

allow-popups:允许在<iframe>中打开弹出窗口。

allow-scripts:允许在<iframe>中执行脚本。

 实例:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body><iframe width="100%" height="50%" src="demo_iframe_sandbox.html" sandbox="allow-scripts"><p>您的浏览器不支持 iframes.</p>
</iframe><p>"获得日期和时间" 按钮会在行内框架中运行一段脚本。</p>
<p>由于 sandbox 属性被设置为空字符串 (""),行内框架的内容不允许运行脚本。</p>
<p>如果向 sandbox 属性添加 "allow-scripts",则允许运行 JavaScript。</p>
<p><b>注释:</b>IE 9 以及更早的版本不支持 sandbox 属性,Opera 12 以及更早的版本也不支持该属性。</p></body>
</html>

效果:

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

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

相关文章

mysql 判断一张表是否存在的方法

查询表是否存在 使用 SHOW TABLES SHOW TABLES LIKE %tbl_tabl%;结果: 查询 INFORMATION_SCHEMA // like 匹配 SELECT TABLE_NAME FROM INFORMATION_SCHEMA.TABLES where TABLE_SCHEMA test AND TABLE_NAME like %tbl%; // 完全匹配 SELECT TABLE_NAME FROM INFORMATION_SC…

element UI中设置图片的高度并支持PC和手机自适应

系列文章目录 一、elementui 导航菜单栏和Breadcrumb 面包屑关联 二、elementui 左侧导航菜单栏与main区域联动 三、elementui 中设置图片的高度并支持PC和手机自适应 四、elementui 实现一个固定位置的Pagination&#xff08;分页&#xff09;组件 文章目录 系列文章目录…

《Java面试自救指南》(专题二)计算机网络

文章目录 力推的计网神课get请求和post请求的区别在浏览器网址输入一个url后直到浏览器显示页面的过程常用状态码session 和 cookie的区别TCP的三次握手和四次挥手七层OSI模型&#xff08;TCP/IP协议模型&#xff09;各种io模型的知识http协议和tcp协议的区别https和http的区别…

【Unity每日一记】如何让Sprite精灵图集的背景图层变成透明,方便切割

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;uni…

Pygame基础10-物理模拟

PyMunk PyMunk是一个模拟物理的库。 注意&#xff0c;PyMunk只是进行物理模拟&#xff0c;不包含可视化的功能。如果需要可视化&#xff0c;可使用pygame等库。 可用pip安装pymunk pip install pymunk pymunk中的概念&#xff1a; space&#xff1a; 物理空间。 包含gravity 模…

AJAX —— 学习(一)

目录 一、原生 AJAX &#xff08;一&#xff09;AJAX 介绍 1.理解 2.作用 3.最大的优势 4.应用例子 &#xff08;二&#xff09;XML 介绍 1.理解 2.作用 &#xff08;三&#xff09;AJAX 的特点 1.优点 2.缺点 二、HTTP 协议 &#xff08;一&#xff09;HTTP 介…

C语言中的结构体:揭秘数据的魔法盒

前言 在C语言的广阔天地中&#xff0c;结构体无疑是一颗璀璨的明珠。它就像是一个魔法盒&#xff0c;能够容纳各种不同类型的数据&#xff0c;并按我们的意愿进行组合和排列。那么&#xff0c;这个魔法盒究竟有何神奇之处呢&#xff1f;让我们一探究竟。 一、结构体的诞生&…

Java学习14(异常)

异常 概述 程序运行过程出错的情况就是异常。Java提供了异常处理机制&#xff0c;出现不正常情况的时候&#xff0c;就会把异常信息打印到控制台&#xff0c;供程序员参考修改。 这是Java打印的异常信息&#xff0c;这个信息是JVM打印的。 异常的作用&#xff1a; 增强程序的健…

可以写网易云的了!

你好&#xff0c;我是云桃桃。 一个希望帮助更多朋友快速入门 WEB 前端的程序媛。 1枚程序媛&#xff0c;大专生&#xff0c;2年时间从1800到月入过万&#xff0c;工作5年买房。 分享成长心得。 259篇原创内容-gzh 后台回复“前端工具”可获取开发工具&#xff0c;持续更新中…

设计模式——原型模式05

原型模式核心复制&#xff0c;每次new出来的对象完全不一样&#xff0c;实现对象之间的隔离。 学习前最好先掌握jAVA值传递和深浅拷贝 设计模式&#xff0c;一定要敲代码理解 浅拷贝 克隆出对象&#xff0c;其中两者的引用类型属性是同一个对象。 对象信息 /*** author ggb…

常用的AI绘画自动生成器介绍

AI绘画自动生成器是一种利用人工智能技术生成图像的工具。它可以根据用户输入的文本描述自动生成相应的图像。目前,有几种流行的AI绘画自动生成器,包括: 1. **DALL-E 2** DALL-E 2是由OpenAI开发的AI绘画生成器,它可以根据用户输入的自然语言描述生成高质量的图像。DALL-E 2使…

【Linux】Linux进程学习(基本认知)

&#x1f525;博客主页&#xff1a; 小羊失眠啦. &#x1f3a5;系列专栏&#xff1a;《C语言》 《数据结构》 《C》 《Linux》 《Cpolar》 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 文章目录 前言一、冯诺依曼体系二、系统管理三、进程理解3.1 代码与数据3.2 进程控制块 四…

jvm总结学习

四种加载器 1.启动类加载器 2.拓展类加载器 3.应用程序加载器 4.自定义加载器 沙箱机制 就是为了保证安全&#xff0c;增加的一些权限。 native方法区&#xff08;静态变量&#xff0c;常量&#xff0c;类信息&#xff08;构造方法&#xff0c;接口定义&#xff09;&…

突破!AI机器人拥有嗅觉!仿生嗅觉芯片研究登上Nature子刊

我们一直梦想着让AI与人类能够更加相似&#xff0c;赋予它们视觉与听觉。而让机器人拥有嗅觉一直以来面临着巨大的困难。 香港科技大学范志勇教授领导的研究团队凭借最新研发的仿生嗅觉芯片&#xff08;BOC&#xff09;在这一领域取得了重大突破。该研究成果目前已被发表到IF …

github生成新的SSH密钥

首先是参考官方文档 生成新的 SSH 密钥并将其添加到 ssh-agent述 当你在创建SSH密钥时遇到提示&#xff1a; Enter file in which to save the key (/c/Users/YOU/.ssh/id_ALGORITHM):这一步是让你选择保存生成的SSH密钥对的文件名和位置。如果你直接按回车键&#xff08;[Pr…

Qt+OpenGL_part1

OpenGL&#xff0c;Qt实现&#xff1a;1入门篇(已更完)_哔哩哔哩_bilibili OpenGL3.3以上是现代模式&#xff08;可编程管线&#xff09;&#xff1a; 状态机 状态设置函数&#xff08;State-changing Function) 状态应用函数 &#xff08;State-using Function) OpenGL的状态…

Centos7安装minio

下载 官网&#xff1a;MinIO | Code and downloads to create high performance object storage 网盘&#xff1a;链接&#xff1a;https://pan.baidu.com/s/1XTu4WyHrBQbetu5g4oKvAw?pwd7b22 提取码&#xff1a;7b22 将下载的安装文件上传到服务器/opt目录下 安装前准备…

获取天翼网关TEWA-708E超级管理员密码

Download RouterPassView 参考&#xff1a;破解光猫超级管理员密码&#xff08;网关型号&#xff1a;TEWA-708E&#xff09; - 知乎

记Kubernetes(k8s)初始化报错:“Error getting node“ err=“node \“k8s-master\“ not found“

记Kubernetes&#xff08;k8s&#xff09;初始化报错&#xff1a;"Error getting node" err"node \"k8s-master\" not found" 1、报错详情2、问题排查3、尝试问题解决 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#…

14.信号量

一、信号量的简介 信号量是一种解决同步问题的机制&#xff0c;可以实现对共享资源的有序访问。其中&#xff0c;“同步”指的 是任务间的同步&#xff0c;即信号量可以使得一个任务等待另一个任务完成某件事情后&#xff0c;才继续执行&#xff1b; 而“有序访问”指的是对被…