剛學 HTML 的時候，以為 <a href=""> 簡直 無聊透頂：點了就跳走，完事兒。 直到前陣子刷到一篇文章（抱歉忘了出處），里面盤點了一堆 href 的騷操作，把我這個五年老前端都整樂了。

下面就給你展示 7 個既實用又好玩的 href 用法，保準有驚喜。

1.href="." —— “刷新當前目錄”

第一次看到它我也愣了下：

<a href=".">Reload This Folder</a>

一個點，表示當前目錄。點它，其實你沒走開，只是重載了當前路徑。 再來兩個點 .. 就更熟了：回到上一級目錄：

<a href="..">Step Up One Level</a>

用過命令行的同學會心一笑：瀏覽器里也能玩“路徑”，是不是挺酷？

2.href="" —— 空值也能“刷新”

把 href 留空，并不會報錯，而是刷新當前頁面，和 "." 的效果類似：

<a href="">Refresh</a>

3.href="#" —— 占位&回到頂部

這個你應該經(jīng)常見：

<a href="#">Click Me</a>

默認行為是滾到頁面頂部，因此很適合作為占位鏈接。 配合 JS 的 event.preventDefault() 就不會滾動了，看起來像鏈接，等你掛邏輯。 （當然，你也可以只寫 cursor: pointer; 來“裝個樣子”。）

4.href="#id" —— 頁面內(nèi)“瞬移”

有了這個，href 重新變得有用起來。 給目標元素 一個 id，就能一鍵跳過去：

<a href="#faq">Skip to FAQ</a>

<!-- ... -->

<h2 id="faq">Frequently Asked Questions</h2>

點一下，直達。不需要滾輪狂轉(zhuǎn)。 再加一行 CSS，就能從“瞬移”變“絲滑滑行”：

html {
  scroll-behavior: smooth;
}

5.mailto:、tel:、sms: —— 不止能去網(wǎng)頁

我之前也以為鏈接只能打開網(wǎng)頁，后來才知道你還能這樣：

<a href="mailto:me@example.com">Send Email</a>

會拉起默認的郵件客戶端，還可以在鏈接里把 收件人 / 主題 / 正文 都帶上。 打電話也行：

<a href="tel:+123456789">Call Me</a>

發(fā)短信也不在話下：

<a href="sms:+123456789?body=hello">Send Text</a>

對移動端非常友好：沒人愿意在手機上手動復制粘貼號碼。Google 地圖就這么干——點酒店的電話，直接撥出。

6.直接觸發(fā)“下載”

href 不一定打開文件，它也可以觸發(fā)下載：

<a href="report.pdf" download="weekly-notes.pdf">Download Report</a>

有了 download 屬性，瀏覽器會下載而不是預覽，還可以改名，不再往下載夾里扔一堆“document.pdf”。

7.javascript: 與 data: —— “怪但有用”（謹慎上手）

是的，href 里能塞 JavaScript：

<a href="javascript:alert('hi')">Click me</a>

早年流行過“點我彈窗”，如今因為安全與可維護性問題，強烈不推薦在生產(chǎn)使用。 另一個奇葩但實用的東西是 data: URL：把一整個頁面塞進鏈接里：

<a href="data:text/html,<h1>Hello</h1>">Open Mini Page</a>

點一下會在新頁面里顯示一個 Hello 的標題。像在鏈接里“夾帶私貨”——偶爾做 demo 或離線小樣，很方便。

?? 提醒：這倆玩法可能觸發(fā) CSP / 安全策略 與可讀性問題，生產(chǎn)慎用。

小結(jié)

多數(shù)人以為 href 就是“地址欄的快捷方式”。其實它更像一把 瑞士軍刀，能：

• 刷新當前頁面/目錄；
• 頁面內(nèi)跳轉(zhuǎn)到任意位置；
• 直接呼叫郵件 / 電話 / 短信；
• 強制下載文件并改名；
• 甚至執(zhí)行代碼、生成臨時頁面。

下次敲 <a href=""> 時，別把它當成“無聊的跳轉(zhuǎn)”。一個屬性，能玩出很多花活——這正是 HTML 有趣的地方：再簡單的標簽，也藏著彩蛋。