HTML框架结构标签(frameset)

第一次了解到竟然还有HTML框架结构标签()。为此小编在实例中应用了一下,但是在搭建框架之初就遇到 了问题。为此总结本博客,以便大家能及时解决问题。

什么是HTML框架结构标签()

通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架,并且每个框架都独立于其他的框架。
详情参考:http://www.w3school.com.cn/html/html_frames.asp

需要实现的效果

如下图,我的也没中有三个html页的框架,TOP页是一个题目,LEFT是目录,RIGHT页是详情,当点击LEFT页中的不同按钮的时候,会将不同的内容也显示在RIGHT页中。
HTML框架结构标签(frameset)_第1张图片

代码实现整体框架

<html>
    <head>
        <meta charset="UTF-8">
        <title>网站后台框架页面title>
    head>
    
    <frameset rows="20%,*">
        <frame src="top.html"/>
        <frameset cols="20%,*">
            <frame src="left.html"/>
            <frame src="right.html"/>
        frameset>
    frameset>
html>
代码实现——top.html

<html>
    <head>
        <meta charset="UTF-8">
        <title>title>
    head>
    <body>
        欢迎进入XXXX后台系统
    body> 
html>
代码实现——left.html

<html>
    <head>
        <meta charset="UTF-8">
        <title>title>
    head>
    <body>
        <a href="#">会员管理a>
        <a href="#">产品管理a>
        <a href="#">员工管理a>
        <a href="#">系统管理a>
    body> 
html>
代码实现——right.html

<html>
    <head>
        <meta charset="UTF-8">
        <title>title>
    head>
    <body>
        会员用户信息
    body> 
html>

完成上面代码后,我们先看一下效果图
HTML框架结构标签(frameset)_第2张图片
有图可以看出,我们这里是有问题的:
1、在刚刚打开网页后,在未点击左侧的目录按钮的时候,左侧是不应该有内容的。只有在点击“会员管理”按钮的时候才有内容。
2、需要在点击“会员管理”按钮的时候才能出现会员信息页。




<html>
    <head>
        <meta charset="UTF-8">
        <title>title>
    head>
    <body>
         <a href="right.html">会员管理a><br/>br>
        <a href="#">产品管理a><br/>br>
        <a href="#">员工管理a><br/>br>
        <a href="#">系统管理a><br/>br>
    body> 
html>

此时,我们刷新页面,得出的依旧如刚才的效果如下:
HTML框架结构标签(frameset)_第3张图片
此时我们再次点击“会员管理”按钮出现如下情况。目录页消失 了,变成了信息页。
HTML框架结构标签(frameset)_第4张图片
经过查询才知道,这个框架需要和超链接中的target属性一起使用。target属性既可以使用默认的属性值,也可以自定义属性值。为此,我们对(框架页面)和left.html页面都做一下修改。

代码实现——left.html



<html>
    <head>
        <meta charset="UTF-8">
        <title>title>
    head>
    <body>
         <a href="right.html" target="right_demo">会员管理a><br/>br>      
         
        <a href="#">产品管理a><br/>br>
        <a href="#">员工管理a><br/>br>
        <a href="#">系统管理a><br/>br>
    body> 
html>
代码修改——整体框架页面


<html>
    <head>
        <meta charset="UTF-8">
        <title>网站后台框架页面title>
    head>

    <frameset rows="20%,*">
        <frame src="top.html"/>
        <frameset cols="20%,*">
            <frame src="left.html"/>
            <frame name="right_demo"/>
        frameset>
    frameset>
html>

这样我们的功能就实现了,在刚刚打开页面的时候,右侧的页面中没有任何内容,仅仅在点击“会员管理”按钮后显示相关内容。

你可能感兴趣的:(▷6.3)——html)