刚接触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>
发送短信：
html
<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>
不过要注意，这些用法可能存在安全风险，不建议在正式项目中使用。
标签： html
还木有评论哦，快来抢沙发吧~