html中a标签href=””的几种用法介绍

        众所周知,a标签的最重要功能是实现超链接和锚点。而且,大多数人认为a标签最重要的作用是实现超链接,今天我刚好碰到a标签的一种写法,所以就来整理下a标签中href的几种用法。

一、Js的几种调用方法(参考总结的)

      1、

a href="javascript:js_method();"

       这是常用的方法,但是这种方法在传递this等参数的时候很容易出问题,而且javascript:协议作为a的href属性的时候不仅会导致不必要的触发window.onbeforeunload事件,在IE里面更会使gif动画图片停止播放。W3C标准不推荐在href里面执行javascript语句
       2、

 a href="javascript:void(0);" onclick="js_method()"

       这种方法是很多网站最常用的方法,也是最周全的方法,onclick方法负责执行js函数,而void是一个操作符,void(0)返回undefined,地址不发生跳转。而且这种方法不会像第一种方法一样直接将js方法暴露在浏览器的状态栏。
       3、

立即学习“前端免费学习笔记(深入)”;

a href="javascript:;" onclick="js_method()"

       这种方法跟跟2种类似,区别只是执行了一条空的js代码。
      4、

a href="#" onclick="js_method()"

       这种方法也是网上很常见的代码,#是标签内置的一个方法,代表top的作用。所以用这种方法点击后网页后返回到页面的最顶端。

     5、

a href="#" onclick="js_method();return false;"

       这种方法点击执行了js函数后return false,页面不发生跳转,执行后还是在页面的当前位置。
      综合上述,在a中调用js函数最适当的方法推荐使用:


二、href=”#”的作用

       a中href=”#”表示回到最顶部。如果当前页面中需要滚动的话,那么用这种方式就可以直接回到顶部。比如有些网站会在右下角制作一个图标按钮,回到顶部,那么此时可以考虑用这种最简单的方式实现。

三、href=”URL”的作用

     1、URL为绝对URL

     此时指向另一个站点,比如

href="http://write.blog.csdn.net"

,那么点击时就会直接跳转到这个链接的页面。

    2、URL为相对URL

     此时指向站点内的某个文件,比如href=”/test.doc”,那么点击时就会直接下载文件。

    3、锚 URL 

       此时指向页面中的锚,比如href=”#top”,那么点击时就会到当前页面中id=”top”的这个锚点,实现当前页面的所谓跳转。用的最多就是在可滚动页面中,添加菜单,可以直接回到页面中的某个部分的内容。

即所有的三种代码样例:

以上就是html中a标签href=””的几种用法介绍的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1544846.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 16:16:06
下一篇 2025年12月21日 16:16:14

