HTML 解惑 - href 属性的特殊用法
针对 HTML 中 href 的一些特殊用法的解惑。
一、A 标签的用法
1、跳转到另一个目标地址
<a href="http://www.night123.com">跳转到 Night 博客</a>
2、跳转到当前文档的固定章节
指定一个 hash 值，跳转到当前文档 id=hash 所在的位置。
比如：在 <body> 有如下标签。
<!-- 案例展示 --> <div> ... </div>
在 页面中间一个超链接，点击后定位到 cases 所在位置，则可以增加一个 a 标签操作。
<p> <a href = "#header">查看案例</a> </p>
3、调用系统默认邮件系统发送邮件
<a href="mailto:ismb@qq.com?Subject=hello%20night">发送邮件</a>
4、执行 JavaScript 脚本
<a href="javascript:alert('Hello World!');">运行 JS</a>二、href 属性特殊用法解惑
我们通过以上章节，知道了 a 标签的功能，但是在实际工作中，还有一些特殊用法，接下来我将一一为你解惑。
1、href="#"
这个本来正常的做法，是 href="#hash" ，但是偏偏只有一个 # ，用意何在？
作用有 2 个：
1、跳转到顶部
<a href="#">返回顶部</a>
2、保留 href 默认样式的情况下，不使用默认的跳转功能
有时候为了业务需要跳转功能是通过 js 来控制，这样我们就需要屏蔽 href 的默认跳转，这时候我可能会这么做。
- 去掉
href属性，但是去掉后，发现浏览器默认的a标签样式没了，鼠标滑过也没有手的形状，一切都得重置，麻烦。 href="#"点击后，继续在当前页面，后续逻辑交给js处理，但是这么处理后，假如a标签在页面底部，页面有滚动条，这时候，点击以后页面会先返回顶部，再执行 js 的操作。所以，这么做体验也还是不好。
当然，有时候我们在页面的 menu 里面，也可能会有一些 a 标签，用来定位跳转到不同的页面，如：
<ul class="nav"> <li><a href="#">首页</a></li> <li><a href="#">案例</a></li> <li><a href="#">关于</a></li> </ul>
如果这个 nav 在页面顶部，只要不是需要拖动滚动条的地方，那么点击后，使用 js 处理跳转页面几乎没感觉。唯一有一点点小的瑕疵，就是在地址栏上的 href 后面，会多出一个 # 。
比如，之前的地址是： http://www.night123.com/index.html
那么点击任何一个 a 标签后，页面会变成： http://www.night123.com/index.html#
现在知道了 href="#" 的两个作用了吧，虽然这 2 个作用在解决相关问题，都不是很完美，但是还是有一些人一直在用。
补充说明，有人说
href是a标签必不可少的一个属性，其实不然。
延伸阅读请参考： http://w3c.github.io/html/links.html
2、href="javascript:;"
这种用法，现在也很常见，目的也是解决避免默认的 href 跳转的。
但是这种做法就比上面第一种做法要好，因为这么做相当于是执行了一个空的 js 片段，这样在页面的任何位置点击 a 标签后，原页面本身都是无感知的。
当然这个做法也还不是最好的，因为从功能上完全实现，体验上也没有问题，但是从写法上，总是有些怪异。比如： javascript:; ，不是越看越不好理解吗？
当然要避免这种问题，可以使用 js 原生的事件机制，来屏蔽原始的事件，方法如下：
方法 1：
<a href='#'>Click Me!</a>
<script>
document.getElementById("click").onclick = function(e){
// 屏蔽原始事件
e.preventDefault();
// TODO: 实现自己的业务逻辑
}
</script>或者使用另一种做法：
<script>
document.getElementById("click").onclick = function(e){
// TODO: 实现自己的业务逻辑
// 阻止事件传递
return false;
}
</script>个人觉得方法一是最完美的处理方式。
3、href="javascript:void(0);"
这是禁止页面跳转的一种方式。看了这篇文章就知道了：谈谈 Javascript 中的 void 操作符
4、href="#!home"
此种写法在 SPA 应用中最为常见，原理就是通过监听 js 的 onStateChange 事件，来控制路由规则，加载不同的 HTML 模板，实现页面切换。但是浏览器地址中的的 hash 不是 # 后面的参数吗？为什么要增加一个感叹号，不能直接这么写 #home 吗？
看看阮一峰大神的这篇文章，就明白了：URL 的井号
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论