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

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

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

  1. <html>
  2. <head>
  3. <title>
  4. html中的超链接标签-a标签
  5. </title>
  6. </head>
  7. <body>
  8. 1，直接转向其他页面：
  9. <a href="http://1012587996.qzone.qq.com">金河访谈</a>
  10. 2，单独打开一个窗口：
    <a href="http://1012587996.qzone.qq.com"  target="_blank">金河访谈</a>
  11.  
  12. </body>
  13. </html>

　　

　　然后，双击打开这个网页，效果如下：

　　

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

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

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

　　a标签最重要的属性是href，href 指定了要打开的网页的网址，网页网址又叫做Url，Url 全称是：Uniform Resoure Locator（统一资源定位器），是网页的网址。

　　

　　href指定的url可以是绝对url，直接指向一个完整的网页，比如 www.baidu.com，直接可以打开百度的首页。

　　href指定的url还可以是相对url，相对指的是仅仅针对同一个网站内的不同网页。比如，你在很多网页上都添加了下面一句：

  1. <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”，输入下面的内容：

  1. <html>
  2. <head>
  3. <title>
  4. 框架集frameset和框架frame
  5. </title>
  6. </head>
  7. <frameset cols="20%,80%">
  8. <frame src="menu.html" />
  9. <frame  src="http://qq.com" name="RightFrame" />
  10. </frameset>
  11. </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”，输入下面的内容：

  1. <html>
  2. <head>
  3. <title>
  4. 菜单menu
  5. </title>
  6. </head>
  7. <body>
  8. <a href="http://qq.com/"  target="RightFrame">qq</a>
  9. <a href="http://baidu.com" target="RightFrame">百度</a>
  10. <a href="http://taobao.com" target="RightFrame">淘宝</a>
  11. </body>
  12. </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"中插入下面的代码：

  1. <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个小时，如果你想学会这一点内容，最起码得动手练一下吧。祝你学习进步啊。

我给女朋友讲编程html系列(3) --html中的超链接标签-a标签 和 框架frame与框架集frameset的更多相关文章

  1. 我给女朋友讲编程html系列(4) -- html常用简单标签

    今天似乎有点感冒,浑身无力,在操场上躺了半个小时,好了许多.好了,废话不说了,还是写今天的教程吧. 1,html中的换行标签是 br,写法是: <br /> 2,html中有一些特殊的字符 ...

  2. 我给女朋友讲编程html系列(2) --Html标题标签h1

    Html是一门标签语言,因此学习Html最快的方式就是学习使用html标签. html标题标签:h1,h2,h3,h4,h5,h6 标题标签总共有6个,h1,h2,h3,h4,h5,h6,从h1到h6 ...

  3. 我给女朋友讲编程html系列(1) -- Html快速入门

    Html是一门编写网页的语言. 在我学习Html的时候,网上的很多朋友说,直接使用[记事本]编写就行了,最后保存为后缀名为 .html 的文件. 不过,我建议你用[Nodepad++]来编写网页,用这 ...

  4. 我给女朋友讲编程CSS系列(3) CSS如何设置字体的类型、大小、颜色，如何使用火狐浏览器的Firebug插件查看网页的字体

    一.CSS如何设置字体的类型.大小.颜色 设计网页时,一般设置body的字体,让其他标签继承body的字体,这样设置特别方便,但是标题标签h1到h6和表单标签(input类型)是没有继承body的字体 ...

  5. 我给女朋友讲编程CSS系列(2)- CSS语法、3大选择器、选择器优先级

    首先看一下使用Css设置h1标签字体颜色和大小的例子,效果图如下: 新建一个网页test.html,然后复制粘贴下面的内容: <html> <head> <style t ...

  6. 我给女朋友讲编程CSS系列(4) CSS盒子模型

    什么是CSS盒子模型?如何学习CSS的盒子模型? 这篇文章,以 [分享 + 结论]  的方式来写. 1,  看w3school的[CSS 框模型概述] 网址为: http://www.w3school ...

  7. 我给女朋友讲编程CSS系列(1) –添加CSS样式的3种方式及样式表的优先权

    如果说,原生态就是美,那么,我们就没有必要穿衣打扮. 网页是什么? 说白了,网页就是一堆[html标签]有序的搭配,让[CSS属性值]整整容,请[Javascript语言]处理一下事件. 一个人的整容 ...

  8. 我给女朋友讲编程总结建议篇，怎么学习html和css

    总共写了11篇博客了,7篇讲html的,4篇讲网络的.不敢说写的多么好吧,最起码的是我迈出了写作的第一步,写作的过程中了解了一些其他的知识,比如SEO.几种重定向等,由于个人能力和见识有限,写出来的东 ...

  9. 我给女朋讲编程网络系列(2)--IIS8 如何在本地发布网站

    通过IIS8 在本地发布网站,一个截图,你就全明白了,越是简单,越是实用. 如果有现成的网站,就将你的网站放到一个文件夹中,比如WebTest2中. 如何没有网站,可以在WebTest2中新建一个in ...

随机推荐

  1. wp8.1 全球化解决办法

    最近在更新一个应用,在wp8.1里面重写整个应用,由于8.1版本的api.架构和windows8.1的接口高度相同,变化很大,在编码过程中,只能一边翻msdn资料一边摸索解决遇到的问题,其中程序标题和 ...

  2. docker开发_在basic image的基础上创建自定义的image

    方法一:docker commit 1. 跑一个basic image,docker新建了一个容器 root@ubuntu:/home/thm/docker/test# docker run -i - ...

  3. 比较合并工具vimdiff的主要用法归纳

    参考:https://www.ibm.com/developerworks/cn/linux/l-vimdiff/ vimdiff主要用法归纳如下:   1.打开文件 vimdiff file1 fi ...

  4. MySQL自用脚本（不定期更新）

    查询指定SQL的trace信息 mysql -uUSER -pPWD -hHOST -e "\ use ins_tc_prd; \ set session optimizer_trace=' ...

  5. IL中的栈和闪电的Owin推荐

    最近几天有幸得到闪电大哥的指点,了解了EMIT和IL中的一些指令.虽然有高射炮打蚊子的说法,但是我相信“二八定律”,80%的功能可以用20%的技术解决,20%的功能只能用80%的技术解决.大哥的博客: ...

  6. Python多版本安装 Python2.7和Python3.5

    声明:本文仅仅在win8.1测试通过! 1.下载 Python2.7,3.5 2.依次安装Python27(c:\Python27)  Python35(c:\Python35) 3.c:\Pytho ...

  7. C 网页压力测试器

    引言 <<独白>> 席慕蓉 节选一 把向你借来的笔还给你吧. 一切都发生在回首的刹那. 我的彻悟如果是缘自一种迷乱,那么,我的种种迷乱不也就只是因为一种彻悟? 在一回首间,才忽 ...

  8. [第四版]用getaddrinfo设置tcp基本连接属性

    getaddrinfo getaddrinfo的一个重要功能, 很方便的构造struct sockaddr_in对象, 把繁琐的构造过程隐藏起来 getaddrinfo兼有gethostbyname和 ...

  9. spring 3 的 @value的使用

    Spring 3支持@value注解的方式获取properties文件中的配置值,大大简化了我们读取配置文件的代码.使用方式如下: 1.首先必须要配置properties文件的加载bean:在spri ...

  10. Nginx初始化过程总结

    对于Nginx这样一个模块化的服务器,看代码是最好的理解方式了.再此通过读main() 函数来简述一下Nginx的初始化过程: 这就是整个main函数的执行过程: