链接A的语义、写法和最佳实践

2020-04-15 22:29:53易采站长站整理

链接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>