HTML基础第十二讲---链接标志

转自：https://i.cnblogs.com/posts?categoryid=1121494

没有链接，WWW将失去存在的意义！WWW之所以受欢迎，乃在于她除了有精美的图文之外，更有方便且多样化的链接，让使用者可以很快的找到其所需的资料，也让网络能提供更多的服务！ 
【WWW链接标志基本概念】
1. 链接基本概念：一般而言，所谓链接就是，在网页中有些字会有特别的颜色，而且字的底下会有条线，当光标移到那些字上时，会变成手指形状，按下去，则会连到别的文章或网站，就像这样（以上这段是给超级新手看的...）。 
说到链接，最基本来看有『内部链接』及『外部链接』，所谓『内部链接』就是自己网站间网页的链接，至于外部链接我们稍后再来讨论。 
要了解内部链接，首先必须先了解一下这两种东西，一个是『相对路径』，一个是『绝对路径』。 
现在假设一个情形：我们在自己的计算机里设计网页，所有网页相关的档案我们通通放在 c:\www 里面，现在假设 c:\www 里面目前有 index.htm 、 text1.htm 、 p1.gif 、 p2.gif 这四个档案。ok！ 
现在我们想在 index.htm 里面设一个链接，能够按一下就连到 text1.htm，那我们该怎么做呢？基本上，有两中方式可以做到，在 index.htm 里面加上下面任一叙述：

<a href=/c|/www/text1.htm>	这就是『绝对路径』
<a href=text1.htm>	这就是『相对路径』

瞧出什么端倪了没有？嗯嗯....没错，『绝对路径』要给计算机一个非常详尽的位置，让计算机寻着这路径去找到档案。而『相对路径』就简单多啦！如果没有特别指定，他就会直接在 index.htm 的所在目录下找，也就是在 c:\www 底下去找text1.htm。 
如果说，今天我们将 c:\www 里所有的档案都上传到网络上的网页服务器（总不能做好了只给自己看吧！），且该服务器是别人的计算机，而非你自己架设的主机，那么问题就来了！你猜，哪一种链接会出问题？呵呵...答案是『绝对路径』，您猜对了吗？ 
为什么说『绝对路径』会出问题呢？因为，当您将档案上传到网络上时，您的整个网页目录架构一定会变，到时候，计算机可能找不到 c:\ （尤其是unix系列的主机）更可能找不到 www 这目录（有些会规定要放在特定的目录下才能显示网页），所以说，没事的话，尽量用『相对路径』来作链接吧！好写又不容易出错。 
另外一个情形是：为了整理方便，有些网友喜欢将图档通通放到同一个目录下，如：c:\www\gif\ 底下放进了p1.gif 、 p2.gif两个图，而index.htm 、 text1.htm 依旧在 c:\www 底下。现在我们想在 index.htm 下设个链接到 p1.gif 这图档（链接不限于只能连html文件，图文件、文字文件均可），那我们又该如何来使用『相对路径』呢？他们又不在『同一个目录』下...？

<a href=/c|/www/gif/p1.gif>	这是『绝对路径』的写法
<a href=gif/p1.gif>	这是『相对路径』的写法

如何？不难吧！（只是字有点多，看到脑子发胀）
2. 总结一下：很乱吗？嗯...看看这表，或许会清楚些。

相对路径表示方式	代表链接位置
<a href=text1.htm>	text1.htm在目前的目录中（就例子而言，就是在c:\www中）
<a href=docs/text1.htm>	text1.htm在名为docs的次目录中（就本例而言，就是在c:\www\docs中）
<a href=../text1.htm>	text1.htm在目前目录的上一层目录中（就本例而言，就是在c:\底下了）

【网页内部的链接】
1. 使用方法： 
（1）. 先在欲链接处作记号：<a name=here1>这里是你想链接的点</a> 
（2）. 设定链接：<a href=#here1>链接</a> 
2. 标志解说：有时候，当某页的内容很多时，我们可以利用网页的内部链接，来使使用者快速的找到资料。其原理不过是：在欲链接处做个记号（网页的任何地方都可以喔！），然后，链接时就寻这记号，就可以快速找到资料。很简单吧！ 
3. 使用范例：

