HTML框架分析及应用
今天分享下”HTML框架分析及应用“这篇文章,文中根据实例编码详细介绍,或许对大家的编程之路有着一定的参考空间与使用价值,需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。
一、框架
一个浏览器文本文档对话框只有表明一个网页文件,可是能够根据应用框架,在同一个浏览器对话框中表明不仅一个页面。应用框架的页面关键包括2个一部分,一个是框架集,另一个便是实际的框架文档。
框架多用以网站后台或是内部网系统软件的合理布局。
1.框架集():就是用来定义这一HTML文件为框架模式,并设定视窗如何分割的文件。通俗一点地说,框架集就是存放框架结构的文件,也是访问框架文件的入口文件。如果网页由左右二个框架组成,那么除了左右二个网页文件之外,还有一个总的框架集文件。在使用框架的页面中,主体标记被框架标记所代替。而对于框架页面中包含的每一个框架,都是通过标记来定义的。
rows属性:水平分割窗口。水平分割窗口是将页面沿水平方向切割,也就是将页面分成上下排列的多个窗口。rows中可以取多个值,每个值表示一个框架窗口的水平宽度,它的单位可以是像素,也可以是占浏览器的百分比。但是要注意的是,一般设定了几个rows的值,就需要有几个框架,也就是需要有相应数量的参数。
<html>
<head>
<title>水平分割窗口的效果</title>
</head>
<frameset rows="30%,70%">
<frame>
<frame>
</frameset>
</html>
cols属性:垂直分割窗口。垂直分割窗口就是将页面沿垂直方向分割成多个窗口,也就是将页面分成左右排列的多个窗口。cols中可以取多个值,每个值表示一个框架窗口的水平宽度,它的单位可以是像素,也可以是占浏览器的百分比。与水平分割窗口向同,一般设定了几个cols的值,就需要有几个框架,也就是有几个参数。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
<head>
<title>垂直分割窗口的效果</title>
</head>
<frameset cols="20%,55%,25%">
<frame>
<frame>
<frame>
</frameset>
</html>
frameborder属性:设置边框。在默认情况下,框架窗口的四周有一条边框线,通过frameborder参数可以调整边框线的显示情况。语法为:
或者。 frameborder的取值只能为0或1。如果取值为0,那么边框线将会被隐藏;如果取值为1,边框线将会显示。在frameset中设置将会对整个框架有效,在frame中设置则只对当前这个框架有效。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<html>
<head>
<title>设置框架窗口的边框显示效果</title>
</head>
<frameset rows="20%,55%,25%">
<frame frameborder="1">
<frameset cols="35%,65%" frameborder="0">
<frame >
<frame>
</frameset>
<frame frameborder="0">
</frameset>
</html>
framespacing属性:框架的边框宽度。框架的边框宽度在默认情况下是1像素,通过参数framespacing可以调整其大小。
语法:
说明:边框宽度就是在页面中各个边框之间的线条宽度,以像素为单位。而这一参数只能对框架集使用,对单个框架无效。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<html>
<head>
<title>设置框架的边框宽度</title>
</head>
<frameset rows="30%,70%" framespacing="10">
<frame>
<frameset cols="20%,55%,25%" framespacing="30">
<frame= http://www.qlyl1688.com/ >
<frame>
<frame>
</frameset>
</frameset>
</html>
bordercolor属性:框架的边框颜色。使用参数bordercolor可以设置框架集的边框颜色。
语法:
说明:该参数同样只对整个框架集有效,对于单个框架无效。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<html>
<head>
<title>设置框架的边框颜色</title>
</head>
<frameset rows="30%,70%“ framespacing="10" bordercolor =”#CC99FF">
<frame>
<frameset cols="20%,55%,25%“ framespacing="30" bordercolor =”#9900FF">
<frame>
<frame>
<frame>
</frameset>
</frameset>
</html>
2.框架()和src属性。
框架结构中的各个页面都是一个单独的文字,而这些文件是通过src参数进行设置的。
语法:
说明:页面文件是框架页面的具体内容的所在,对于没有设置源文件的框架,只是空白页面,是没有任何作用的。页面的源文件可以是正常的HTML文件,也可以是一个图片或者其他的文件。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
<head>
<title>设置页面源文件</title>
</head>
<frameset rows="30%,70%">
<frame src="pic01.gif">
<frame src="src01.html">
</frameset>
</html>
3.标签
标签用于浏览器不支持框架时显示页面内容。
1
2
3
4
5
6
7
8
9
10
<html>
<frameset cols="25%,50%,25%">
<frame src="/example/html/frame_a.html">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
<noframes>
<body>您的浏览器无法处理框架!</body>
</noframes>
</frameset>
</html>
二、浮动框架()
浮动框架是一种较为特殊的框架,它是在浏览器窗口中嵌套子窗口,也就是整个页面并不是框架页面,但是却包含一个框架窗口。在框架窗口内显示相应的页面内容。浮动框架又叫内联框架(inline frame),并且因此而得名。
语法:
说明:与普通框架结构类似,浮动框架也可以设置很多参数,如 name、scrolling、frameborder等。 但是与普通框架相比,浮动框架中不包含framespacing和bordercolor参数。
src属性:浮动框架中最基本的参数就是src,它用来设置浮动框架页面的源文件地址,也是浮动框架页面必需的参数。因为只有设置了源文件的内容,浮动框架才有意义。语法:
width和height属性:在普通框架结构中,由于框架就是整个浏览器窗口,因此不需要设置其大小。但是在浮动框架中,是插入到普通HTML页面中的,可以调整整个框架的大小。语法:<iframe src= src=“浮动框架页面源文件” width=“页面宽度” height=“页面高度”>,页面的宽度和高度值都以像素为单位。
1
2
3
4
5
6
7
<html>
<body>
<iframe src="/i/eg_landscape.jpg" width="550" height="310" ></iframe>
<p>一些老的浏览器不支持 iframe。</p>
<p>如果得不到支持,iframe 是不可见的。</p>
</body>
</html>
三、一个框架布局的示例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
<head>
<title>框架主页面 </title>
</head>
<frameset rows="20%,*">
<frame name="topFame" src="3.html" noresize/>
<frameset cols="240px,*">
<frame name="leftFrame" src="1.html"/>
<frame name="rightFrame" src="2.html" marginwidth="20px" scrolling="no"/>
</frameset>
<noframes>
<body>
该页面不支持frameset标签!
</body>
</noframes>
</frameset>
</html>
四、链接如何跳出框架
在网站后台管理合理布局中,框架用得比较多。在许多情况下,大家必须 跳出框架,重新加载网页页面。那麼连接怎样才可以跳出框架呢?实际上 ,只必须 特定标识的target属性为"_top"就可以完成。下边是一个简易的事例。
1
2
3
4
5
6
7
8
9
10
11
<html>
<body>
<p>被锁在框架中了吗?</p>
<a href="/index.html"
target="_top">请点击这里!</a>
</body>
</html>
剪切
复制
粘贴
左边插入 列
右边插入 列
上方插入 行
下方插入 行
合并单元格
拆分单元格
删除选中列
删除选中行
删除表格
清空内容
以上是云南仟龙Mark给大家介绍的所有内容,希望对大家有所帮助,如果大家有任何疑问请在脚本之家留言,如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
HTML框架分析及应用相关推荐
- Flutter框架分析(五)-- 动画
Flutter框架分析分析系列文章: <Flutter框架分析(一)-- 总览和Window> <Flutter框架分析(二)-- 初始化> <Flutter框架分析(三 ...
- hdfs文档存储服务器,一文读懂HDFS分布式存储框架分析
一文读懂HDFS分布式存储框架分析 HDFS是一套基于区块链技术的个人的数据存储系统,利用无处不在的私人PC存储空间及便捷的网络为个人提供数据加密存储服务,将闲置的存储空间利用起来,服务于正处于爆发期 ...
- 需求评审五个维度框架分析及其带来的启示-3-典型需求评审
典型情境是指软件开发的常见情境,本文选择如下来进行分析: 1. 传统瀑布模型开发下的需求评审 2. 使用IEEE Std. 1028的需求评审 3. 敏捷开发下的需求评审 传统瀑布模型下的需求评审 对 ...
- java连接linux服务器执行shell命令(框架分析+推荐)
java连接linux服务器执行shell命令(框架分析+推荐) 一.分类+连接方式 程序打成jar包,在本地服务器上执行shell命令.这种使用MyRuntimeUtil工具类 java程序远程li ...
- Linux USB驱动框架分析 【转】
转自:http://blog.chinaunix.net/uid-11848011-id-96188.html 初次接触与OS相关的设备驱动编写,感觉还挺有意思的,为了不至于忘掉看过的东西,笔记跟总结 ...
- linux音频框架分析,Alsa音频子系统Codec---al5623.c内核代码框架分析
驱动代码位于: sound/soc/codec/alc5623.c 随便找个Linux内核都会有. 1.首先进行i2c总线驱动加载在: static int __init alc5623_modini ...
- Janus流媒体服务器框架分析
Janus流媒体服务器框架分析 目录 webrtc多方通信架构 Janus流媒体服务器 1. webrtc多方通信架构 1. Mesh 方案 Mesh方案即多个终端之间两两进行连接,形成一个网状结构. ...
- FFmpeg过滤器框架分析
FFmpeg过滤器框架分析 目录 主要结构体和API介绍 AVFilterGraph-对filters系统的整体管理 AVFilter-定义filter本身的能⼒ AVFilterContext-fi ...
- Prototype 框架分析(一)
Prototype 框架分析(一) Class 关于javascript的面向对象设计可以参看MSDN上的文章<JavaScript使用面向对象的技术创建高级 Web 应用程序>,这样理解 ...
- OpenGL研究, GUI框架分析, 虚拟机比较, Win10历险记, WxWidget, uboot, WireShark
http://antkillerfarm.github.io/ OpenGL研究 书籍 我手上其实有几本关于OpenGL的实体书,但是比较了一下之后,发现还是电子版的<OpenGL编程指南> ...
最新文章
- css中display设置为table、table-row、table-cell后的作用及其注意点
- python配置文件密码管理_python – 可以在django管理员中实现“下次登录时更改密码”类型功能吗?...
- C/C++ 语言的常用开发工具下载
- iOS学习之iOS沙盒(sandbox)机制和文件操作(二)
- XGBoost相关知识-2
- BERT, ELMo, GPT-2: 这些上下文相关的表示到底有多上下文化?
- IIS出现The specified module could not be found解决方法
- 带你自学Python系列(八):列表具体操作思维导图总结,再也不用翻书查用法了!...
- 2021年中国中性段开关检测器市场趋势报告、技术动态创新及2027年市场预测
- cell的各种使用和赋值 总结
- Java:转换汉字为unicode形式的字符串和转换unicode形式字符串转换成汉字
- 单点登录 cas 设置回调地址_单点登录终极方案之 CAS 应用及原理
- js 实现选择文件存放路径
- 人脸识别系统的活体检测技术
- 机器学习笔记 - 什么是先验算法(Apriori Algorithm)?
- jdk官网下载与安装
- 不等距双杆模型_电磁感应之双杆模型ppt课件
- 关于vue-lic脚手架使用less和sass的配置
- 搭建论坛discuz
- ArcGIS教程:最小值和最大值条形图
热门文章
- C++学生信息管理系统
- 2020年中国林业有害生物发生及防治面积统计情况,林业有害生物防控措施工作的开展刻不容缓「图」
- python3 微博API code获取解决方案 长期保存access_token
- 2011考研数学二第(19)题——拉格朗日中值定理证不等式、单调有界证数列收敛、两问关联
- Mac 迅雷限速问题
- 2020软件测试学科全套上课视频教程网盘免费分享
- 16家上市银行股票代码
- 华为手机备忘录的字体怎么调大?
- 东方卫视收视率查询_全国电视台收视率排名(最新排行榜)
- 计算机病毒鬼畜,[原创]彩虹猫病毒的逆向