HTML开发与应用初级部分:frame标签与网页页面中划分
大多数新闻网页中因为承载信息内容量巨大,所以将网页界面分块呈现是很有必要的。或者说将网页左边设置为导航栏,让右边的界面随之改变。
frame标签的举例:
此图片足以显示这种划分结构的实用性,左边有导航栏,中间为内容部分,右边是一些超链接,跳转到相关界面。
frame标签的基本用法与举例:
<frameset rows="100px, *">
<frame/>
</frameset>
第一行:frameset标签的用法如果将屏幕左右分则用rows属性,如果上下划分,则需要写属性标 签cols(这里注意,因为在rows或cols后面是具体参数并且是两个,如果两个部分分别占满全屏,则必须要写*,而不能省略)。
第二行:frame是用来承载分页面的内容。
第三行:结尾。
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<frameset rows="100px, *">
<frame src="frame_01.html"/>
<frameset cols="150px,*">
<frame src="frame_02.html"/>
<frame name="content" src="frame_03.html"/>
</frameset>
</frameset>
</html>
这些代码呈现出一个上下分为A,B,再将B分为C,D。我们要注意的是,没有一个分页面,都必须要加上一个frame标签,用来承载内容。此处简写其两个分页面。
第一个分页面 (内容):
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
内容
</body>
第二个分页面:
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>郑州大学</h1>
</body>
</html>
这里细说第三个分页面,并且穿插有关超链接的基础内容:
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
<ul>
<li><a href="http://www.baidu.com" target="content">为了部落</a></li>
<li><a href="http://www.baidu.com" target="content">为了部落</a></li>
<li><a href="http://www.baidu.com" target="content">为了部落</a></li>
<li><a href="http://www.baidu.com" target="content">为了部落</a></li>
</ul>
<ol>
<li><a href="http://www.sohu.com" target="content">为了联盟</a></li>
<li><a href="http://www.sohu.com" target="content">为了联盟</a></li>
<li><a href="http://www.sohu.com" target="content">为了联盟</a></li>
<li><a href="http://www.sohu.com" target="content">为了联盟</a></li>
</ol>
</div>
</body>
</html>
要点一:有序列表与无序列表。
无序列表的标签为ul,而ul中又有列表标签li。
有序列表分标签为ol,而ol中有有列表标签li。
要点二:超链接。
标签a大家并不陌生,因为a标签中的属性标签href指向了一个网站,此处注意需要加上此链接的协议部分(开头开头的第一部分是协议http,第二部分是主机名www,第三部分则是申请的申请域名baidu.com,第四部分就是文件名。)
要点三:指向页面的跳转标签target。
我们想把跳转的内容放到其他分页而不是导航栏中的分页,那么首先应给内容分页起一个名字name属性标签,如上述程序frame name=”content” src=”frame_03.html”,那么在使用target标签,只想所起的名字即可。
并且,target有很多跳转页面的方式,比如:
_self当前页面跳转。
_parent父页面跳转。
_blank跳转新的空表页面。
上述程序的效果图:
可见如我面所欲想的一样,点击菜单栏中的内容,让content页面中改变。