html框架布局-前端基础HTML第九章使用框架结构--暑期学习第五天

2023-08-28 0 1,488 百度已收录

第9章 使用框架结构 9.1 框架的基本概念

框架是浏览器窗口中的一个区域,可以独立于浏览器窗口其余部分中显示的内容来显示 HTML 文档

框架集是一个 HTML 文件,它定义一组框架的布局和属性,包括框架的数量、框架的大小和位置以及每个框架中最初显示的页面的 URL。 框架集文件本身不包含要在浏览器中显示的 HTML 内容,除了 noframes 部分。 框架集文件只是向浏览器提供有关如何显示一组框架以及应在这些框架中显示哪些文档的信息。

框架结构是一种将两个或多个网页组合在一起并在同一窗口中打开的网页结构。 该框架将网页划分为几个独立的区域,每个区域都是一个单独的 HTML 文件。 显示时,每个区域就像一个单独的网页,可以有自己的滚动条、背景、标题等。

框架最常见的用途是导航。 一组框架通常由丰富的导航框架和显示主要内容的另一个框架组成。

9.2 设置frameset属性frameset

框架集合中设置了框架页面的结构,根据框架的分割方式可以分为水平分割窗口、垂直分割窗口和嵌套分割窗口

9.2.1 水平分割窗口行

水平分割窗口是将页面沿水平方向进行剪切,即将页面分割成上下排列的多个窗口。

语法:


	
	
	......

说明:可以按行取多个值,由冒号分隔的像素值或比率组成。

标签位于头部和身体之间

为框架窗口的高度写几个值,从上到下分成几个部分

例如:



	
	水平分割窗口 rows	

 
	
	






运行结果:

9.2.2 垂直分割窗口列

cols属性指定垂直框架的布局方法,它将页面沿垂直方向划分为多个窗口,由冒号分隔的像素值、百分比或相对测量值列表组成。

语法:


	
	
	......

说明:cols垂直划分,每个值代表框架窗口的水平长度,单位可以是像素或者浏览器的比例

写入几个长度值,窗口垂直分成几个部分

例如:



	
	水平分割窗口 rows	


	
	
	








	
	left	


	




















框架窗口左

运行结果:

9.2.3 嵌套分割窗口

一页内同时有水平分框和垂直分框

语法:


	

	
	
	......

例如:



	
	嵌套分割 rows	


	
	
			
		
	






运行结果:

9.2.4 框架的边框frameborder

默认情况下,浏览器总是为每个框架结构添加一个具有显着长度的边框,并且可以通过frameborder来控制边框的显示或隐藏

语法:

注意:frameborder的值只能是0、1或者yes、no。 0 或 no 隐藏边框; 1 或 yes 显示边框。

frameset中设置对整个帧有效,frame中设置只对当前帧有效

例如:



	
	框架边框 rows	

  
	
	
	





运行结果:

设置的框窗口大小可以用键盘调整

9.2.5 边框边框长度(framespacing)

默认框架边框长度为1,可以通过framespacing或border调整边框长度

语法:

阐明:

边框长度是指页面边框之间腰线的长度,以像素为单位。 边框长度只能用于框架集html框架布局,不能用于单个框架。

border和framespacing都用来设置边框长度,但只有border属性在Google浏览器中有效,

建议使用属性border或者两者一起使用

例如:



	
		
		
	
	
	
		
		
			
			
		
	
	
	
				
		
	
	



	
		
		
	
	
		

框架top

运行结果:

(因为有事暂时来到了windows,HBuilder太强大了,windows下google浏览器都可以显示所有字体,我刚刚切换到ubuntu环境,还不是很熟悉)

9.2.6 框架的边框颜色bordercolor

语法:

例如:



	
		
		
	
	
	
		
		
			
			
		
	
	
	
				
		
	
	

运行结果:

9.3 设置窗口属性框

用于定义各个单独的框架页面,框架页面的属性设置都是在该标签中进行的

9.3.1 页面源文件src

框架结构中的每个页面都是一个单独的文件,这些文件通过src指定一个初始文件地址

语法:

注:页面源文件可以是网页文件或图片,地址类型可以是相对地址、绝对地址或带锚链接的地址