范例	第一步骤	第二步骤
www链接标志基本概念	<a name=m1>欲链接的位置</a>	<a href=#m1>www链接标志基本概念</a>
网页内部的链接	<a name=m2>欲链接的位置</a>	<a href=#m2>网页内部的链接</a>
网页外部的链接	<a name=m3>欲链接的位置</a>	<a href=#m3>网页外部的链接</a>

【网页外部的链接】
1. 标志解说：链接到外面去，可以扩充您网站的实用性及充实性，也正因这功能，才造就了www五彩缤纷的世界。由于网络上的服务五花八门，所以不同的服务有不同的链接方法，工友将之整理在下表。 
2. 使用范例：

网站链接	好站	<a href=http://www.wrclub.net>好站</a>
电子邮件链接	写信给朋友	<a href=mailto:fuxing@wrclub.net>写信给朋友</a>
ftp链接	下载档案	<a href=ftp://ftp.wrclub.net>下载档案</a>
news链接	[url=news:news.seed.net.tw]seednet news服务[/url]	<a href=news:news.wrclub.net>seednet news服务</a>
gopher链接	seednet gopher服务	<a href=gopher://gopher.wrclub.net/>seednet gopher服务</a>
bbs链接	seednet gopher服务	<a href=telnet://bbs.wrclub.net/>seednet bbs服务</a>

【链接标志的参数】
1. 使用方法：在链接后面加入 target=_参数 
2. 标志解说：链接的参数并不多，常见的大概就属 target 这参数了，target 的意思是『目标』，也就是网页链接的指向目标，这参数在框窗（frame）里尤为重要！ 
3. 使用范例： 
o target=框窗名称：这在『框架标志』中也有提到，而且也只有在框架（框窗 or frame）中才用得到。正常而言，框窗有各自的名称，因此，我们可以利用此标志，来指定链接的内容显示到哪一个框窗中。 
o target=_blank：将链接的画面内容，开在新的浏览窗口中。 
o target=_parent：将链接的画面内容，当成文件的上一个画面。 
o target=_self：将链接的画面内容，显示在目前的窗口中。 
o target=_top：这个参数可以解决新链接的画面内容，被旧框窗包围的困扰，使用这参数，会将整个画面重新显示成链接的画面内容。

画中画效果---谈Iframe标记的使用