相关推荐

  • html中a标签href=’#’与href=’###’的区别分享

      首先, 标签 + onclick='{jscode}’ 是很常用的一种 js 运用方式,而不使用 href=’javascript:{jscode}’ 是为了兼容多种浏览器对 标签的解释和处理不同。其次,使用 标签 + onclick='{jscode}&#8…

    好文分享 2025年12月21日
    000
  • html中a标签href=#与href=javascript:void(0)的区别解析

    浅谈href=#与href=javascript:void(0)的区别,需要的朋友可以参考一下 #”包含了一个位置信息 默认的锚点是#top 也就是网页的上端 而javascript:void(0)  仅仅表示一个死链接 这就是为什么有的时候页面很长浏览链接明明是#可是跳动到了页首 立即…

    好文分享 2025年12月21日
    000
  • html页面中a标签href属性可以不写吗?

    我使用一组a标签做tab切换,给a标签加上href=”#”的话点击a标签总是会跳到顶部,加javascript:void(0)的话感觉有的时候点击的反应速度变慢,偶尔会卡,请教下各位如果a标签不加href会有什么影响,不符语义化或者对优化什么的有啥影响吗? 其实 href=&…

    好文分享 2025年12月21日
    000
  • html中关于table以及form表单标签的详解

                          表格标题 姓名 年龄 张三 22 账号: 密码: http://localhost:4778/ashx/login.ashx?login_username=admin&login_pswd=123456 http://localhost:4778/…

    2025年12月21日 好文分享
    000
  • 如何利用html和css来实现注册表单的简单实例

    效果总览: 具体代码实现 提交用户信息body, p, td, input {font-size:12px; margin:0px; }select {height:20px; width:300px; }.title {font-size: 16px; padding: 10px; width:8…

    2025年12月21日
    000
  • 关于html和css以及javascript等其他的注释方式分享

    一、html的注释方法 内容 包含在“”之间的内容将会被浏览器忽略,且不会显示在用户浏览的最终界面中。 注释的部分虽然浏览器在执行时会忽略,但在浏览器中查看源代码时仍然可以看到 二、CSS的注释方法 立即学习“Java免费学习笔记(深入)”; /* css注释*/ 在单独的css样式表文件中也采用此…

    好文分享 2025年12月21日
    000
  • html中如何动态添加表格的实例分析

    这篇文章主要介绍了html中表格动态添加的实例代码,需要的的朋友参考下吧 废话不多说了,直接给大家贴代码了,具体代码如下所示: Table First Name Last Name 张 三 function add() { var trObj = document.createElement(“tr…

    2025年12月21日
    000
  • html中关于列表的示例代码详解(图)

    html中的列表 HTML中列表中共有三种:有序列表、无序列表和定义列表。 1、有序列表是一列使用数字进行标记的项目,它使用 包含于标签(ordered lists)内; <!–Code highlighting produced by Actipro CodeHighlighter (fr…

    2025年12月21日 好文分享
    000
  • 关于html中有序列表与无序列表的图文代码详解

    编写有序列表,代码如下: 数字显示第一天第二天第三天第四天字母显示第一天第二天第三天第四天小写罗马数字显示第一天第二天第三天第四天大写罗马数字显示第一天第二天第三天第四天数字显示,自己确定开始数字第一天第二天第三天第四天 显示效果为: 立即学习“前端免费学习笔记(深入)”; 无序列表的代码如下: *…

    2025年12月21日
    000
  • 关于html中列表样式的实例详解

    HTML中的列表 HTML中列表中共有三种:有序列表、无序列表和定义列表。 1、有序列表是一列使用数字进行标记的项目,它使用 包含于标签(ordered lists)内; <ol><li>开始部分</li><li>次要部分</li><…

    2025年12月21日 好文分享
    000
  • html使用四种方式引用css样式表的实例详解

    方法一: css1.html 内联样式(方法一)百度一下 方法二: css2.html style标签中调用(方法二)a{color:#FF0000;background:#FFFF00;}百度二下  方法三: css3.html link标签中调用(方法三)百度三下 和css3.html同目录下的…

    好文分享 2025年12月21日
    000
  • html中关于下拉列表select的图文代码详解

    html中的下拉列表:  Html代码   Volvo Saab Opel Audi 其中select是显示一个下拉列表(drop down list)出来,option是下拉列表中的项目(item),而option的文本内容(text content)是下拉列表项目中显示到页面上的值,value是…

    2025年12月21日 好文分享
    000
  • html中关于表单标签form的使用详解

    表单就是一个放控件的地方,如文本框,密码框,按钮之类的,这些控件叫做表单元素。  表单的构成: 表单内容(包括按钮,输入框,选择框等等) 表单元素的基本标签是标签它的type属性有以下类型: text:文本框 password:密码框 radio:单选按钮 checkbox:复选框 reset:重置…

    2025年12月21日
    000
  • html以及DIV+CSS的命名规范总结分享(收藏)

    网页制作中规范使用div+css命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体div css命名规则css命名大全内容篇。 常用DIV+CSS命名大全集合,即CSS命名规则 我们开发CSS+DIV网页(Xhtml)时候,比较困惑和纠结的事就是CSS命名,特别是新手不知道什么地…

    好文分享 2025年12月21日
    000
  • 关于html与CSS标签命名规则的总结大全

    文件夹主要建立以下文件夹:  1、images 存放一些网站常用的图片;  2、css 存放一些css文件;  3、flash 存放一些flash文件;  4、psd 存放一些psd源文件;  5、temp 存放所有临时图片和其它文件;  6、copyright 版权信息(可选)  8、readme…

    好文分享 2025年12月21日
    000
  • 关于html和CSS以及JavaScript前端命名规范的详解

    无意发现自己文件夹里面有这么一个文件,具体从哪里来的不记得了,仔细看下,发现总结的挺好的,贴出来分享一下。 无论是从技术角度还是开发视角,对于web前端开发规范文档都有一定规范,本文就css3和html5的发展前景总结了一系列的web开发文档,仅供大家参考。 规范目的: 为提高团队协作效率, 便于后…

    好文分享 2025年12月21日
    000
  • html中关于img标签以及改变图片尺寸的详解(图)

    1、统一大小? 我的网页上面有许多的图片,有的大,有的小,我想如果图片大的实现缩放,所有的都是一般大。来看看没有是什么效果。 大家看的出来,非常的难看的,于是我想让有没有一种方法是把那个大的变成小的呢? @@##@@ 效果图如下: 立即学习“前端免费学习笔记(深入)”; 但是如果图片太小了呢?就会被…

    2025年12月21日
    000
  • Html中关于空格的各种显示详解

    一、使用全角空格 全角空格被解释为汉字,所以不会被被解释为HTML分隔符,可以按照实际的空格数显示。 二、使用空格的替代符号 替代符号就是在需要显示空格的地方加入替代符号,这些符号会被浏览器解释为空格显示。 空格的替代符号有以下几种: 立即学习“前端免费学习笔记(深入)”; 名称编号描述  不断行的…

    2025年12月21日
    000
  • 关于html中空格的问题解决

    联系我们 联系我们 联系我们 上边三种写法图标和文字的距离为什么都不一样?和inline-block的图标和换行有关系吗?如果我换5行 联系我们 联系我们 上边两种效果是一样的,为什么呢? 联系我们 nasp和实际打出来的空格效果是一样的为什么还要用nbsp呢? 联系我们 联系我们 像这种1个空格1…

    好文分享 2025年12月21日
    000
  • html与CSS如何实现圆形和圆角图片格式的示例代码

    效果展示 实现代码 < JcMan .image1{ margin-top: 100px; width:200px; height:200px; border-radius:200px; } .image2{ margin-top: 100px; width:200px; height:200…

    2025年12月21日
    000

发表回复

登录后才能评论
关注微信