网页学习——创建HTML框架(frameset、frame、iframe)_html frame-程序员宅基地

技术标签: html5  html  网页制作  frame  

框架标签是一种与网页布局密切相关的标签,通过使用框架,可以在同一个浏览器窗口显示多个页面

1、框架集标签 < frameset >

< frameset >元素中的cols、row属性,用于将页面划分。

  • cols 属性 定义框架集中的列数目和尺寸
  • rows 属性 定义框架集中的行数目和尺寸
  • border 属性 设置框架边框的宽度
  • bordercolor 属性 设定框架边框的颜色

两者的取值单位可以是像素(绝对大小),可以是百分比(相对大小),也可以是*(表示除了以划分部分的尺寸后剩余的尺寸)。

(建立一个简单框架):

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
		<frameset rows="300,*" border="20" bordercolor="blue">
			<noframes>
				<body>你的浏览器不支持显示框架</body>
			</noframes>
			<frame src="a.html" />
			<frameset cols="40%,*" border="10" bordercolor="green">
				<frame src="b.html" />
				<frame src="c.html" />
			</frameset>
		</frameset>
</html>

注意:使用 frameset 标签时不能写在 body 标签内,否则容易无效。

上面的< noframes > 标签为那些不支持框架的浏览器显示替代文本。即当浏览器不能处理框架时,就会显示该元素中的文本,这些文本包含在< body >元素中。

运行效果如下(因为框架中引入的网页名是我随意取的不存在网页,所有显示为404):
在这里插入图片描述

2、框架标签 < frame >

语法格式:

<frame name="f1" src="a.html" scrolling="auto" noresize="noresize"/>

< frame >框架标签的若干属性:

  • src 属性 设置框架中要显示的网页的URL地址
  • name 属性 设置框架名称、来唯一标识框架
  • scrolling 属性 设置框架是否显示滚动条,属性值可为:yes、no、auto
  • noresize 属性 设置是否可以调整窗口大小,属性值只可取:noresize

使用超链接中的target属性来控制框架跳转显示:
超链接< a >元素中的target属性可以设置在何处打开链接页面,有五个取值:

  • _blank:在新窗口中打开目标文=文档
  • _self:在当前框架或窗口打开目标文档,默认值
  • _parent:在父框架集中显示被打开的目标文档
  • _top:跳出所有框架集,在整个窗口中打开目标文档
  • 框架名称:在指定框架中打开目标文档

3、浮动框架标签 < iframe >

< iframe >是一种可以嵌在网页中任意部分的框架形式,也称为浮动框架。
语法格式:

<iframe src="aa.html" id="iframe1" width="100" height="100" frameborder="1" scrolling="auto"></iframe>

属性值说明:

  • src 设置框架中要显示的网页的URL地址
  • id 用于唯一标识 iframe 框架
  • width 设置浮动框架的宽度
  • height 设置浮动框架的高度
  • frameborder 设置是否显示边框,0 为不显示,1 为显示
  • scrolling 设置是否显示滚动条,属性值可为:yes、no、auto

注意:< iframe >标签一般写在 body 标签内,而不是写在框架集标签中

此外,可以在 iframe 起始和结束标签中加入替代文本,当浏览器不支持 iframe 元素时,显示这些替代文本给出说明。


例(iframe的使用):

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<p>北冥有鱼,其名为鲲。鲲之大,不知其几千里也;化而为鸟,其名为鹏。鹏之背,不知其几千里也;
		怒而飞,其翼若垂天之云。是鸟也,海运则将徙于南冥。南冥者,天池也。《齐谐》者,志怪者也。《
		谐》之言曰:“鹏之徙于南冥也,水击三千里,抟扶摇而上者九万里,去以六月息者也。”
		野马也,尘埃也,生物之以息相吹也。天之苍苍,其正色邪?其远而无所至极邪?其视下也,亦若是则已矣。</p>
		<iframe src="img/bg.png" width="300" height="300">浏览器不支持使用iframe标签噢!</iframe>
	</body>
</html>

