百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

HTML 框架标签——frameset html框架及常用标签

zhezhongyun 2024-12-24 16:55 32 浏览

框架是将一个页面划分为若干个窗口, 每一个窗口都是独立;

要实现框架必须使用框架型的DTD;

框架就像一个窗户是由窗格和玻璃组成;

框架中不能有body及body子标记;

框架是由框架集(frameset)和框架页(frame)组成;

格式:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
</head>
<frameset>
<frame />
<frame />
</frameset>
</html>

框架标签:

<frameset></frameset> 放在一个框架文档的<body>标签之前, 也可以嵌在其他框架文档中;

框架中不能有body及body子标记, 框架是由框架集(frameset)和框架页(frame)组成;

<frameset rows="value,value"> 定义一个框架内的行数, 可用像素值或高度百分比;

<frameset cols="value,value"> 定义一个框架内的列数, 可用像素值或宽度百分比;

<frameset cols="120,*"></frameset>

<frameset cols="25%,50%,25%"></frameset>

<frameset rows="120,*"></frameset>

<frameset rows="25%,50%,25%"></frameset>

frameborder 框架边框显示属性

该属性用于指定框架周围是否显示边框, 取值有1(显示边框, 默认值)和0(不显示边框)。

framespacing 该属性用于指定框架之间的间隔, 以像素为单位。

如果不设置该属性,则框架之间没有间隔。

border 指定边框宽度属性

该属性用于指定边框的宽度, 只有在frameborder属性为1时有效。

bordercolor 指定边框颜色

<noframes></noframes> 定义在不支持框架的浏览器中显示什么提示;

<html>
<frameset cols="25%,50%,25%">
<frame src="frame_a.html"/>
<frame src="frame_b.html"/>
<frame src="frame_c.html"/>
<noframes>
<body>您的浏览器无法处理框架!</body>
</noframes>
</frameset>
</html>

<frame> 定义一个框架内的单一窗或窗区域;

<frame src="url"> 规定框架内显示的html文档;

<frame name="name"> 命名框架或区域以便别的框架可以指向它;

<frame marginwidth=""> 定义框架左右边缘的空白大小,必须大于等于1;

<frame marginheight=""> 定义框架上下边缘的空白大小,必须大于等于1;

<frame scrolling=""> 设置框架是否有滚动栏,其值可以是"yes","no",或"auto";

<frame noresize> 禁止用户调整一个框架的大小;其值只有一个"noresize"

<frame src="frame_a.htm" longdesc="w3school.txt" /> longdesc属性指向了带有框架内容长描述的页面:

<iframe></iframe> 创建一个内联的框架;

src 定义在框架中显示的内容的来源;

frameborder 规定是否显示框架周围的边框。(0或1);

align 控制对齐方式(left、right、middle、top、bottom);

height 框架的高度,

width 框架的宽度;

marginheight 定义 iframe 的顶部和底部的边距。

marginwidth 定义 iframe 的左侧和右侧的边距。

scrolling 规定是否在 iframe 中显示滚动条(yes、no、auto)。

name 规定 iframe 的名称。

bordercolor 指定边框颜色

<iframe src ="/index.html" frameborder="0" bordercolor="red">

<p>Your browser does not support iframes.</p>

</iframe>


关于框架集<frameset></frameset>中属性cols rows分割方法理解

<frameset cols="40%,2*,*"> 将窗口分为40%,40%,20%

<frameset cols="100,200,*"> 将窗口分为100像素,200像素和剩下的700像素

<frameset cols="100,*,*">    将100像素以外的窗口平均分配

<frameset cols="*,*,*">     将窗口分为三等份

<frameset rows="*,*,*"> 总共有三个按列排列的帧,每个帧占整个浏览器窗口的1/3

<frameset cols="40%,*,*"> 总共有三个按行排列的帧,第一个帧占整个浏览器窗口的40%,剩下的空间平均分配给另外两个帧

<frameset rows="40%,*" cols="50%,*,200">

以上"*"表示剩余部分

总共有六个帧,先是在第一行中从左到右排列三个帧,然后在第二行中从左到右再排列三个帧,即两行三列,

所占空间依据rows和cols属性的值,其中200的单位是像素

属性汇总:

frameset(框架集)

rows 它是将框架集划分为上下型

cols 它是将框架划分为左右型

border 是用于设置框架的边框粗细

frameborder 是用于设置是否显示边框, 取值:yes|no或1|0

bordercolor 用于设置框架边框的颜色

frame(框架页)

noresize 是否可以调整小窗口的大小

name 用于设置小窗口的名称

src 小窗口的url

scroll 是否显示滚动条 yes|no|auto

