国产精品毛片va一区二区三区,欧美伊人久久久久久久久影院,亚洲精品福利在线

主頁 > 知識(shí)庫 > 鏈接A的語義、寫法和最佳實(shí)踐

鏈接A的語義、寫法和最佳實(shí)踐

鏈接A的語義、寫法和最佳實(shí)踐.
在JavaEye看見這個(gè)話題，討論挺有意思，忍不住也摻和一把。語義思考
首先，鏈接a和按鈕button是有語義的，不能因?yàn)槭褂蒙系姆奖愣鎿Q。a是anchor的縮寫，是一個(gè)錨點(diǎn)，用來導(dǎo)航或定位。典型用法為：
<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>
還可以同時(shí)指定name和href屬性，這是基礎(chǔ)知識(shí)，若有疑問請(qǐng)參考HTML 4.01規(guī)范。
再說按鈕（包括 button 和 <input type=”button/submit” />）。從語義上講，按鈕是表單的一部分，觸發(fā)的動(dòng)作和表單是有關(guān)聯(lián)的。如果根本就沒有表單操作，就不應(yīng)該使用按鈕。舉些例子：

上圖是一些鏈接，雖然長(zhǎng)得像button，但語義上是a.

上圖中的顯示和排序按鈕，是操作表單。從語義上講，用button或input更合適。（注意：淘寶搜索結(jié)果頁目前采用的是a, 這是出于漸進(jìn)增強(qiáng)的考慮，下面會(huì)提及）
總之鏈接和按鈕有各自的語義和使用場(chǎng)景，不能隨意替換使用。寫法分析
世界永遠(yuǎn)沒那么簡(jiǎn)單，在當(dāng)今JavaScript如日中天的Web世界里，鏈接a經(jīng)常用來觸發(fā)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下會(huì)自動(dòng)補(bǔ)全href.
第二種寫法直接在onclick事件中阻止掉默認(rèn)事件，因此href="#"中的#實(shí)際上可以為任意值。用#，是考慮沒有js時(shí)，點(diǎn)擊后停留在本頁（注意：當(dāng)a在一屏以下時(shí)，這種寫法會(huì)導(dǎo)致頁面回滾到頂部）。
第三種寫法，href值是一個(gè)javascript偽協(xié)議，void是javascript的一個(gè)一元操作符（比如!, typeof）。void操作符的作用是，只執(zhí)行后面的表達(dá)式，不返回任何值。看起來好像是void(0)阻止了默認(rèn)事件，實(shí)際上，下面這些寫法都沒問題：
<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>
因?yàn)閍的默認(rèn)操作就是javascript偽協(xié)議的內(nèi)容，里面加不加void都不會(huì)觸發(fā)其它事件。（注意：Opera下，當(dāng)偽協(xié)議里有返回值時(shí)，會(huì)改變href, 因此我們一般寫void(0)或空語句）
理解了第三種寫法，第四種寫法也就明白了：href="javascript: void something()". 這種寫法有一個(gè)“好處”是，鼠標(biāo)懸浮時(shí)，用戶可以通過狀態(tài)欄看到將要執(zhí)行的函數(shù)。對(duì)開發(fā)者來說，這或許是個(gè)好處，但對(duì)普通用戶來說，這真的會(huì)增加信賴感嗎？抑或是恐懼感？沒有數(shù)據(jù)，無法下結(jié)論。
除了上面的寫法，還有一種推薦的寫法是，通過class或id給a增加一個(gè)hook，然后在js里通過hook來添加事件。反思
我不想去討論上面的各種寫法中哪一個(gè)是最好的。讓我們思考本源問題：為什么我們會(huì)用a來觸發(fā)js事件？我能想到的理由有：

這樣自動(dòng)就擁有鼠標(biāo)的懸浮樣式了大家都這么寫還真想不出啥理由，這不是很自然的事嘛因?yàn)镮E6只支持css樣式的a:hover,而且href還不能為空
可以看出，除了懸浮樣式，找不到啥實(shí)質(zhì)性的理由了。我們暫時(shí)拋開樣式問題，來看一個(gè)例子：

上面是Google Reader的操作欄，感興趣的不妨firebug一下，采用的標(biāo)記是：

鼠標(biāo)的懸浮樣式，也根本不是問題：

css里，加上cursor: pointer就行。
從上面的例子中，我們可以得到一個(gè)結(jié)論：如果僅僅是觸發(fā)js動(dòng)作，沒有任何導(dǎo)航或定位的語義，采用span或其它合適的標(biāo)簽即可，沒必要錯(cuò)誤的使用a（用a反而惹麻煩：一是要去除默認(rèn)事件，二是狀態(tài)欄的信息會(huì)讓普通用戶迷惑甚至恐懼）。
當(dāng)然，如果本身就是一個(gè)鏈接，僅僅想在導(dǎo)航前增加一些js邏輯，或者是表單排序等應(yīng)用，從漸進(jìn)增強(qiáng)角度考慮，最好的實(shí)踐是將href值寫全，以使得在不支持js的瀏覽器下，也能保證可用性。最佳實(shí)踐
不是總結(jié)，不是一錘子定音，“最佳實(shí)踐”只是一系列原則，是寫代碼前要先想一想：

用鏈接a，還是用按鈕button，根據(jù)具體使用場(chǎng)景來定，button是和表單相關(guān)的元素不要濫用a，當(dāng)你都想不明白href值是什么時(shí)（不要出現(xiàn)javascript偽協(xié)議，不要孤獨(dú)寂寞的#），請(qǐng)選用其它標(biāo)簽，通過hook在js中添加事件如果確實(shí)是一個(gè)鏈接，同時(shí)又有onclick事件，請(qǐng)想想漸進(jìn)增強(qiáng)，保證href值的完整性
代碼有生命，標(biāo)簽王國是一個(gè)動(dòng)物園，熟悉它們，一切很可愛。

標(biāo)簽：延安貴陽濟(jì)南錫林郭勒盟阿拉善盟樂山白銀四川

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《鏈接A的語義、寫法和最佳實(shí)踐》，本文關(guān)鍵詞鏈接,的,語義,寫法,和,最佳,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。

婷婷综合国产,91蜜桃婷婷狠狠久久综合9色 ,九九九九九精品,国产综合av

鏈接A的語義、寫法和最佳實(shí)踐