超链接在web开发中使用总结

在工作中在前端页面的编写中经常使用到超链接，遇到了一些细小问题，在这里进行一下总结，以备未来使用，同时分享给大家，方便查找。

 

通常在开发中使用超链接用来触发onclick事件，已达到类似按钮点击操作的效果，同时在样式上比button标签更加灵活。

最常用写法：

 

Js代码  

1. <a href="#" onclick="函数名();"></a>  

 

       在开发过程中容易出现的问题是，在IE环境下，上述写法在页面超出一屏时，在页面下端的链接在触发onclick之前会出现跳动现象，页面会先调回顶端，然后执行onclick中的函数体。

        解决的方法有两类：

        第一类：触发函数写在onclick事件中

                      在这类中javascript函数的写法有两种，效果相同

                      onclick="函数名();"   或者   onclick="javascript:函数名();"

                      href 中则写如空链接

                      空链接的三种方式：

                      

Js代码  

1. href="###"                         第一种  
2. href=" javascript:; "              第二种  
3. href=" javascript:void(0);"        第三种  

          

        a标签通常是内联元素的，是设置不了它本身的width和height的，但它是可以转换为区块元素的，如果在使用中还需要对a标签的样式加以处理。具体实现办法：

  对a标签设置CSS样式：display:block;当a设置了这一属性后，就可以给它加上width和height属性了。

 

       第二类：

              这种方式不再使用事件触发机制，也就是不用在编写onclick事件，而是把javascript函数放在 href属性中，具体如下：

Js代码  

1. <a href="javascript:函数名()" target="_self"></a>  

 

上面总结了超链接的几种用法，但是实际上超链接标签的目的就是用于链接地址，只是在web开发过程中很多人都用这种方式来达到button标签的效果，口耳相传，形成习惯。

   

实际上，按照W3C标准来说，使用超链接a标签，也就要加入链接的地址！如果你使用了a标签，而没有加入要链接的网页地址，那就没必要使用这个标签了，因为其他的标签可以替代，也更符合WEB标准，例如<span></span>或者<em></em>等这类标签。