15年来,为全国50万+企业提供互联网数字化基础应用服务。
微网小程序
电商运营
关于我们
付款方式
荣誉资质
业务提交
代理合作
知 识
400-1100-266
9:00-24:00(工作日)
首 页
企业400电话
Hot
网站建设
商标✡知产
网络优化推广
热
AI电话机器人
呼叫中心
彩铃•短信
增值拓展业务
新
主页
>
知识库
> 链接A的语义、写法和最佳实践
链接A的语义、写法和最佳实践
热门标签:
网站建设
硅谷的囚徒呼叫中心
美图手机
智能手机
阿里云
百度竞价点击价格的计算公式
使用U盘装系统
检查注册表项
链接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值的完整性
代码有生命,标签王国是一个动物园,熟悉它们,一切很可爱。
标签:
通辽
湘潭
贺州
湖北
怀化
山南
黄山
烟台
巨人网络通讯声明:本文标题《链接A的语义、写法和最佳实践》,本文关键词 ;如发现本文内容存在版权问题,烦请提供相关信息告之我们,我们将及时沟通与处理。本站内容系统采集于网络,涉及言论、版权与本站无关。
相关文章
电销机器人到底如何运作的?
很多人对 电销 机器人到底如何运作存在着巨大的好奇心,那么今天,小编就带大家看一下机器人的运作流程! 电销...
10-24
电话机器人的兴起对电销行业来说是“惊喜”还
随着互联网 大数据 的普及,许多 电销 行业如雨后春笋般争先恐后地冒出来。而今电销行业的混乱,让各位涉足电销...
10-24
百应电话机器人有哪些功能?百应电话机器人好
百应 智能 电话机器人 能够协助企业进行呼入接待、 外呼 回访等服务场景,能够经过不断的培训学习,逐步完善成专...
10-24
客服外呼系统都有哪些优势?
当前呼叫中心电话系统被企业用于业务 电销 以及客户服务,然而随着企业需求不断扩大,原来传统的自建 呼叫中心...
10-24
电销机器人效果怎么样?智能电话机器人可行吗
几百数千年后,或许没人会记得卡斯帕罗夫曾是世界第一的围棋高手,但人们会记得,他败给了电脑深蓝。那虽算不...
10-24
百应智能外呼系统,贷后管理科技升级
去年底开始,接连出台政策和法规加强对消费 金融 等金融形态进行 规范 。强 监管 下,行业走向规范发展,行业竞...
10-24
百应智能外呼系统引领外呼行业新风向
电话销售: 您好,我这边是XX地产,给您推荐一下精装酒店式公寓,有兴趣了解一下吗? 客户: 具体位置在哪里啊?...
10-24
小贷企业为什么需要电销机器人?
随着信贷行业逐步进入我们的生活中,越来越多人选择借款来处理资金难题。信贷企业不断涌现,业务开展迅猛,行...
10-24
雷霆电话机器人是如何转接人工的?
当我们在拨通移动、联通或电信 运营商 的客服电话时,总会要先经过一些机械化的选择,然后成功连接人工坐席反馈...
10-24
米卡迪电话机器人效果怎么样?
外呼 电话机器人 ,之所以能智能的与客户无忧交流,因为运用了下面这么多高技术。 ASR 语音识别 米卡迪电话机器人...
10-24
灵声电话机器人效果怎么样?好用吗
外呼 电话机器人 ,之所以能智能的与客户无忧交流,因为运用了下面这么多高技术。 灵声 电话机器人 效果怎么样?...
10-24
电销机器人要想效果好,话术定制有多重要
电话机器人 是基于智能语音技术的智能营销工具。它会像真人一样主动拨打客户的电话,介绍产品并回答客户的咨询...
10-24
智能电话机器人的实现原理,使用安全吗?
随着科学技术的进步和 人工智能 的发展,越来越多的智能产品已经进入我们的工作和生活。智能手机、智能电视、智...
10-24
福州哪里有电话机器人研发公司?
人工智能 再次成为各行各业关注的焦点,自从这个概念首次提出以来,60年已经过去了。自从AlphaGo以巨大优势击败人...
10-24
电销机器人销售能力怎么样?
自从 电话机器人 一出现,在 电销 行业火爆了起来。面对电话机器人的各种优势,企业跃跃欲试,但又害怕效果不理...
10-24
推荐文章
黑客窃取澳军资料,涉30GB敏感信息
品牌奶茶店都有商标吗?奶茶属于哪一种类型的商标?
c#加密类使用方法示例
浅谈laravel 5.6 安装 windows上使用composer的安装过程
什么是电话营销
保护未注册商标的合理性
vbs实现右键菜单中添加CMD HERE
关于知识产权民事纠纷的受案范围
上一篇:
W3C教程(1):认识W3C
下一篇:
XHTML CSS网站设计的优势和问题
一起分享吧
版权所有:巨人网络(扬州)科技有限公司——拥有网站建设十年经验,具备独立网站开发能力,能够提供完善的网站设计及相关的网站制作服务! 全国统一服务热线:400-1100-266
展开
收缩
QQ咨询
在线咨询
客服小董
客服小张
客服小刘
客服小李
客服小王
招商加盟
财务查询
微信客服
电话咨询
400-1100-266