例如:网页文件不知道用了多少次,试试普通文件

例如:



	
		
		
	
	
	
		
		
			
			
		
	
	
	
				
		
	
	

运行结果:

手动播放mp3音乐html框架布局,手动下载bmp图像和swf动画

9.3.2 页面名称 name

页面名称是为方便页面查找和链接而提供的属性。 比如左右框架结构,左边是链接,右边是文字。 当点击两边的链接打开两边框架中的文字时,这时候就需要用到name属性了。

语法:

注意:框架的页面名称不允许使用特殊字符、连字符、空格等,并且必须是单个短语或字母组合。

网页前面基本都写了名字

9.3.3 禁止调整窗口规格尺寸

每个框架都有固定的长度和高度,可以通过拖动边框来调整。 (前9.2.4) noresize属性可以严格禁止改变帧大小。

语法:

注意:noresize没有属性值。 添加该属性后,边框无法拖动。 否则,不需要指定该属性

例如:



	
	水平分割窗口 rows	


	
	
	






运行结果:

拖动来改变框架大小变得很困难

9.3.4 边框和页面内容之间的边距宽度

设置框架边框与页面内容之间的水平线间距

语法:

说明:水平行距用于设置页面左右边缘与框架边框的距离

例如:



	
		
		
	
	
		
		
		
			
	



	
		
		
	
	
		
商品名称
产品特点
产品规格



	
		
		
	
	
		

商品名称:

彩音盒

产品特点:

65536色全彩色OLED显示
容量 128MB/256MB/512/MB/1GB(内置)

产品规格:

Type-C高速数据端口、读卡器
支持1G、2G、4G独立显卡
支持动作回馈式VR(虚拟现实)应用(8G 独显)

运行结果:

9.3.5 Marginheight,边框与页面内容之间的垂直线距离

设置边框与页面内容之间的垂直行距

语法:

说明:垂直行距用于设置页面上下边缘与框架边框的距离

例如:



	
		
		
	
	
		
		
		
			
	

和marginwidth一样,只是将marginwidth改为marginheight

运行结果:

左边距没了,出现了行距50

9.3.6 控制框架滚动条显示滚动

一个框架的页面内容往往会超出整个框架的规格范围。 默认情况下,浏览器会在两侧或下方显示滚动条,以便查看者可以拖动来查看全部内容。 但有时你不想显示滚动条,可以通过scrolling属性自由控制滚动条的显示。

语法:

注:滚动的值包括 yes、no 或 auto。 yes表示仍然显示滚动条,no表示无论如何都不显示滚动条,auto默认,内容过长时显示滚动条

例如:



	
		
		
	
	
		
		
		
			
	

运行结果:

左侧滚动条消失

9.3.7 不支持框架标签noframes

如果遇到不支持框架结构的浏览器,或者用户关闭了浏览器的框架显示功能,则需要使用

例如:



	
		
		
	
	
		
		
		
	
		对不起,您的浏览器不支持框架效果!
	

框架集定义了一组框架的布局和属性。 可能没有正文,真正的内容在框架源文件中。

对不起,您的浏览器不支持框架效果!便是出错时页面显示的内容

9.4 浮动框架iframe

浮动框架是一种特殊的框架,它是嵌套在浏览器窗口中的子窗口。 整个页面不一定是框架页面,但一定包含框架窗口。

例如:



	
	浮动框架iframe	


	

运行结果:

9.4.2 浮动框宽度和高度 width height

生成的框架结构取决于上层空间规格,其长度或高度之一必须与上层框架相同。

例如:



	
	浮动框架iframe	


	

运行结果:

9.4.3 浮框对齐方法align

设置浮动框架页面相对于浏览器窗口的水平位置

语法:

说明:值left、right、middle、bottom(底部对齐)

例如:



	
	浮动框架iframe	


	

运行结果:

将浮动框左对齐

9.4.4 浮动框边框显示属性frameborder

语法:

说明:frameborder值与frameset标签类似

只能是 0、1 或是、否。 0 或 no 隐藏边框; 1 或 yes 显示边框。默认显示

例如:



	
	浮动框架iframe	


	

运行结果:

