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

学习交流

电脑开不了机的原因和解决办法

电脑开不了机的原因和解决办法...

热门图片

猜你喜欢的新闻

猜你喜欢的关注