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

WBOY
發布: 2016-05-16 16:43:43
原創
1576 人瀏覽過

連結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值的完整性

代碼有生命,標籤王國是一個動物園,熟悉它們,一切很可愛。
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板