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

所属分类: 网页制作 / HTML/Xhtml 阅读数: 1552
收藏 0 赞 0 分享

链接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>
因为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值的完整性

代码有生命,标签王国是一个动物园,熟悉它们,一切很可爱。
更多精彩内容其他人还在看

网页注释在IE中产生文字溢出

实验代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transiti
收藏 0 赞 0 分享

HTML教程:定义列表

原文:http://andymao.com/andy/post/104.html 上一节:有序列表 写完“无序列表”和“有序列表”之后已经有人和我说这两篇看得没什么意思。这两篇文章如果只以单向读取的形式阅读那么的确是没什
收藏 0 赞 0 分享

HTML教程:有序列表

原文:http://andymao.com/andy/post/103.html 上一节:无序列表 信息有时候是无序归纳的,有的却有着明确的顺序,在上一篇也提到了。那么简单的来想一下身边有哪些事物是有先后顺序的:操作步骤、排行榜、书目录……
收藏 0 赞 0 分享

HTML教程:无序列表

原文:http://andymao.com/andy/post/102.html 段落已经讲完了,那么一些基本的应用方式也讲了一些,那么是否已经应用了呢?当然应用可以更为丰富,那么这些就需要自己在实际工作中不断的摸索与思考,然后创新并总结得出新的应用形式。当然了段落不能当作
收藏 0 赞 0 分享

HTML网页制作的强大8条技巧

  虽然现在有许多网页制作工具能让您轻松地完成工作,但如果使用HTML则可以得到更大控制权,下面介绍几个小技巧。   1。使用<tt>,<i>,<br>语句来控制文字排版比用<pre>好得多。 如: <tt>实用
收藏 0 赞 0 分享

网页表格分割线去除方法

网页表格分割线去除方法。 其实上面的三个表格都有三行三列,隐藏分隔线的诀窍在于rules,察看这三个表格的源代码,我们可以看到<TABLE>标签中都有rules。它有三个参数(cols,rows,none),当rules=cols时,表格会隐藏纵向的分隔线,这
收藏 0 赞 0 分享

blockquote标记应用注意

关于语义化,不是一句两句就能说明白的,而且现在也没有一个官方的很严格的定义。关于<blockquote>没有争议的是: 1.引用一段较长的文字 2.可以使用cite标签或者属性 问题是<blockquote>引用的文字必须使用块级元素将他
收藏 0 赞 0 分享

网页表格表框制作技巧

网页表格表框制作技巧。 -------------------------------------------------------------------------------- 表格边框的显示与隐藏,是可以用frame参数来控制的。请注意它只控制表格的边框图,而不
收藏 0 赞 0 分享

HTML其实就是学习几个重要标记的应用

《这将是一场革命》一文出来以后。得到业界大伙的认同,当然与此同时也得到部分来自内部与外部的挑衅,不过的更加多的是更多人来寻问每一个点的细节。今晚回家很早就睡了,半夜在一个梦中醒来,梦里正在和小学的同学玩一个游戏——“The Next&rdquo
收藏 0 赞 0 分享

移动端专用的meta标签设置大全

不知道有没有人觉得,html的meta标签描述的头部信息特别多,下面这篇文章主要给大家分享介绍了关于移动端专用的meta设置的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面随着小编来一起学习学习吧
收藏 0 赞 0 分享
查看更多