运行结果如下:
在这里插入图片描述
例(frameset、frame的使用):

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<frameset rows="10%,*" border="10" bordercolor="#5555ff" >
		<frame name="fa" src="a.html" scrolling="no"/>
		<frameset cols="10%,*">
			<frame name="fb" src="b.html" />
			<frame name="fc"/>
		</frameset>
	</frameset>
</html>

运行效果如下:
在这里插入图片描述

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/m0_53156691/article/details/124640140

智能推荐

汽车UDS诊断详解及Vector相关工具链使用说明——1.3 诊断响应规则汇总_uds 功能寻址 怎么知道谁响应-程序员宅基地

文章浏览阅读2.1k次。第一篇文章中我们简要提到过服务器接收到客户端的诊断请求后的响应规则,上一篇文章我们详细介绍了诊断请求和响应的流程,现在我们来完整归纳一下服务器的诊断响应规则,即ECU接收到诊断仪的诊断请求后,应该按照哪些规则来决定给出肯定响应还是否定响应,如果给出否定响应,应该使用哪些否定响应码(后文统称NRC)。这部分内容在14229-1-2013版本的7.5章节。一、通用服务响应规则上图是标准给出的通用诊断响应规则。图中被划分为三部分:mandatory 强制的:这部分的规则是标准强制要求遵守的optio_uds 功能寻址 怎么知道谁响应

java web 项目总结_【javaWeb开发工作总结_javaWeb开发个人年终总结】-看准网-程序员宅基地

文章浏览阅读165次。java实训个人总,java实训个人总范文实训已经进行两周多了,还有一周就要正式了,突然发现自己似乎又重蹈覆辙了,再一次一次的不经意中和某些人的就距离却是越来越来大,总是想偷一下懒,总是想着马马虎虎过去算了,没有那么精打细算过。果不经意有些人人开始脱颖而出,有些人开始展露锋芒,而我也开始黯淡下去。我是想好好学学别人的,果画虎不成反类犬。原来我也是不轻易臣服的人,我即便不去领导他们也没有人可以领导我..._web项目工作总结

Linux服务器出现大量的CLOSE_WAIT的问题_linux tomcat close_wait 详情-程序员宅基地

文章浏览阅读5.4k次。Linux服务器出现大量的CLOSE_WAITLinux服务器tcp socket常见的几种状态:ESTABLISHED、TIME_WAIT、CLOSE_WAIT。TCP协议中描述,对于已经建立的连接,网络双方要进行四次握手才能成功断开连接,如果缺少了其中某个步骤,将会使连接处于假死状态,连接本身占用的资源不会被释放。提供网络服务时,需要特别关注两种状态:CLOSE_WAI_linux tomcat close_wait 详情

SystemVerilog学习-03-设计特性与接口_system verilog常用的特性-程序员宅基地

文章浏览阅读763次。设计特性添加接口,将通信和协议检查进一步封装。添加类似c语言的数据类型。添加用户自定义类型,如枚举类型、结构体类型。添加类型转换。添加包(package)从而使得多个设计之间可以共享公共类型和方法。添加方便的赋值操作符和运算操作符,例如++、十=、===。添加priority和uniquecase语句。添加always_comb、always_latch和always_ff等过程语句块。过程语句块SV添加了新的面向硬件的过程语句块,从而使得该语句块可以更清楚地表达设计者的意图。alw_system verilog常用的特性

[email protected]: Permission denied (publickey)_日出东方vs唯我不败博客-程序员宅基地

文章浏览阅读2.8w次,点赞7次,收藏20次。今天在使用命令ssh -T [email protected]测试公钥是否添加成功时,提示:[email protected]: Permission denied (publickey)解决方法方法一:使用默认名字 重新生成密钥对,不指定名字,使用默认名字方法二:使用ssh-agent代理管理git私钥 如果使用的是自己定义的名字 添加本地私钥:ssh-add ~/.ssh/自己定义的名字..._日出东方vs唯我不败博客

No pending exception expected: java.lang.NoClassDefFoundError: Not a primitive type: ‘L‘-程序员宅基地

