鏈接A的語義、寫法和最佳實踐

2019-10-26 17:24:04

字體：大中小

來源：轉載

供稿：網友

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

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

上圖中的顯示和排序按鈕，是操作表單。從語義上講，用button或input更合適。（注意：淘寶搜索結果頁目前采用的是a, 這是出于漸進增強的考慮，下面會提及）
總之鏈接和按鈕有各自的語義和使用場景，不能隨意替換使用。寫法分析
世界永遠沒那么簡單，在當今JavaScript如日中天的Web世界里，鏈接a經常用來觸發js事件：
<a href="" onclick="something()">test 1</a><a href="#" onclick="something();return false">>test 2</a><a href="javascript: void(0)" onclick="something()">>test 3</a><a href="javascript: void something()">test 4</a>
首先，第一種寫法在ie下是有問題的，原因是 ie下會自動補全href.
第二種寫法直接在onclick事件中阻止掉默認事件，因此href="#"中的#實際上可以為任意值。用#，是考慮沒有js時，點擊后停留在本頁（注意：當a在一屏以下時，這種寫法會導致頁面回滾到頂部）。
第三種寫法，href值是一個javascript偽協議，void是javascript的一個一元操作符（比如!, typeof）。void操作符的作用是，只執行后面的表達式，不返回任何值。看起來好像是void(0)阻止了默認事件，實際上，下面這些寫法都沒問題：
<a href="javascript: void(1)" onclick="something()">>test 3</a><a href="javascript:;" onclick="something()">>test 3</a><a href="javascript:" onclick="something()">>test 3</a><a href="javascript: return true" onclick="something()">>test 3</a>

上一篇：W3C教程(10):W3C XQuery 活動

下一篇：W3C教程(8):W3C XML Schema 活動