与上一张图片相比,边框被隐藏了

默认显示边框时,

阐明:

滚动的取值范围

属性值

阐明

汽车

默认值,需要时出现滚动条

是的

始终显示滚动条(即使不需要)

从不显示滚动条(即使需要)

例如:



	
	浮动框架iframe	


	

运行结果:

从不显示滚动条(即使需要)

会导致页面的某些部分难以访问

9.5 创建框架链接

一般来说,创建带框架的网页的目的是为了更好地导航页面的内容,并通过框架链接不同的内容。 对于框架页面,设置页面的链接需要使用target

9.5.1 常用框架结构链接

常见的框架结构是通过targets相互链接的。一般一个页面中都会有一个frame窗口作为导航页面,其中添加了到另一个frame内容的链接设置,这个链接是通过target来实现的

关键句型:

北京专线

解释:大型机是一个框架,即页面的一个区域。 点击超链接后,new.html页面会覆盖原来的主机框架

页面,同时显示在主机区域

例如:

框架集索引.html



	
	create frame link	


	
	

顶部.html



	
	顶端框架	
	
	
		
	


	
北京专线 桂林专线 海南专线 华北专线

脚.html



	
	普通框架链接	


	
春节最新路线
北京精彩四日游  
1.第一天
6:00-6:30火车站步行420m地铁二号线7站鼓楼大街(G出口)720m鼓韵国际青旅 8:30-9:10 步行360米 鼓楼桥南 站—13站法华寺站 步行230米 护国寺小吃(红桥店) 10:40-12:40 游览天坛 东门进西门出 步行240m天坛西站2路、93、69大栅栏下车520m - 宏源涮肉城(天坛店)(备选)
2.第二天
8:00-9:00地铁八号线(朱辛庄方向)鼓楼大街3站北土城站—地铁十号线 8站巴沟站—74路柳村-颐和园新建东门 游园路线: 方案一:仁寿殿—文昌阁—德和园—扮戏楼—颐乐殿—宜芸馆—乐寿堂—惠山园—谐趣园—景福阁—智慧海—佛香阁—排云殿—长廊—石舫(坐船到苏州街)北宫门出 方案二:仁寿殿—文昌阁—德和园—扮戏楼—颐乐殿—宜芸馆—乐寿堂—惠山园—谐趣园—景福阁—长廊—石舫—排云殿—佛香阁—智慧海—苏州街—北宫门出
3.第三天
门票:天安门15+故宫80(包含两个馆) 旅游小贴士: 故宫,又称紫禁城,明清两代的皇宫,建议穿运动鞋等平底鞋,故宫地面石路比较不平坦,要好好注意哦~因为故宫里面没有卖饭,所以最好带足早饭、午饭的量的食物哦~ 从故宫北门出来,过了马路就是景山公园,可看到紫禁城的全貌。 从景山公园下来后,如果时间充裕,去紫禁城角楼的位置拍落日余晖,那真真儿的是极美的~ 晚上任意选择地点吃饭
4.第四天
步行400m地铁八号线鼓楼大街—南锣鼓巷(2站)站内换乘—地铁六号线(海淀五路居方向)北海北(b出口)670m恭王府入口(旅游景点备选:世界公园:浓缩的世界 门票100元) 6点半前往机场 地铁八号线鼓楼大街(朱辛庄方向)3站—北土城下车—地铁十号线(内环)5站 三元桥下车—步行180m三元桥机场线T3航站楼20:55-22:55 北京首都机场T2东方航空 MU5172
接待标准:
1.空调旅游车
2.二星或同级标准间
3.所列景点第一门票
4.优秀导游服务
5.三早五正餐

北极.html

与 foot、html 相同

guil.html



	
	普通框架链接	


	
春节最新路线
桂林惬意四日游  
1.第一天
 晚上11:30左右客人指定地点集中出发乘车前往阳朔,全程高速车程约7个小时。住:车上 
