HTML开发与应用初级部分:frame标签与网页页面中划分

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页面中改变。

猜你喜欢

转载自blog.csdn.net/qq_42802111/article/details/81255204
今日推荐