HTML 框架标签——frameset
myzbx 2024-12-08 16:37 31 浏览
框架是将一个页面划分为若干个窗口, 每一个窗口都是独立;
要实现框架必须使用框架型的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>
- 上一篇:50个好用的前端框架,千万收好以留备用
- 下一篇:html实用的嵌套规则
相关推荐
- 资深架构师亲授,从堆栈到GC,一篇文章打通任督二脉!
-
“又双叒OOM了?”“服务半夜崩了,日志全是`java.lang.OutOfMemoryError`...”“GC停顿太长,用户投诉卡顿!”如果你也常被这些问题折磨,根本症结往往在于:你对Java...
- Java JAR 启动内存参数配置指南:从基础设置到性能优化
-
在启动Java可执行JAR文件时,合理配置JVM内存参数是保障应用稳定性和性能的关键。本文将系统讲解如何通过命令行参数、环境变量等方式指定内存配置,并结合实际场景提供优化建议。一、核心内存...
- 浏览器存储"四大家族":谁才是你的数据管家?
-
当你关闭浏览器再重新打开,登录状态为何还在?购物车商品为何不会消失?这些"记忆"背后,藏着浏览器存储的"四大家族"——Cookie、localStorage、sessi...
- SOP与SIP深度解析(sop与soic)
-
SOP(标准作业程序)与SIP(标准检验程序)是确保产品质量和生产效率的两大支柱,分别聚焦于生产执行和质量验证。一、核心区别:目标与作用域维度SOP(标准作业程序)SIP(标准检验程序)定位指导“如何...
- Java 技术岗面试全景备战!从基础到架构的系统性通关攻略分享
-
Java技术岗的面试往往是一项多维度的能力检验。本文将会从核心知识点、项目经验到面试策略,为你梳理一份系统性的备战攻略!需要的同学可以私信小编【学习】一、技术基础:面试的“硬性指标”1.最重要的还是...
- C++11 新特性(c++11新特性 pdf)
-
一、核心语言革新移动语义与右值引用通过&&标识临时对象(右值),实现资源转移而非复制。例如移动构造函数将原对象资源指针转移后置空,避免深拷贝,极大优化容器操作性能。12类型推导auto:自动推导变量类...
- 2026年前每个开发者都应该学习的技能
-
优秀开发者和伟大开发者之间的差距正在快速扩大。随着AI工具的爆炸式增长、自动化工作流程和日益复杂的技术栈,开发者不能再仅仅"知道如何编码"了。在2026年及以后,您的优势不仅仅是编写代...
- 看一看,Python这四种作用域你都知道吗?
-
点赞、收藏、加关注,下次找我不迷路一、啥是作用域?先打个比方比如说,你在自己的卧室(相当于一个小空间)里放了一本书,这本书在卧室里随便你怎么看,这就是这本书在卧室这个"作用域"内...
- 抛弃立即执行函数 (IIFE),拥抱现代 JavaScript 块级作用域
-
IIFE(ImmediatelyInvokedFunctionExpression)曾是JavaScript开发中的重要工具,但随着ES6+的块级作用域特性,我们现在有了更优雅的替代...
- 2025 年是时候重新认识 Symbol 的八大特性了?
-
大家好,很高兴又见面了,我是"高级前端进阶",由我带着大家一起关注前端前沿、深入前端底层技术,大家一起进步,也欢迎大家关注、点赞、收藏、转发!1.什么是Symbol原始类型在J...
- 函数、表达式与控制流:Rust 的核心语法构建块
-
在上一篇中我们了解了变量与类型,本篇将深入函数、表达式与控制流的使用,让你的代码更具逻辑性。一、函数定义与调用函数是组织和复用代码的基本单元。在Rust中,使用fn关键字定义函数:///计算...
- 所有权、借用与生命周期:理解 Rust 的核心机制
-
上一篇我们学习了函数、表达式和控制流,这一篇将正式进入Rust最核心、最独特的语言机制:所有权系统。一、为什么需要所有权机制?在C/C++中,内存管理依赖开发者手动操作,容易出现野指针、重复...
- Rust 语言的借用规则:构筑安全内存管理体系的核心保障机制
-
前言在系统级编程范畴内,内存安全始终是一项极具挑战性的关键议题。Rust语言凭借其独树一帜的「借用规则」(BorrowingRules),于编译阶段便有效规避了诸如空指针、野指针以及数据竞争等一系...
- 函数编写指南:参数、返回值与作用域实战详解
-
你是否在编写函数时遇到过参数传递混乱、返回值逻辑不清晰,或者变量作用域导致的奇怪bug?别担心,这篇文章将用最通俗的语言和实战案例,带你彻底搞懂函数的核心三要素:参数、返回值与作用域。一、参数:灵活...
- 服务器频繁报错?5 步教你快速排查修复!运维必看!
-
服务器突然报错、网站打不开、数据库连不上……这些问题是不是让你头大?别慌!今天教你一套「望闻问切」的排查法,90%的服务器故障都能轻松解决!一、定位错误类型:先看日志再动手1.日志是关键系统日志...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 简介 (30)
- HTML 响应式设计 (31)
- HTML URL 编码 (32)
- HTML Web 服务器 (31)
- HTML 表单属性 (32)
- HTML 音频 (31)
- HTML5 支持 (33)
- HTML API (36)
- HTML 总结 (32)
- HTML 全局属性 (32)
- HTML 事件 (31)
- HTML 画布 (32)
- HTTP 方法 (30)
- 键盘快捷键 (30)
- CSS 语法 (35)
- CSS 轮廓宽度 (31)
- CSS 谷歌字体 (33)
- CSS 链接 (31)
- CSS 定位 (31)
- CSS 图片库 (32)
- CSS 图像精灵 (31)
- SVG 文本 (32)
- 时钟启动 (33)
- HTML 游戏 (34)
- JS Loop For (32)