七個(gè)你大概沒(méi)玩過(guò)的 HTML href 小技巧
剛學(xué) HTML 的時(shí)候，以為 <a href=""> 簡(jiǎn)直 無(wú)聊透頂：點(diǎn)了就跳走，完事兒。 直到前陣子刷到一篇文章（抱歉忘了出處），里面盤(pán)點(diǎn)了一堆 href 的騷操作，把我這個(gè)五年老前端都整樂(lè)了。
下面就給你展示 7 個(gè)既實(shí)用又好玩的 href 用法，保準(zhǔn)有驚喜。
1.href="." —— “刷新當(dāng)前目錄”
第一次看到它我也愣了下：
<a href=".">Reload This Folder</a>一個(gè)點(diǎn)，表示當(dāng)前目錄。點(diǎn)它，其實(shí)你沒(méi)走開(kāi)，只是重載了當(dāng)前路徑。 再來(lái)兩個(gè)點(diǎn) .. 就更熟了：回到上一級(jí)目錄：
<a href="..">Step Up One Level</a>用過(guò)命令行的同學(xué)會(huì)心一笑：瀏覽器里也能玩“路徑”，是不是挺酷？
2.href="" —— 空值也能“刷新”
把 href 留空，并不會(huì)報(bào)錯(cuò)，而是刷新當(dāng)前頁(yè)面，和 "." 的效果類(lèi)似：
<a href="">Refresh</a>3.href="#" —— 占位&回到頂部
這個(gè)你應(yīng)該經(jīng)常見(jiàn)：
<a href="#">Click Me</a>默認(rèn)行為是滾到頁(yè)面頂部，因此很適合作為占位鏈接。 配合 JS 的 event.preventDefault() 就不會(huì)滾動(dòng)了，看起來(lái)像鏈接，等你掛邏輯。 （當(dāng)然，你也可以只寫(xiě) cursor: pointer; 來(lái)“裝個(gè)樣子”。）
4.href="#id" —— 頁(yè)面內(nèi)“瞬移”
有了這個(gè)，href 重新變得有用起來(lái)。 給目標(biāo)元素 一個(gè) id，就能一鍵跳過(guò)去：
<a href="#faq">Skip to FAQ</a>
<!-- ... -->
<h2 id="faq">Frequently Asked Questions</h2>點(diǎn)一下，直達(dá)。不需要滾輪狂轉(zhuǎn)。 再加一行 CSS，就能從“瞬移”變“絲滑滑行”：
html {
scroll-behavior: smooth;
}5.mailto:、tel:、sms: —— 不止能去網(wǎng)頁(yè)
我之前也以為鏈接只能打開(kāi)網(wǎng)頁(yè)，后來(lái)才知道你還能這樣：
<a href="mailto:me@example.com">Send Email</a>會(huì)拉起默認(rèn)的郵件客戶端，還可以在鏈接里把 收件人 / 主題 / 正文 都帶上。 打電話也行：
<a href="tel:+123456789">Call Me</a>發(fā)短信也不在話下：
<a href="sms:+123456789?body=hello">Send Text</a>對(duì)移動(dòng)端非常友好：沒(méi)人愿意在手機(jī)上手動(dòng)復(fù)制粘貼號(hào)碼。Google 地圖就這么干——點(diǎn)酒店的電話，直接撥出。
6.直接觸發(fā)“下載”
href 不一定打開(kāi)文件，它也可以觸發(fā)下載：
<a href="report.pdf" download="weekly-notes.pdf">Download Report</a>有了 download 屬性，瀏覽器會(huì)下載而不是預(yù)覽，還可以改名，不再往下載夾里扔一堆“document.pdf”。
7.javascript: 與 data: —— “怪但有用”（謹(jǐn)慎上手）
是的，href 里能塞 JavaScript：
<a href="javascript:alert('hi')">Click me</a>早年流行過(guò)“點(diǎn)我彈窗”，如今因?yàn)榘踩c可維護(hù)性問(wèn)題，強(qiáng)烈不推薦在生產(chǎn)使用。 另一個(gè)奇葩但實(shí)用的東西是 data: URL：把一整個(gè)頁(yè)面塞進(jìn)鏈接里：
<a href="data:text/html,<h1>Hello</h1>">Open Mini Page</a>點(diǎn)一下會(huì)在新頁(yè)面里顯示一個(gè) Hello 的標(biāo)題。像在鏈接里“夾帶私貨”——偶爾做 demo 或離線小樣，很方便。
?? 提醒：這倆玩法可能觸發(fā) CSP / 安全策略 與可讀性問(wèn)題，生產(chǎn)慎用。
小結(jié)
多數(shù)人以為 href 就是“地址欄的快捷方式”。其實(shí)它更像一把 瑞士軍刀，能：
- 刷新當(dāng)前頁(yè)面/目錄；
- 頁(yè)面內(nèi)跳轉(zhuǎn)到任意位置；
- 直接呼叫郵件 / 電話 / 短信；
- 強(qiáng)制下載文件并改名；
- 甚至執(zhí)行代碼、生成臨時(shí)頁(yè)面。
下次敲 <a href=""> 時(shí)，別把它當(dāng)成“無(wú)聊的跳轉(zhuǎn)”。一個(gè)屬性，能玩出很多花活——這正是 HTML 有趣的地方：再簡(jiǎn)單的標(biāo)簽，也藏著彩蛋。
