zoukankan      html  css  js  c++  java
  • 我给女朋友讲编程html系列(3) --html中的超链接标签-a标签 和 框架frame与框架集frameset

      我们浏览网页的时候,当单击某段文字或图片时,就会打开一个新的网页,这里面就使用了超链接。

      就比如下图是一个导航类网页,当你单击某个链接就会打开新的网页。

       比如,我拿我的qq空间“金河访谈”举例,新建一个网页 a.html,输入下面的内容:

    <html>
    <head>
    <title>
    html中的超链接标签-a标签
    </title>
    </head>
    <body>
    1,直接转向其他页面:
    <a href="http://1012587996.qzone.qq.com">金河访谈</a>
    2,单独打开一个窗口:
    <a href="http://1012587996.qzone.qq.com"  target="_blank">金河访谈</a>


    </body> </html>

      

      然后,双击打开这个网页,效果如下:

      

      当你单击第一个“金河访谈”的时候,会直接从本网页转入到我的qq空间,而如果单击第2个“金河访谈”,就会单独打开一个窗口,第一个页面仍然存在。

      大多数情况,我们都会选择第2种方式打开网页,这么做有两个好处,1,用户可以同时查看两个网页,让用户选择关闭;2,让自己的网页多停留一会,增加推广率。

     

      下面讲一下a标签的用法:

      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个“爱淘宝”超链接一样。

    2,target="_self" :这个是默认值,所有没有指明target属性的a标签都是默认这个_self,直接转向另外一个网页。

     

      

      要想搞明白target等于_parent、_top,需要先讲一下框架集frameset和框架frame。

     

      首先来看一个例子,使用框架集frameset和框架frame来实现的菜单例子:

      如下图,刚开始打开这个“框架集和框架.html”这个网页时,显示的效果如下:

     

      左边相当于是一个菜单,右边是显示效果,当你单击“百度”时,效果如下:

     

      单击“淘宝”时效果如下:

      

      这就是我使用frameset和frame来实现的菜单功能。下面看一下代码:

     

      1,新建一个网页“框架集和框架.html”,输入下面的内容:

     

    <html>
    <head>
    <title>
    框架集frameset和框架frame
    </title>
    </head>
    <frameset cols="20%,80%">
    <frame src="menu.html" />
    <frame  src="http://qq.com" name="RightFrame" />
    </frameset>
    </html>

      

     这个网页没有<body>标签,<body>标签和<frameset>标签不能同时使用。因为frame代表的就是另外一个网页,它的src属性指定了要显示的网页地址。

     

      frameset标签的cols属性,指定了两列(column),一列占20%,另外一列占80%。

      如果设置 cols="200px,*",那么第一列占200像素,第二列占剩下的位置。

      还可以设置rows=“20%,80%”,这样相当于设置了两行,一行占20%,另外一行占80%。

     

      看看第一个frame,它的src="menu.html",这样左边的frame就会默认显示menu.html的内容。

      

      第二个frame,它的src="http://qq.com" ,这样右边的frame就会默认显示qq的首页。另外,给它指定了属性name="RightFrame",这样第二个frame就是一个有名字的frame了,等会看一下menu.html的源代码就知道设置它的原因了。

     

    2,新建一个网页“menu.html”,输入下面的内容:

    <html>
    <head>
    <title>
    菜单menu
    </title>
    </head>
    <body>
    <a href="http://qq.com/"  target="RightFrame">qq</a>
    <a href="http://baidu.com" target="RightFrame">百度</a>
    <a href="http://taobao.com" target="RightFrame">淘宝</a>
    </body>
    </html>

      

      可以看到,我定义了3个a标签,并且指定它们的target="RightFrame",也就是打开网页的目标是在“RightFrame”的框架中。

      这样,不管你单击 qq,百度,淘宝,都会在右边的frame中打开这个网页。

     

      左边的frame内部嵌入的网页就是一个菜单页,它始终不变,当单击不同的网页地址时,就在右边的frame中显示出来。

     

      

      这里a标签的target属性指定了一个固定的值,当你单击这个链接的时候,浏览器首先会查看有没有一个叫"RightFrame"的框架或窗口,如果没有,浏览器会创建一个叫"RightFrame"的窗口,如果其他a标签的target也指定了RightFrame,那么单击其他a标签时,这个a标签src指定的网页就会在RightFrame窗口中打开,替换前面的网页内容,因为他们指定了相同的target。

     

      

      下面,讲一下target="_parent"。在"menu.html"中插入下面的代码:

     

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

      

      这个时候,在浏览器中打开”框架集和框架.html“,单击”在父框架中打开qq“,这个时候,你会发现,整个网页直接转向了qq首页。

     

      ”框架集和框架.html“就相当于”menu.html“的父框架,当”menu.html“中的a指定了target="_parent"时,就会直接在”框架集和框架.html“中打开这个网页。

     

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

     

      其实,对于target="_top"和target="_parent",平常用的都比较少,但是你要理解它,需要搭配着frameset和frame来理解。

     

      写这篇文章,我用了4个小时,如果你想学会这一点内容,最起码得动手练一下吧。祝你学习进步啊。


     

  • 相关阅读:
    ModSecurity for Nginx
    一些好用的nginx第三方模块
    ModSecurity--web应用防火墙
    mycat表拆分操作教程
    .NET解析HTML库集合
    MySQL分库分表
    Redis配置文件参数说明
    redis优化优秀文选
    MySQL订单分库分表多维度查询
    每秒处理10万订单乐视集团支付架构
  • 原文地址:https://www.cnblogs.com/workest/p/3856085.html
Copyright © 2011-2022 走看看