href属性详解

1,149 阅读3分钟

看到一篇很有趣的文章(大佬们总能把css玩出花来):juejin.cn/post/699201…

其中html部分主要是用了a标签(所以一行js都没有),仔细看了下之后才意识到自己对a标签没啥具体认识(惭愧,只知道是定义超链接),查资料的时候也有很多资料本身存在问题或者说的不是很详细(部分和我实验现象不符),所以这里进行一个梳理总结(所有结论以谷歌浏览器为准)。

href: 链接指向页面的url

其具体内容有如下几种:

  • 绝对 URL - 指向另一个站点(比如 href="www.example.com/index.htm"
  • 相对 URL - 指向站点内的某个文件(href="index.htm")
  • 锚 URL - 指向页面中的锚(href="#top")
  • JavaScript - 执行一段js函数

而在使用的时候,有以下几种场景:

场景一:指向另外一个页面

首先是指向另外一个html地址。

具体使用的时候推荐按照href="//google.com"的方式,这样会自动根据当前地址来决定使用https还是http(当然需要规定协议的场景例外)

也可以使用相对定位指向本站的某一页面。

场景二:指向一个文件

指向一个文件(相对路径和绝对路径都行),本质上和指向一个html文件没啥具体差别,如果文件本身是浏览器不支持打开的,那么会自动变成下载(如zip),而如果是jpg等能打开的,则会直接用浏览器打开(欺软怕硬.jpg)。

如果想要固定是点击下载的话,就需要配置download属性,这时候即使浏览器能打开也会直接下载了。(注意:有跨域问题。且如果用本地文件静态打开的话,download属性会失效)

场景三:指向页面中的锚

href以#开头则为指向页面中的锚。href="#"表示回到最顶部。如果当前页面中需要滚动的话,那么用这种方式就可以直接回到顶部。#后面有具体内容时为跳转到id为对应值的锚点,在可滚动页面中,添加菜单,可以直接回到页面中的某个部分的内容,如下:

<a href="#">回到最顶端</a> 
<a href="#top">跳到id为top的节点</a> 

使用锚点跳转后会在当前url尾部添加锚点值,如 .../test.html#bottom。在生成链接时也可以用这种方式来跳到页面的某个位置。

场景四:指向一段js

href可以运行一段js,如<a href="javascript:test();">运行函数</a> 。但在href中运行js是一种不太推荐的用法,有this指向问题及预期外的window事件。如果需要运行js可以在onclidk属性中设置。

也有很多场景是设置href="javascript:void(0)"来生成死链接,这么做的意义在网上只查到一种说法:防止链接跳转到其他页面。这么做往往是为了保留链接的样式,但不让链接执行实际操作

但是如果不需要跳转的话,完全可以不使用a标签,样式通过css设置即可。

以及部分资料说有影响gif播放的情况,但是简单测试了下没发现。

但无论怎么说,都不建议使用a标签和href属性运行js。