文章浏览阅读811次。转为Android X 后报错 ,在gradle中引用的是 implementation 'com.jakewharton:butterknife:10.0.0' annotationProcessor 'com.jakewharton:butterknife-compiler:10.0.0'在使用 10.0 的版本的时候 , 需要添加android { compileOptions { sourceCompatibility..._java.lang.noclassdeffounderror: not a primitive type: 'l

随便推点

java静态绑定&动态绑定详解_java静态绑定概念-程序员宅基地

文章浏览阅读2.2k次。程序绑定的概念: 绑定指的是一个方法的调用与方法所在的类(方法主体)关联起来。对java来说,绑定分为静态绑定和动态绑定;或者叫做前期绑定和后期绑定静态绑定: 在程序执行前方法已经被绑定,此时由编译器或其它连接程序实现。例如:C。 针对java简单的可以理解为程序编译期的绑定;这里特别说明一点,java当中的方法只有final,static,private和构造方法是前期绑定动态绑定: 后期_java静态绑定概念

学习go语言国内最全资料链接_七米 golang-程序员宅基地

文章浏览阅读571次,点赞5次,收藏4次。就最近和各位大佬认识下来,以前觉得学习go语言,可能资料比较少,可是后来才发现,原来资料并不少,甚至可以说通过大家的努力,go社区已经非常包容且完善了接下来会推荐一些资料,以及大佬社区微软go语言中文网Gopher China golang中国LearnKu自建博客:boyacch码农桃花源七月天面向信仰编程less is betterPure White煎鱼mzh鸟窝峰云就她了luozhiyun`s BlogVincent Blanchon地鼠导航go夜读g_七米 golang

linux+tar怎样解压zip文件内容,linux tar压缩解压文件-程序员宅基地

文章浏览阅读1.7w次。时间:2016-08-30作者:admin 阅读:次-c: 建立压缩档案-x:解压-t:查看内容-r:向压缩归档文件末尾追加文件-u:更新原压缩包中的文件这五个是独立的命令,压缩解压都要用到其中一个,可以和别的命令连用但只能用其中一个。下面的参数是根据需要在压缩或解压档案时可选的。下面的参数-f 是必须的-f: 使用档案名字,切记,这个参数是最后一个参数,后面只能接档案名。# tar -cf..._tar怎么解压zip文件

一名双非程序媛面试蚂蚁、美团、携程等大厂拿 offer 分享面试过程_双非女后端大厂面经-程序员宅基地

文章浏览阅读184次。今天小编给大家带来一个优秀妹子的后台面试经验总结,希望对正在面试或者以后需要面试的人提供一些参考和帮助。具体如下:本人妹子,985 硕士,211 本科,专业都是软件工程,一直投的是 Java 后台开发,只投过一次网易的测试,技术不是大牛,但是比较努力。实验室没有项目,so 项目经验是 0,在去年这个时候看到实验室师兄找工作的艰难,因此开始复习的时间比较早。最开始先看的 java 基础,看的马某某的视频,后面就看框架视频,后来也看过某某学院的视频,都是在网上找的免费的。..._双非女后端大厂面经

运行成功:char转换为wchar_t的代码_char 转换成 wchar_t-程序员宅基地

文章浏览阅读593次。  具体代码是:int charTowchar(char* pSrc, wchar_t* pDest){ if (pSrc == NULL || pDest == NULL) { return 0; } setlocale(LC_CTYPE, "zh_CN.utf8"); int w_size = mbstowcs(NULL, pSrc, 0) + 1; //w_size=0说明出错了。可能有非法字符,也可能是locale设置不对。_char 转换成 wchar_t

Spring Security最难的地方就是这个了-程序员宅基地

文章浏览阅读3.6k次,点赞6次,收藏6次。本篇摘自胖哥最新的基于Spring Security 5.6.x的《Spring Security干货》教程。旧版的教程将在2022年1月1日下线,请需要的同学尽快通过本公众号回复“202..._configurer.addobjectpostprocessor

推荐文章

热门文章

相关标签