連結A的語意、寫法和最佳實踐_HTML/Xhtml_網頁製作

連結A的語意、寫法和最佳實踐.
在JavaEye看見這個話題，討論挺有意思，忍不住也摻和一把。 語意思考
首先，連結a和按鈕button是有語意的，不能因為使用上的方便而替換。 a是anchor的縮寫，是一個錨點，用來導航或定位。典型用法為：
W3C Web Site This is the location of anchor one. Link to anchor one
也可以同時指定name和href屬性，這是基礎知識，若有疑問請參考HTML 4.01規格。
再說按鈕（包括 button 和 ）。從語義上講，按鈕是表單的一部分，觸發的動作和表單是有關聯的。如果根本沒有表單操作，就不應該使用按鈕。舉些例子：

上圖是一些鏈接，雖然長得像button，但語義上是a.

上圖中的顯示和排序按鈕，是操作表單。從語義上講，用button或input更合適。 （註：淘寶搜尋結果頁目前採用的是a, 這是出於漸進增強的考慮，下面會提及）
總之連結和按鈕有各自的語意和使用場景，不能隨意替換使用。 寫法分析
世界永遠沒那麼簡單，在當今JavaScript如日中天的Web世界裡，連結a常用來觸發js事件：
test 1 >test 2 >test 3 test 4
首先，第一種寫法在ie下是有問題的，原因是 ie下會自動補全href.
第二種寫法直接在onclick事件中阻止掉預設事件，因此href="#"中的#實際上可以為任意值。用#，是考慮沒有js時，點擊後停留在本頁（注意：當a在一頁以下時，這種寫法會導致頁面回滾到頂部）。
第三種寫法，href值是一個javascript偽協議，void是javascript的一個一元操作符（例如!, typeof）。 void運算子的作用是，只執行後面的表達式，不回傳任何值。看起來好像是void(0)阻止了預設事件，實際上，以下這些寫法都沒問題：
>test 3 >test 3 >test 3 >test 3
因為a的預設操作就是javascript偽協定的內容，裡面加不加void都不會觸發其它事件。 （注意：Opera下，當偽協定裡有回傳值時，會改變href, 因此我們一般寫void(0)或空語句）
了解第三種寫法，第四種寫法也就明白了：href="javascript: void something()". 這種寫法有一個「好處」是，滑鼠懸浮時，使用者可以透過狀態列看到將要執行的函數。對開發者來說，這或許是個好處，但對一般使用者來說，這真的會增加信賴感嗎？抑或是恐懼感？沒有數據，無法下結論。
除了上面的寫法，還有一個推薦的寫法是，透過class或id為a增加一個hook，然後在js裡透過hook來增加事件。 反思
我不想去討論上面的各種寫法中哪一個是最好的。讓我們思考本源問題：為什麼我們會用a來觸發js事件？ 我能想到的理由有：

這樣自動就擁有滑鼠的懸浮樣式了 大家都這麼寫 還真想不出啥理由，這不是很自然的事嘛 因為IE6只支援css樣式的a:hover,而且href還不能為空

可以看出，除了懸浮樣式，找不到啥實質的理由了。我們暫時拋開樣式問題，來看一個例子：

上面是Google Reader的操作欄，感興趣的不妨firebug一下，採用的標記是：

滑鼠的懸浮樣式，也根本不是問題：

css裡，加上cursor: pointer就行。
從上面的例子中，我們可以得到一個結論：如果僅僅是觸發js動作，沒有任何導航或定位的語義，採用span或其它合適的標籤即可，沒必要錯誤的使用a（用a反而惹麻煩：一是要移除預設事件，二是狀態列的資訊會讓一般使用者迷惑甚至恐懼）。
當然，如果本身就是一個鏈接，僅僅想在導航前增加一些js邏輯，或者是表單排序等應用，從漸進增強角度考慮，最好的實踐是將href值寫全，以使得在不支持js的瀏覽器下，也能確保可用性。 最佳實踐
不是總結，不是一錘子定音，「最佳實踐」只是一系列原則，是寫程式碼前要先想一想：

用連結a，還是用按鈕button，根據具體使用場景來定，button是和表單相關的元素 不要濫用a，當你都想不明白href值是什麼時（不要出現javascript偽協議，不要孤獨寂寞的#），請選用其它標籤，透過hook在js中添加事件 如果確實是一個鏈接，同時又有onclick事件，請想想漸進增強，確保href值的完整性

代碼有生命，標籤王國是一個動物園，熟悉它們，一切很可愛。