a標簽中的href：JavaScript:void(0) # 等

參考自：http://segmentfault.com/q/1010000000339082

給<a>標簽增加href屬性，就意味着以下事情：

• :link選擇器可以選擇到它
• 這個<a>標簽可以獲得焦點（可以通過tab按鍵訪問到）
• 在瀏覽器的默認樣式表中，有href屬性的<a>標簽才有cursor:pointer的效果（尤其是在低版本的IE上）。

綁定了onclick事件的<a>標簽，尤其是它的作用是ajax請求時，基本上我們就用不上這個標簽的默認行為，也連接不到的實際頁面，一般而言也會在CSS里給予了這個元素的cursor等樣式。這時候還要加上href屬性，是為了：

• 讓<a>夠響應鍵盤事件並獲得焦點（從而屏幕閱讀器能夠讀出背后的內容，增強可訪問性）
• 優雅降級，在網絡連接很差，還沒有加載到CSS的時候，<a>依然有手型與正常的link樣式。

給<a>標簽以href屬性，並不連接到實際的頁面的方案有：

1. <a href="#"></a>
2. <a href="#nogo"></a>
3. <a href="##"></a>
4. <a href="###"></a>
5. <a href="javascript:void(0);"></a>
6. <a href="javascript:void(0)"></a>
7. <a href="javascript:;"></a>
8. <a href="javascript:"></a>

他們的體驗有細微的差別。

• 1，點擊這個鏈接后，會讓頁面跳到頭部，window.location.href末尾增加#（若window.location.href末尾沒有#），除非在js里面捕獲onclick事件並阻止默認事件。
• 2有了初步的語義。但是，如果頁面里面有id為nogo的元素，點擊這個鏈接后，錨點機制會作用，頁面貼齊這個元素上緣。更詳細的，詳見張鑫旭的《URL錨點HTML定位技術機制、應用與問題》
• 3在chrome中不再默認跳轉到頁面頭部，4在IE11中不再跳轉到頁面頭部。見下方測試。
• 5~8作用相同，但使用了javascript偽協議。在IE6下面，未加分號的方案6和方案8被點擊后，IE6會使得頁面中的gif暫停，並且觸發onbeforeunload事件(詳情參考這里)，IE6認作這個頁面有了重定向，並abort之后所有的請求（參考這里）。所以假如你在此之后替換了一個<img>的src，IE6完全不會完成這個新的請求。

至於語義上LZ這種<a href="javascript:void(0)">使用方式，這個貼里已經有了足夠詳細的回答。我再補充一點，這種情形依然可以做到支持無障礙應用，方法請參考《WAI-ARIA無障礙網頁應用屬性》。

<p>
            <a href="#">#</a>
        </p>
        <p>
            <a href="##">##</a>
        </p>
        <p>
            <a href="###">###</a>
        </p>
        <p>
            <a href="####">####</a>
        </p>
        <p>
            <a href="#####">#####</a>
        </p>
        <script type="text/javascript">
            var n = 0 ;
            window.onhashchange = function(){
                alert(++n) ;
            }
        </script>

• 在IE11中，點擊###、####和#####時，頁面不再跳轉到頭部
• 在chrome中，點擊##、###、####和#####時，頁面不再跳轉到頭部。
• 但是在IE11和chrome中，點擊所有的<a>都會造成地址欄的修改，並觸發hashchange事件。

所以之前說的“###不會造成地址欄的改變”是錯誤的。

沒有大規模測試其他的瀏覽器，這里做初步猜想：###的意義在於，這是字符數最少的，在所有的瀏覽器中不會導致跳轉到頁面頭部的錨點。

---

更新，我做了如下的測試：