超链接的那些事(二): 属性href

标签：

a标签的属性之一 href

1. 定义

    href 属性用于指定超链接目标的 URL。

2. 用法

    ①. 锚点

• 同一页面添加锚点

        （1）<a href="#test">连接到本页面的锚的超链接</a>   //点击的连接

        （2）<a name="test">锚</a>   //放到要跳转内容的地方

• 跨页面添加锚点

        （1）在test2.html创建锚<a name="test">锚</a>

        （2）在test1.html设置好连接<a href="test2.html#test">连接到另外页面的锚的超链接</a>

    ②. 下载

<a href="download.rar"></a> 

     href中的url需要有效，文件最好是rar格式

    ③. 打电话

<a href="tel:电话号码"></a>

　 ④. 邮箱

    邮箱标签: mailto 

    属     性： cc: 抄送

                  bcc: 暗抄

                  subject：主题

                  body：邮箱内容

• 常规  

          <a href="mailto: xxx@xx.com"></a>    

• 利用逗号(,) 多地址发送

          <a href="mailto: xxx@xx.com, xxx@xx.com"></a>

• 利用属性

          <a href="mailto: xxx@xx.com?cc=xxx@xx.com&bcc=xxx@xx.com&subject=主题&body=内容"></a>

　　⑤. Javascript

• 直接调用javascript

          <a href="javascript: function_name()"></a>

   W3C标准不推荐在href里面执行javascript语句.这种方法在传递this等参数的时候很容易出问题，而且javascript:协议作为a的href属性的时候不仅会导致不必要的触发window.onbeforeunload事件，在IE里面更会使gif动画图片停止播放。

• 使用void, ::, undefined, 配合onclick

          <a href="javascript::" onclick="function_name()"></a>

          <a href="javascript:void(0)" onclick="function_name()"></a>

          <a href="javascript:undefined" onclick="function_name()"></a>

          最常用的方法，也是最周全的方法，地址不发生跳转，不会在地址栏暴露Js方法

•  ‘#‘和onclick

          <a href="#" onclick="function_name()"></a>

          ‘#‘是标签内置的一个方法，代表top的作用，所以执行方法后返回页面最顶端。

          <a href="#" onclick="function_name(); return false;"></a>

           执行‘return false‘后，页面不发生跳转，页面停留在当前位置。

未完待续....

超链接的那些事(二): 属性href

标签：

原文地址：http://www.cnblogs.com/MonkeyKingK/p/4865581.html