XHTML那点事【超链接】

     超链接，不用介绍你都懂得。最常见的栗子总是围绕找咱们身边：每次打开一个导航网站，里面遍布的不是文字就是图片，我们需要浏览什么内容，直接鼠标点击那个文字连接，或者图片按钮。所谓好奇害死猫，好奇也会促使咱们点击那些充满诱惑的图文，那么如何实现这个功能呢？想必你也迫切先知道吧？OK，Let 's go together!(*^__^*)

     1、文本连接

<a href="你想要转向的网页" > 欢迎（文字描述）</a>

没错，就这么简单的一句话。再来一颗栗子，看到一些门户网站的最后，有个【联系我们】之类的连接，点击边可以发送Email，是不是很牛掰？来，让我们看看是如何实现的：

<a href="mailto:你的邮箱地址">联系我们</a>

就这么easy。

      2、图片连接

<a href="你需要访问的网页"><img src="图片的相对位置"></a>

没啥说的，直接copy，简单修改，OK

      3、细节决定成败

嗯哼？？怎么说呢？你看，作为一个用户，我想继续浏览本网页，但是直接用上面的例子方法来实现的话，就会覆盖这个页面。那么我们如何实现打开新的一个网页呢。

用target属性，target属性有是个属性值：_blank  _parent  _self  _top,我们只需要采用_blank属性就可以实现前面所述的功能。

      4、锚点连接

用在什么地方呢，请回忆一下，曾经有没有遇到过很长很长的网页，那些文档一直滚动鼠标到底部，好不容易才滚完；突然又想回头看首页头部的消息，额，又得重复回滚鼠标。这样干是不是太麻烦了吗？我们都知道，用户时间是宝贵的，长时间滚来滚去，手都麻了，就会失去耐心。可别恼，办法来了。

使用锚点：可以在页面不同的位置做标记，也就是锚点了。通过记号建立连接，便可以使得用户在上下文之间跳转了。如何实现，请看下面步骤：

（1）建立锚点（标记）<a name="">.....</a>

栗子：<a name="锚点名">建立一个锚点文字</a>

（2）通过锚点链接<a href="#锚点名">...</a>
栗子：<a href="#锚点名">点击此处将会跳转到锚点名处</a>

      5、热点链接（也叫图像映射）

热点链接，其实就是加入你用一张已经PS好的图片作为导航，然而，是图片，就意味着文字是无效的，如果要实现一系列的导航，那么就要用到热点链接来实现；

在图像中根据导航模块分别划分不同区域的热点。单击这些热点就可以实现目标的跟踪和访问了。

方法一：在<img>标签中使用<map>标签和<area>标签

方法二：在<object>标签中使用<map>标签

实现过程：

         a、使用<img>标签将形成映射的图像插入到页面中，附带一个usemap属性，usemap属性的值与<map>标签中的name属性相同，前面要加一个“#”号

         b、<map>标签负责为图像创建映射，它紧跟在<img>标签之后，是<area>标签的容器。

               <area>标签负责定义可单击的热点的边界形状和坐标。

<p><img src="image/pgxu.jpg" width="780" height="31" usemap="#Map" border="0" />    <map name="Map" id="Map">      <area shape="rect" coords="0,0,101,31" href="tongxunlu.html" target="_blank" alt="通讯录" />      <area shape="rect" coords="194,1,292,32" href="rongyu.html" alt="荣誉" />      <area shape="rect" coords="486,1,585,28" href="xxindex.html" alt="交流中心" />    </map>  </p>

 

两种方法中，我建议还是用第一种吧，，因为第二种似乎有部分浏览器不支持，具体情况不清楚。

****************************************************************************************************************************************************************************************

❤永葆一颗纯洁、宽容平和、仁慈谦卑和意气风发的心！

态度决定一切     努力改变命运