a标签属性href的多种写法

这篇具有很好参考价值的文章主要介绍了a标签属性href的多种写法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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标签拨打联系电话。文章来源地址https://www.toymoban.com/news/detail-446415.html

到了这里,关于a标签属性href的多种写法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包赞助服务器费用

相关文章

  • js点击事件多种写法

    给html标签内添加 onclick属性 , 值 写 js中 定义的函数名 ,最终 实现 调用 

    2024年02月16日
    浏览(12)
  • Vue(数据绑定、el和data多种写法、理解MVVM、数据代理)

    Vue(数据绑定、el和data多种写法、理解MVVM、数据代理)

    1. 单项绑定(v-bind) 数据只能从data流向页面 在输入框中中输入vue实例中的数据没有变化 2. 双向绑定(v-model) 数据能从data流向页面,也可以从页面流向数据 在输入框中中输入vue实例中的数据也会变化,同样改变之后如果存在单项数据绑定也会把数据传给的那箱数据绑定的

    2023年04月23日
    浏览(11)
  • vue动态绑定style样式之动态添加style样式的多种写法

    项目中会需要动态添加 style 行内样式,现指出常用的几种方式。 注意: 1、凡是有 - 的style属性名都要变成驼峰式,比如font-size要变成 fontSize。 2、除了绑定值,其他的属性名的值要用引号括起来,比如 fontSize:\\\'14px\\\' 而不是 fontSize :14px。 对象形式 data(){ return { baseStyles: { width:

    2024年04月17日
    浏览(9)
  • 【HTML5】HTML5 多媒体标签 ② ( 视频标签 <video> | 视频标签常见属性 | autoplay 属性 | controls 属性 | poster 属性 | 设置多个格式视频 )

    【HTML5】HTML5 多媒体标签 ② ( 视频标签 <video> | 视频标签常见属性 | autoplay 属性 | controls 属性 | poster 属性 | 设置多个格式视频 )

    HTML 5 的 video 视频标签 , 支持 ogg / mpeg 4 ( mp4 ) / webM 三种格式的音频 , 不同的浏览器支持的音频格式不同 ; IE 浏览器 : 9.0 以上版本支持 mp4 格式 ; Firefox 浏览器 : 3.5 以上版本支持 ogg 格式 ; 4.0 以上版本支持 webM 格式 ; Opera 浏览器 : 10.5 以上版本支持 ogg 格式 ; 10.6 以上版本支持

    2024年02月09日
    浏览(38)
  • Mybatis 的多种标签使用以及 Spring 框架单元测试

    Mybatis 的多种标签使用以及 Spring 框架单元测试

    在讲解 Mybatis 的标签之前, 要先介绍一下另一个 Java 的好帮手 Spring 框架内置的 JUnit 测试框架. 为什么要在 Mybatis 学习之前了解 JUnit 呢 ? 很大一部分原因不仅仅是因为单元测试是写完项目后开发人员自己需要做的, 更重要的是当前阶段学习中, 利用 JUnit 可以更简单的构造数据来

    2024年02月09日
    浏览(7)
  • <video>视频标签属性

    <video>视频标签属性

    video                                  video 视频标签,在页面中插入视频 video src=” 视频路径 ”                   src 链接视频路径 video controls                         controls 显示播放的控件 video autoplay                       

    2024年02月15日
    浏览(44)
  • input标签,新增那些属性

    input标签,新增那些属性

    input标签作为页面与用户交互的重要入口,了解掌握input的属性,至为重要。 HTML5给input表现的type属性,添加了很多的属性值,用来丰富了文本框类型。比如: 如果是H5页面的话,在不同的手机会有不同的展示,比如: 唤醒的手机本身的输入的效果。 input标签上传文件的话,

    2024年02月09日
    浏览(7)
  • style标签上的scoped属性

    vue中 在vue文件中的style标签上有一个特殊的属性:scoped(布尔值); 作用 该属性的作用是将当前标签下的样式私有化,仅对当前组件起作用 只管当前组件和子组件的最外层(不控制自组件) 原理 若是给style标签添加了scoped属性,在编译时 给当前组件和子组件的最外层的dom节点添

    2024年03月08日
    浏览(66)
  • HTML5-1-标签及属性

    HTML5-1-标签及属性

    页面的组成: HTML(HyperText Markup Language,超文本标记语言)是用来描述网页的一种语言,它不是一种编程语言,而是一种标记语言。 HTML5 是下一代 HTML 标准。 HTML5 是 W3C 与 WHATWG 合作的结果,WHATWG 指 Web Hypertext Application Technology Working Group。 基本结构: HTML中不区分大小写,但

    2024年02月10日
    浏览(8)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包