刚接触html时，很多人觉得<a href>标签的功能很单一：点击跳转，仅此而已。但如果你深入了解，会发现它其实有很多方便又有趣的用法。即使是经验丰富的前端开发者，也可能忽略其中一些功能。

下面介绍7个关于href的实用技巧，希望能帮你更高效地使用HTML链接。

使用“.”刷新当前目录

你可以用一个点表示当前目录，点击链接会重新加载当前路径：

<a href=".">刷新当前文件夹</a>

也可以用两个点返回上一级：

<a href="..">向上返回</a>

这种方式在文件浏览或本地开发时特别有用。

空href也能刷新页面

将href设为空，同样可以刷新当前页面：

<a href="">刷新页面</a>

这个做法简单直接，适合需要重新加载内容的场景。

用“#”作为占位链接

“#”常用于链接占位，点击它会滚动到页面顶部：

<a href="#">点击这里</a>

如果配合JavaScript阻止默认行为，它可以作为一个不会跳转的交互元素。当然，你也可以只用css改变鼠标样式，让它看起来可以点击。

通过id实现页面内跳转

如果你在页面中设置了id，可以用href直接跳转到对应位置：

<a href="#section">跳转到某部分</a>

...

<h2 id="section">目标区域</h2>

这样用户就可以快速定位，不需要手动滚动页面。如果想实现平滑滚动效果，可以添加以下CSS：

html {
  scroll-behavior: smooth;
}

调用邮件、电话和短信功能

href不仅可用于打开网页，还能触发设备功能：

发送邮件：

<a href="mailto:fly63@fly63.com">发送邮件</a>

拨打电话：

<a href="tel:+123456789">拨打电话</a>

发送短信：

<a href="sms:+123456789">发送短信</a>

这些功能在手机端非常实用，用户点击就能直接调用相关应用。

触发文件下载

通过download属性，可以让链接变成下载按钮：

<a href="file.pdf" download="自定义文件名.pdf">下载文件</a>

这样浏览器会直接下载文件，而不是尝试打开它。你也可以自定义下载后的文件名。

使用javascript和dataURL（需谨慎）

你可以在href中执行JavaScript代码：

<a href="javascript:alert('提示')">点击测试</a>

也可以使用DataURL直接嵌入内容：

<a href="data:text/html,<h1>示例页面</h1>">打开内嵌页面</a>

不过要注意，这些用法可能存在安全风险，不建议在正式项目中使用。

总结

href属性远比我们想象的强大。除了常规的页面跳转，它还能刷新内容、实现页内导航、触发设备功能、下载文件，甚至执行代码。了解这些用法不仅能提高开发效率，还能为用户提供更便捷的交互体验。

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/12921