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;组件 文章目录 系列文章目录…

JVM专题——类文件结构

本文部分内容节选自Java Guide和《深入理解Java虚拟机》, Java Guide地址: https://javaguide.cn/java/jvm/class-file-structure.html &#x1f680; 基础&#xff08;上&#xff09; → &#x1f680; 基础&#xff08;中&#xff09; → &#x1f680;基础&#xff08;下&am…

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

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

京准、ntp校时服务器(GPS北斗卫星校时器)技术方案

京准、ntp校时服务器&#xff08;GPS北斗卫星校时器&#xff09;技术方案 京准、ntp校时服务器&#xff08;GPS北斗卫星校时器&#xff09;技术方案 四分天下目前&#xff0c;全球的 GPS卫星同步系统处于“四分天下”状态&#xff0c;以美俄两国的系统处于领导地位&#xff0c…

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

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

【电路笔记】-逻辑或门

逻辑或门 文章目录 逻辑或门1、概述2、2 输入晶体管或门3、数字逻辑或门类型逻辑或门是一种数字逻辑电路,仅当其一个或多个输入为高电平时,其输出才会变为高电平至逻辑电平 1。 1、概述 “逻辑或门”的输出 Q 仅当其所有输入都处于逻辑电平“0”时才再次返回“低”。 换句话…

《CSS入门到精通》结语

1. CSS学习资源推荐&#xff1a; 进一步探索CSS及前端技术的世界&#xff0c;可以从以下几个高质量的学习资源和社区入手&#xff1a; 在线课程&#xff1a; W3Schools&#xff1a;提供了详尽的CSS教程和实践示例。 Codecademy、FreeCodeCamp&#xff1a;包含互动性强的CSS课程…

Pygame基础10-物理模拟

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

爬虫 知识点2以及SSL1129错误该怎么解决

article_url url_tag[href]article_response requests.get(article_url, headersheaders)article_soup BeautifulSoup(article_response.content, "html.parser")print(index)&#xff08;1&#xff09;article_url url_tag[‘href’] 这行代码从一个名为url_tag…

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; 增强程序的健…

FOC算法中为啥用PWM触发ADC中断

在FOC&#xff08;Field Oriented Control&#xff0c;场向量控制&#xff09;算法中&#xff0c;为什么要使用PWM&#xff08;Pulse Width Modulation&#xff0c;脉宽调制&#xff09;触发ADC&#xff08;Analog-to-Digital Converter&#xff0c;模数转换器&#xff09;中断…

可以写网易云的了!

你好&#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;&…

java八股——常见设计模式

上一篇传送门&#xff1a;点我 有哪些设计模式&#xff1f; 按照模式的应用目标分类&#xff0c;可以分为创建型模式、结构型模式、行为型模式三类。 创建型模式&#xff1a; 对象实例化的模式&#xff0c;创建型模式用于解耦对象的实例化过程。 单例模式&#xff1a;某个类…