你的位置:首页 > 网页设计

[网页设计]超链接的那些事(二): 属性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'后,页面不发生跳转,页面停留在当前位置。

未完待续....