实例: iframe满屏方案

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>iframe满屏方案</title>
<style>
body {
margin: 0; /* Reset default margin */
}
iframe {
display: block; /* iframes are inline by default */
background: #000;
border: none; /* Reset default border */
height: 100vh; /* Viewport-relative units */
width: 100vw;
}
</style>
</head>
<body>
<iframe src="http://xxx.xxx.xxx.xxx:10002/vnc.html?username=superadmin&course=hd-linux&chart=hd-linux&version=v1.0.0"></iframe>
</body>
</html>

相关推荐

JPA实体类注解,看这篇就全会了

基本注解@Entity标注于实体类声明语句之前,指出该Java类为实体类,将映射到指定的数据库表。name(可选):实体名称。缺省为实体类的非限定名称。该名称用于引用查询中的实体。不与@Tab...

Dify教程02 - Dify+Deepseek零代码赋能,普通人也能开发AI应用

开始今天的教程之前,先解决昨天遇到的一个问题,docker安装Dify的时候有个报错,进入Dify面板的时候会出现“InternalServerError”的提示,log日志报错:S3_USE_A...

用离散标记重塑人体姿态:VQ-VAE实现关键点组合关系编码

在人体姿态估计领域,传统方法通常将关键点作为基本处理单元,这些关键点在人体骨架结构上代表关节位置(如肘部、膝盖和头部)的空间坐标。现有模型对这些关键点的预测主要采用两种范式:直接通过坐标回归或间接通过...

B 客户端流RPC (clientstream Client Stream)

客户端编写一系列消息并将其发送到服务器,同样使用提供的流。一旦客户端写完消息,它就等待服务器读取消息并返回响应gRPC再次保证了单个RPC调用中的消息排序在客户端流RPC模式中,客户端会发送多个请...

我的模型我做主02——训练自己的大模型:简易入门指南

模型训练往往需要较高的配置,为了满足友友们的好奇心,这里我们不要内存,不要gpu,用最简单的方式,让大家感受一下什么是模型训练。基于你的硬件配置,我们可以设计一个完全在CPU上运行的简易模型训练方案。...

开源项目MessageNest打造个性化消息推送平台多种通知方式

今天介绍一个开源项目,MessageNest-可以打造个性化消息推送平台,整合邮件、钉钉、企业微信等多种通知方式。定制你的消息,让通知方式更灵活多样。开源地址:https://github.c...

使用投机规则API加快页面加载速度

当今的网络用户要求快速导航,从一个页面移动到另一个页面时应尽量减少延迟。投机规则应用程序接口(SpeculationRulesAPI)的出现改变了网络应用程序接口(WebAPI)领域的游戏规则。...

JSONP安全攻防技术

关于JSONPJSONP全称是JSONwithPadding,是基于JSON格式的为解决跨域请求资源而产生的解决方案。它的基本原理是利用HTML的元素标签,远程调用JSON文件来实现数据传递。如果...

大数据Doris(六):编译 Doris遇到的问题

编译Doris遇到的问题一、js_generator.cc:(.text+0xfc3c):undefinedreferenceto`well_known_types_js’查找Doris...

网页内嵌PDF获取的办法

最近女王大人为了通过某认证考试,交了2000RMB,官方居然没有给线下教材资料,直接给的是在线教材,教材是PDF的但是是内嵌在网页内,可惜却没有给具体的PDF地址,无法下载,看到女王大人一点点的截图保...

印度女孩被邻居家客人性骚扰,父亲上门警告,反被围殴致死

微信的规则进行了调整希望大家看完故事多点“在看”,喜欢的话也点个分享和赞这样事儿君的推送才能继续出现在你的订阅列表里才能继续跟大家分享每个开怀大笑或拍案惊奇的好故事啦~话说只要稍微关注新闻的人,应该...

下周重要财经数据日程一览 (1229-0103)

下周焦点全球制造业PMI美国消费者信心指数美国首申失业救济人数值得注意的是,下周一希腊还将举行第三轮总统选举需要谷歌日历同步及部分智能手机(安卓,iPhone)同步日历功能的朋友请点击此链接,数据公布...

PyTorch 深度学习实战(38):注意力机制全面解析

在上一篇文章中,我们探讨了分布式训练实战。本文将深入解析注意力机制的完整发展历程,从最初的Seq2Seq模型到革命性的Transformer架构。我们将使用PyTorch实现2个关键阶段的注意力机制变...

聊聊Spring AI的EmbeddingModel

序本文主要研究一下SpringAI的EmbeddingModelEmbeddingModelspring-ai-core/src/main/java/org/springframework/ai/e...

前端分享-少年了解过iframe么

iframe就像是HTML的「内嵌画布」,允许在页面中加载独立网页,如同在画布上叠加另一幅动态画卷。核心特性包括:独立上下文:每个iframe都拥有独立的DOM/CSS/JS环境(类似浏...