　　纵观时下网站，本来网速就有些慢，可是几乎每页都要放什么Banner，栏目图片，版权等一大堆雷同的东西，当然，出于网站风格统一、广告效应的需要，本无可厚非，可毕竟让用户的钱包为这些点缀的东西日益消得钱憔悴了，有没有办法，让这些雷同的东西一次下载后就不用再下载，而只下载那些内容有变化区域的网页内容呢？
  　　答案很肯定：应用Iframe标记！
  
  　　一、Iframe标记的使用
  
  　　提起Iframe，可能你早已将之扔到被遗忘的角落了，不过，说起其兄弟Frame就不会陌生了。Frame标记即株记，我们所说的多帧结构就是在一个浏览器窗口中显示多个HTML文件。现在，我们遇到一种很现实的情况：如有一个教程，是一节一节地上，每页末尾做一个上一节、下一节的链接，除了每节教程内容不同之外，页面其它部分内容都是相同的，如果一页一页地做笨页面，这似乎太让人厌烦了，这时突发奇想，如果有一种方法让页面其它地方不变，只将教程做成一页一页的内容页，不含其它内容，在点击上下翻页链接时，只改变教程内容部分，其它保持不变，这样，一是省时，另则以后如教程有个三长两短的变动，也很方便，不致于牵一发而动全军了;更重要的是将那些广告Banner、栏目列表、导航等几乎每页的都有的东西只下载一次后就不再下载了。
  
  　　Iframe标记，又叫浮动株记，你可以用它将一个HTML文档嵌入在一个HTML中显示。它不同于Frame标记最大的特征即这个标记所引用的HTML文件不是与另外的HTML文件相互独立显示，而是可以直接嵌入在一个HTML文件中，与这个HTML文件内容相互融合，成为一个整体，另外，还可以多次在一个页面内显示同一内容，而不必重复写内容，一个形象的比喻即画中画电视。
  
  　　现在我们谈一下Iframe标记的使用。
  
  　　Iframe标记的使用格式是:
  
  　　<Iframe src=URL width=x height=x scrolling=[OPTION] frameborder=x></iframe>
  　　src：文件的路径，既可是HTML文件，也可以是文本、ASP等；
  　　width、height：画中画区域的宽与高；
  　　scrolling:当SRC的指定的HTML文件在指定的区域不显不完时，滚动选项，如果设置为NO，则不出现滚动条；如为Auto：则自动出现滚动条；如为Yes，则显示;
  　　FrameBorder：区域边框的宽度，为了让画中画与邻近的内容相融合，常设置为0。
  
  比如:
  
  　　<Iframe src=http://netschool.cpcw.com/homepage width=250 height=200 scrolling=no frameborder=0></iframe>
  
  　　二、父窗体与浮动帧之间的相互控制
  
  　　在脚本语言与对象层次中，包含Iframe的窗口我们称之为父窗体，而浮动帧则称为子窗体，弄清这两者的关系很重要，因为要在父窗体中访问子窗体或相反都必须清楚对象层次，才能通过程序来访问并控制窗体。
  
  　　1、在父窗体中访问并控制子窗体中的对象
  
  　　在父窗体中，Iframe即子窗体是document对象的一个子对象，可以直接在脚本中访问子窗体中的对象。
  
  　　现在就有一个问题，即，我们怎样来控制这个Iframe，这里需要讲一下Iframe对象。当我们给这个标记设置了ID 属性后，就可通过文档对象模型DOM对Iframe所含的HTML进行一系列控制。
  
  　∪如在example.htm里嵌入test.htm文件，并控制test.htm里一些标记对象：
  　　<Iframe src=test.htm id=test width=250 height=200 scrolling=no frameborder=0></iframe>
  test.htm文件代码为:
  　　<html>
  　　　<body>
  　　　　<h1 id=myH1>hello,my boy</h1>
  　　　</body>
  　　</html>
  　　如我们要改变ID号为myH1的H1标记里的文字为hello,my dear，则可用:
  　　document.myH1.innerText=hello,my dear(其中，document可省)
  　　在example.htm文件中，Iframe标记对象所指的子窗体与一般的DHTML对象模型一致，对对象访问控制方式一样，就不再赘述。
  
  　　2、在子窗体中访问并控制父窗体中对象
  
  　　在子窗体中我们可以通过其parent即父（双亲）对象来访问父窗口中的对象。
  　　如example.htm：
  　　<html>
  　　　<body >
  　　　　<Iframe name=tt src=frame1.htm width=250 height=200 scrolling=no frameborder=0></iframe>
  　　　　<h1 id=myH2>hello,my wife</h1>
  　　　</body>
  　　</html>
  　　如果要在frame1.htm中访问ID号为myH2中的标题文字并将之改为hello,my friend，我们就可以这样写：
  　　parent.myH2.innerText=hello,my friend
  　　这里parent对象就代表当前窗体(example.htm所在窗体)，要在子窗体中访问父窗体中的对象，无一例外都通过parent对象来进行。
  
  　　Iframe虽然内嵌在另一个HTML文件中，但它保持相对的独立，是一个独立王国哟，在单一HTML中的特性同样适用于浮动帧中。
  
  　　试想一下，通过Iframe标记，我们可将那些不变的内容以Iframe来表示，这样，不必重复写相同的内容，这有点象程序设计中的过程或函数，减省了多少繁琐的手工劳动！另外，至关重要的是，它使页面的修改更为可行，因为，不必因为版式的调整而修改每个页面，你只需修改一个父窗体的版式即可了。
  
  　　有一点要注意，Nestscape浏览器不支持Iframe标记，但在时下IE的天下，这似乎也无大碍，广泛采用Iframe标记，既为自己(网站)着了想，又为网友节省了网费，何乐而不为？