48 - 链接元素 - a标签 - 超链接的基本用法

作用：超链接

超链接，站外跳转

<a href="https://www.baidu.com">baidu</a>

绝对 URL - 指向另一个站点

页内跳转

<a href="#1">跳到name1</a>

<a name="1" >单色</a>

打开新页面

< a href="index.html"  target="_blank" >跳转打开一个新的页面（不刷新本页）</a>

不推荐

a href="javascript:js_method();"

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

onclick - 判断跳转

a href="javascript:void(0);" onclick="js_method()"

这种方法是很多网站最常用的方法，也是最周全的方法，onclick方法负责执行js函数，而void是一个操作符，void(0)返回undefined，地址不发生跳转。
而且这种方法不会像第一种方法一样直接将js方法暴露在浏览器的状态栏。

onclick - 空的js代码

a href="javascript:" onclick="js_method()"

这种方法跟跟2种类似，区别只是执行了一条空的js代码。

onclick - 刷新

a href="#" onclick="js_method()"

这种方法也是网上很常见的代码，#是标签内置的一个方法，代表top的作用。也是最简单也是非常实用的网页置顶方法。但是有个弊端就是使用此方法相当于给页面刷新一次，如果网页太卡的话可能不太利于用户体验。

判断跳转

a href="#" onclick="js_method();return false;"

种方法点击执行了js函数后return false，页面不发生跳转，执行后还是在页面的当前位置。综合上述，在a中调用js函数最适当的方法推荐使用：

<a href="javascript:void(0);" onclick="js_method()"></a>
<a href="javascript:" onclick="js_method()"></a>
<a href="#" onclick="js_method();return false;"></a>

站内跳转

<a href="/seo.html"></a>

相对 URL - 指向站点内的某个文件
点击a标签链接后会跳转到本站点中的某个链接。

邮箱跳转

<a href="mailto:baidu.@163.com"></a>

手机端使用较多。点击后对应的邮箱跳转。这种方法浏览器会自动调用系统默认的邮件客户端程序，同时在邮件编辑窗口的收件人设置栏中自动写上收件人的地址，而其他的内容都是空白，留给访问者自行填写。其他方法请看《a标签属性href的mailto多种用法》

拨打联系电话

<a href="tel:400-123-1234"></a>

手机端非常的使用，就是可以快捷的通过a标签拨打联系电话。