2.第二天
 大约凌晨6:00到达桂林,然后大伙在餐店稍作稍作,自理吃第一口正宗的桂林米粉,然后开始我们桂林的精彩行程。   8:00开始乘坐游船游览桂林市山水和人文景观精华——【市内漓江】(龙船坪—斗鸡山—木龙洞,游览时间约1.5小时);沿途观赏斗鸡山、穿山、老人山、七星山、訾州烟雨、“桂林城徽”——象鼻山,“半枕漓江”——伏波山,“江山会景处”—叠彩山;感受山青、水秀、洞奇、石美之美景,亦可体会深潭、险潭、流泉、飞瀑之佳境。   10:00游船市内漓江完毕,然后乘车千前往茶坊休息,桂林茶坊免费品桂林特色美食,吃饱吃足还能带走,请不要忘了给家里的亲朋好友带点噢,喝名茶品桂林小吃不失恰意的事情。在这里能了解桂林的当地茶文化。   12:00乘车回酒店。一晚的车程会感觉稍累,回酒店稍作休息后为下午晚上的精彩行程做好准备。有精力的团友可以在酒店周围闲逛,尽量与当地人答话,当地的“哥哥姐姐妹妹弟弟们”是相当的热情。比自己年长的叫阿哥阿姐,年小的叫阿弟阿妹,以示亲切。
3.第三天
早晨8点起床,用早餐。餐后乘车前往阳朔,然后挑选自己喜爱的单车,骑车经阳朔著名的高田风光——【十里画廊】、前往月亮山。经阳朔著名的高田风光——十里画廊前往月亮山。途径漓江最大的支流——【遇龙河】,可沿遇龙河徒步,找找“走在乡间的小路上”的感觉遇龙河的田园风光堪称一绝。河岸两侧,田畴平整开阔,绿意逼人,稻花飘香。置身其间,顿觉心旷神怡,这感觉在山水甲天下的漓江也找不到。遇龙河其河水见底,水流平缓,两岸碧树绿稼,奇峰怀抱,令人心旷神怡;同时还可开心刺激的打一场水战,实在过瘾!    中午12:00前往【月亮山】吃午餐,享受过一顿正宗的农家饭(香喷喷的农家鸡、绿油油的青菜,听着都很诱人呀)。
4.第四天
 晚餐后到【西街泡吧】,体验一下西街酒吧的小资情调吧!大家可以到酒吧尽情狂欢乐。玩累的团友,也可以在西街找一家安静的咖啡店,品品咖啡,谈谈三天的旅程感受,谈谈生活,谈谈抱负,谈谈人生。  晚上大约12:00在导游指定的集中乘车返回广州,不要误了归家的时间噢。次日6:00左右回到出发地。  住:车上  阳朔——广州  次日6:00左右回到出发地。 共计408元 
接待标准:
1.空调旅游车
2.三星或同级标准间
3.所列景点第二门票
4.优秀导游服务
5.三早六正餐

运行结果:

9.5.2 浮动框架的链接

浮动框架还可以以与普通框架类似的方式在页面之间建立链接

为浮动框架设置一个名称,设置链接时将链接的目标设置为浮动框架的名称

例如:暂时省略

第 9 章总结 9.2 设置框架集属性



	
	总结	


	
	
	
	


	sorry,您的浏览器不支持框架结构的显示

嵌套分割:(很简单,在框架集中嵌套另一个框架集即可实现)


	

	
	
	......

框架框架集其他属性



	
	总结	


	
	
	


	sorry,您的浏览器不支持框架结构的显示


9.3 窗框属性



	
	总结	


	
	
	


	sorry,您的浏览器不支持框架结构的显示



9.4 浮动框架iframe



	
	总结	


	
			...
			
		...
	

9.5 创建框架链接

定义框架时,给框架一个name属性参数,定义超链接时,target属性值取框架名称值,那么当点击超链接时,href属性指定框架中要显示的页面(窗口)那么容易



	
	create frame link	


	
	<frame src="foot.html" name="mainframe" id="mianframe" />

顶部.html



	
	顶端框架	


	
<a href="images/beiji.html" target="mainframe">北京专线 <a href="images/guil.html" target="mainframe">桂林专线

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悟空资源网 html html框架布局-前端基础HTML第九章使用框架结构--暑期学习第五天 https://www.wkzy.net/game/167845.html

常见问题

相关文章

官方客服团队

为您解决烦忧 - 24小时在线 专业服务