a标签属性href的多种写法

文章详细介绍了a标签中href属性的不同用法,包括调用JavaScript函数、避免页面跳转、执行mailto和tel等,讨论了各种方法的优缺点和适用场景,特别强调了在JavaScript交互和用户体验方面的考虑。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

众所周知,a标签的最重要功能是实现超链接和锚点。而且,大多数人认为a标签最重要的作用是实现超链接,其实不单单是实现超链接的方法,今天新起点博客就来整理下a标签中href的几种用法。

在这里插入图片描述

1、a href=“[removed]js_method();”
这是常用的方法,但是这种方法在传递this等参数的时候很容易出问题,而且[removed]协议作为a的href属性的时候不仅会导致不必要的触发[removed]事件,在IE里面更会使gif动画图片停止播放。
2、a href=“javascript:js_method();”
这是常用的方法,但是这种方法在传递this等参数的时候很容易出问题,而且javascript:协议作为a的href属性的时候不仅会导致不必要的触发window。onbeforeunload事件,在IE里面更会使gif动画图片停止播放。W3C标准不推荐在href里面执行javascript语句。
3、a href=“javascript:void(0);” οnclick=“js_method()”
这种方法是很多网站最常用的方法,也是最周全的方法,onclick方法负责执行js函数,而void是一个操作符,void(0)返回undefined,地址不发生跳转。
而且这种方法不会像第一种方法一样直接将js方法暴露在浏览器的状态栏。3、a href=“javascript:” οnclick=“js_method()“这种方法跟跟2种类似,区别只是执行了一条空的js代码。
4、a href=”#” οnclick=“js_method()”
这种方法也是网上很常见的代码,#是标签内置的一个方法,代表top的作用。也是最简单也是非常实用的网页置顶方法。但是有个弊端就是使用此方法相当于给页面刷新一次,如果网页太卡的话可能不太利于用户体验。

5、a href=“#” οnclick=“js_method();return false;”
种方法点击执行了js函数后return false,页面不发生跳转,执行后还是在页面的当前位置。综合上述,在a中调用js函数最适当的方法推荐使用:
6、a href=“https://www.henenseo.com” 绝对 URL - 指向另一个站点
此方法使用后,点击a标签时就会直接跳转到这个链接的页面
7、a href=“/seo.html” 相对 URL - 指向站点内的某个文件
点击a标签链接后会跳转到本站点中的某个链接。
8、href="#top"锚 URL - 指向页面中的锚
指定某个id点击后跳转到指向的页面或者是标签位置中。
9、href=“mailto:baidu.@163.com”
手机端使用较多。点击后对应的邮箱跳转。这种方法浏览器会自动调用系统默认的邮件客户端程序,同时在邮件编辑窗口的收件人设置栏中自动写上收件人的地址,而其他的内容都是空白,留给访问者自行填写。其他方法请看《a标签属性href的mailto多种用法》
10.href=“tel:400-445-4646”
手机端非常的使用,就是可以快捷的通过a标签拨打联系电话。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值