HTML a标签之空链接

文章目录

`` 标签介绍
空链接的作用以及``和``的区别

`<a>` 标签介绍

<a>是HTML的标准标签之一，称为链接或是超链接标签。这个标签作用是定义一个锚（anchor）,根据链接的目标的差异，分为两种状况：

指定一个其他文档的外部连接（href指定地址）；点击链接跳转到新的页面，是在原窗口还是新开窗口可以通过target属性设置。

<a href="https://oscar.blog.csdn.net/">我的博客</a>

创建一个本文档内部的链接。（href的值设置为#+元素的name或id），点击页面定位到指定标签的区块，适用在有滚动条的窗口。

<a href="#书签的名称">链接文字</a>

比如href.html页面有如下内容：

    <!--内部锚点--><a href="#inerdiv2">Div 2</a><div id="inerdiv1" style=" background-color: blueviolet;">Div 1</div><div id="inerdiv2" class="even">Div 2</div><div id="inerdiv3" style=" background-color: blueviolet;">Div 3</div>

页面效果如下：

但点击以上红色框框的链接时，浏览器会滚动并定位到Div 2区块，地址栏显示也会变化为“href.html#inerdiv2”。

在线效果演示：
http://jsrun.net/g2vKp

空链接的作用以及`<a href="#"></a>`和`<a href="javascript:;"></a>`的区别

在很多时候，需要设置超链接不发生跳转，最有可能出现的场景是：

<a>的点击有更复杂的逻辑，需要通过onclick的函数才能完成，所以就不需要href。但是如果不加href属性，又没有超链接的页面效果，也就是不会出现下划线，以及点击之后字体样式的变化。特别是函数执行的是异步的请求，这种状况广泛的出现在一些前端框架里。

设置href属性点击不生效，称为空链接，常用的又两种方法：

<a href="#"></a> ，本页链接，链接到当前页面
<a href="javascript:;"></a>，空链接，相比# ，如果有滚动条不会到顶部

这两种方式都是不产生跳转到效果。因为href可以直接识别JS的代码，所以可以使用javascript:的方式。
javascript: 是一个伪协议，通过链接调用一个javascript函数，如果函数为空，则调用的是
空函数。 javascript:;也可以写为javascript:void(0);，称为死链接，更常使用在Ajax中

<a href="javascript:void(0)"></a>
但是javascript:void(0) 的使用会有一些问题，比如在IE中会引起动画停止播发等问题。 href="#"又有可能发生页面滚动，可以使用两个或多个 # 就不会发生页面的滚动了。比如
<a href="#####"></a> 有滚动条不会到顶部

HTML a标签之空链接相关推荐

HTML——a标签实现空链接（禁止跳转）
基本概念空链接:指鼠标指向链接后,鼠标变成手形,但是单击链接后,仍然停留在当前页面. 解决方案 a标签href不跳转禁止跳转当页面中a标签不需要任何跳转时,从原理上来讲,可分如下两种方法: 1. ...
空链接，a标签herf属性，href=“#” 或者 href=“javascript:void(0)；” 或者href=“javascript:；“ 区别
目录 # 包含了一个位置信息,默认的锚是 #top 也就是网页的上端. href="javascript:void(0);" 和 href="javascript:;&q ...
超链接标签（外部链接、内部链接、空链接、下载链接、网页元素链接、锚点链接）、注释
超链接标签在HTML中,<a>标签用于定义超链接,作用是从一个页面链接到另一个页面 1.链接的语法格式 <a href="跳转目标" target=" ...
a标签连接空标签的方法
在写页面时,想把a标签设置成空链接,方便后面数据的连接可以有几种方法. 1. <a herf=""></a> 这种方法会默认打开本页面,重新刷新一次页面. ...
【原】[webkit移动开发笔记]之空链接是使用javascript:void(0)还是使用#none
基于webkit内核的移动开发笔记,之前已经写过4篇,主要是关于移动开发重构的分享,今晚有空了再写一篇. 回忆去年年底最后的一个项目,还有一个很怪异的bug,让项目团队的成员感到十分头疼.测试组的同事 ...
HTML中超链接：内部链接、外部链接、空链接、锚点链接的区分
①.内部链接:在自己的网站中,网页之间相互跳转. <a href="a.html" target="_blank">跳转到a.html</a& ...
超链接——内部链接、外部链接、锚点链接、下载链接、空链接、其他元素链接
一.内部链接 first.html 和second.html在同一文件内,想在first.html中通过超链接跳转到second.html中,可以通过内部链接实现. <a href=" ...
HTML基础-标签分类(闭合标签，空标签，块级元素，行内元素，行级块元素，可替换元素)
文章目录一.闭合标签和空标签二.位置特性(块级元素,行内元素,行级块元素) 块级元素(block) 行级元素(inline) 行内块元素(inline-block) 三.元素之间的转化四.可替换 ...
[css] 怎么使用css选择空链接？
[css] 怎么使用css选择空链接? <!DOCTYPE html> <html lang="en"> <head><meta char ...

HTML a标签之空链接

文章目录

`<a>` 标签介绍

空链接的作用以及`<a href="#"></a>`和`<a href="javascript:;"></a>`的区别

HTML a标签之空链接相关推荐

最新文章

热门文章

HTML a标签之空链接

文章目录

<a> 标签介绍

空链接的作用以及<a href="#"></a>和<a href="javascript:;"></a>的区别

HTML a标签之空链接相关推荐

最新文章

热门文章

`<a>` 标签介绍

空链接的作用以及`<a href="#"></a>`和`<a href="javascript:;"></a>`的区别