HTML-frame导航框架

最新推荐文章于 2025-07-07 19:00:03 发布

转载最新推荐文章于 2025-07-07 19:00:03 发布 · 2.4k 阅读

文章标签：

#前端 #HTML #frame标签 #a标签 #导航框架

HTML 专栏收录该内容

1 篇文章

订阅专栏

HTML-利用frame实现导航框架

在w3School学习的过程中，由于完整代码查看复杂，故在此做以下记录。
导航窗口可以实现在同一浏览器页面，浏览不同的页面。一个页面的超链接一般跳转到一个新的浏览器窗口，而导航框架可以通过超链接在同一窗口显示不同的页面。
总共需要5个HTML页面，分别命名为index.html,menu.html,frame_a.html、frame_b.html、frame_c.html。

1.首先是index.html的代码

<html>
    <head>
    <title>html frameset和frame</title>
    </head>
    
    <frameset cols="30%,70%">//或者<frameset cols="120,*">
        <frame src="menu.html" />
        <frame name="RightFrame" src="frame_a.html" noresize="noresize" />//默认显示frame A的样式
    </frameset>
</html>

这个网页没有body标签，body标签和frameset标签不能同时使用。因为frame代表的就是另外一个网页，它的src属性指定了要显示的网页地址。
noresize 属性使得框架不可调整尺寸，即在框架间的边框上拖动鼠标，边框是无法移动的。
frameset标签的cols属性，指定了两列(column)，一列占30%，另外一列占70%。
　如果设置 cols=“120px,*”，那么第一列占120像素，第二列占剩下的位置。
同样的，第一个frame的src=“menu.html”，它默认显示的内容就是menu的内容，即左边的导航部分。

2.接下来是menu.html的内容

<html>
    <head>
    <title>menu</title>
    </head>
    
    <body>
        <a href="frame_a.html" target="RightFrame">frame_a</a> <br/>
        <a href="frame_b.html" target="RightFrame">frame_b</a> <br/>
        <a href="frame_c.html" target="RightFrame">frame_c</a> <br/>
    </body>
</html>

a标签指定它们的target=“RightFrame”，（与frame标签的name属性对应）也就是打开网页的目标是在“RightFrame”的框架中,即，a、b、c都会在右边的frame中打开这个网页。
左边的frame内部嵌入的网页就是一个菜单页，它始终不变，当单击不同的网页地址时，就在右边的frame中显示出来。
这里a标签的target属性指定了一个固定的值，当你单击这个链接的时候，浏览器首先会查看有没有一个叫"RightFrame"的框架或窗口，如果没有，浏览器会创建一个叫"RightFrame"的窗口，如果其他a标签的target也指定了RightFrame，那么单击其他a标签时，这个a标签src指定的网页就会在RightFrame窗口中打开，替换前面的网页内容，因为他们指定了相同的target。

3.接下来是frame_a.html的代码

<html>
    <head><title>Frame A</head>
    
    <body bgcolor="red">
        frame_a
    </body>
</html>

frame_b.html和frame_c.html与此相似，根据实际需要更改即可。

4.效果图如下

在这里插入图片描述

一些补充

a标签最重要的属性是href，href 指定了要打开的网页的网址，网页网址又叫做Url，Url 全称是：Uniform Resoure Locator（统一资源定位器），是网页的网址。
href指定的url可以是绝对url，直接指向一个完整的网页，比如 www.baidu.com，直接可以打开百度的首页。
href指定的url还可以是相对url，相对指的是仅仅针对同一个网站内的不同网页。比如，你在很多网页上都添加了下面一句：

<a href="home.html"> 首页</a>

只要href指定的路径正确，home.html确实存在，那么当用户单击“首页”的时候就可以返回到 home.html页。

a标签的target属性是“目标”的意思，说的是在哪里打开这个网页，它有4个特殊的值：_blank，_self，_parent，_top。
1. target="_blank" : 浏览器总是打开一个新的网页。
2. target="_self" ：这个是默认值，所有没有指明target属性的a标签都是默认这个_self，直接转向另外一个网页。
3. target="_parent"：在父框架中打开。
  如以下代码：

<a href="http://qq.com" target="_parent">在父框架中打开qq</a>

单击”在父框架中打开qq“，这个时候，你会发现，整个网页直接转向了qq首页。

target="_top"也是类似的，因为frame内部还可以嵌入frameset，因此，会出现多次嵌套的情况，当指定了target="_top"之后，就会在最顶层的框架中，直接打开网页。

使用框架导航跳转至指定的节

//index.html
<frameset cols="180,*">
      <frame src="content.html">
      <frame src="link.html" name="showframe">
</frameset><noframes></noframes>

//content.html
<a href="link.html" target="showframe">没有锚的链接</a>
<a href="link.html#C10" target="showframe">带有锚的链接</a>

//link.html部分代码
<h1>Chapter 9</h1>
<p>This chapter explains ba bla bla</p>
<h1><a name="C10">Chapter 10</a></h1>
<p>This chapter explains ba bla bla</p>