HTML锚与链接

A元素锚与链接的区别

锚(anchor)和链接(link)都是a元素,唯一不同的是有没有href attribute。

在Firefox35,Chrome41中,只要a元素有name这个attribute,不管name有没有值,都是锚。但在IE中,如果name没有值,又没有href,则既不是锚也不是链接。

在所有浏览器中,只要a元素有href属性,不管有没有值,都是链接。

锚的创建与作用

锚的作用是当URL的最后部分是#anchorname时,浏览器会滑动滚动条,使这个锚出现在可见窗口最顶端。

创建方式:

  • 创建一个a元素,同时给它设置一个有意义的name;
  • 不使用a元素,而是在需要的元素上,给这个元素设置一个有意义的ID属性;

A链接

A链接的四个状态

A元素作为链接的时候,有四个伪类::link,:hover, :active, :visited,分别对应静止、鼠标悬停、被点击时和被点击后四个状态。

下载链接

使href属性指向一个文件,只要用户点击,就可以触发浏览器下载这个文件,不过这很可能触发浏览器打开一个新窗口。

HTML5中的A元素多了一个download属性(把href的值转赋给这个属性),使用这个属性下载文件,浏览器不需要打开新窗口就可以直接下载文件。

指定窗口打开链接

A元素有一个target属性,这个属性在HTML4严格模式下不是一个标准属性,但因为被广泛使用,在HTML5中已经被认定为标准的属性。

Target属性的值,应该是frame元素的name,或者是_parent,_top, _self, _blank这四者之一。

HTML4标准链接打开新窗口

既然target在HTML4不是标准的属性,如果要是页面符合W3C标准,就不能在元素上直接使用。但我们可以通过JavaScript在页面加载完成后动态设置target属性。

点击链接时通知感兴趣的第三方

这个是HTML5添加的新功能,HTML5为A元素增添了一个ping属性。Ping属性的值是一串空格分开的URL,当链接被点击时,浏览器会发送POST请求给这些URL,说明这个链接被点击过。

但现在只有Chrome36+支持。

提前缓存目标资源

<a href="https://www.example.org"rel="prefetch">resource</a>

Link链接

Link链接元素没有结束标签,所以是放在head元素中的。

加载样式文件

<link rel=”stylesheet” type=”text/css”href=”file.css” >

设置站点图标

<linkhref="https://whatwg.org/images/icon" rel="icon">

提前缓存目标资源

<link href="https://www.example.org"rel="prefetch">

其他

  • 如果给a设置href值,在老版本的firefox中调用click方法可能不会触发a转向。
  • 在Chrome36中,调用dispatchEvent()方法,a连接也会转向,而在Firefox30中不会。
时间: 2024-10-08 15:24:41

HTML锚与链接的相关文章

HTML锚点链接

1.锚点链接:就是一个页面你在最下面会看见一个"点击回到顶部"的按钮 如何使用: (1)在最上面写 <a name="top"></a> (2)在最下面写 <a type="#top"></a> 注意:下面type中的属性就是上面的name中属性加上一个#

锚点链接 阻止a标签跳转

  参考 http://blog.csdn.net/awe5566/article/details/22583699 href="#downJacket" 锚点链接 必须写: 但又想阻止a标签跳转(阻止默认的滚动监听,好自己设置scrollTop), onclick="return fales" <a href="#downJacket" onclick="return false;" >羽绒</a>

JQuery 实现锚点链接之间的平滑滚动

web开发前端一直用JQuery ,真正接触了才体会到,JQuery 原来比我想象的要强大的多,也可能比我体会到的还要强大的多,特别是兼容性那个好,于是把一些好玩的,酷炫的,能够取代 JS 的.统统给用上了. 从 JQuery 引入今天的正题.用 JQuery 实现锚点链接之间的平滑滚动.曾经介绍过一个用 JS 实现的页面锚点跳转缓冲特效,效果相当不错.能够在同一页面的锚点链接之间实现平滑的滚动,可是 JS 代码相对来说比較冗长.如今好了.仅仅要已经载入了 JQuery.我们就能够用较为简短的代

锚点链接

含义: 锚点链接,是在一个网页的不同区域进行跳转 使用步骤: 1  定义锚点(做个记号): <a   name="锚点记号"> </a> 锚点名称的命名规格: 可以包含字母,数字,下划线 以字母打头 <a>和</a> 之间没有内容,即这个记号不是让我们看到,是链接使用的 <a name="top1"></a> 2  跳转到锚点(记号): 语法 <a href="文件名#锚点名称&

jquery 监听所有锚点链接实现平滑移动

jquery 监听所有锚点链接实现平滑移动,地址栏上不会改变链接地址 //监听所有锚点链接实现平滑移动 $('a[href*=#],area[href*=#]').click(function() { if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) { var $target = $(this.hash);

jquer导航锚点链接动画效果和返回顶部代码

1 $(function(){ 2 $(".index_nav li a").click(function(event){ //绑定按钮的单击事件 3 var index = this.title; //取得点击按钮的title属性,这里就是按钮的数字 4 // alert(index); 5 var id = "#" + "index_" + index; // 取得需要跳转到的div 的 id 6 // alert(id); 7 $(&quo

锚点链接以及hash属性

相信大家挺经常见过这样一个效果.有一个很长很长的页面,分成好几部分,目录中一点击,就能定位到页面某个位置. 例如:有这样一个目录,例如你点击一下“HTML”,就会直接跳转到“HTML”的页面位置 这就是锚点链接(也叫书签链接),常常用于那些内容庞大繁琐的网页,通过点击命名锚点,不仅让我们能指向文档,还能指向页面里的特定段落,更能当作"精准链接"的便利工具. 在长页面中,用锚点定位本页面的某个位置,那用锚点链接就可以了.用法很简单,代码demo如下: <!DOCTYPE html&

制作锚点链接

锚点链接有什么作用呢?当一个页面过长,拖动起来非常的费劲,于是在本页面建立锚点链接,在本页面进行链接. 1.先举个例子,说下下锚点链接的概念. 如图所示,比如,如图所示是一个网页. 锚点链接的意思说就是:"abc"就是一个链接,我点击"abc"之后,就会跳转到"123"的位置上. 最常用的方式,在一个网页的开头,做一个目录,每一个目录都是一个锚点链接,然后链接到本页面相关的位置. 2.锚点链接的语法:<a name="锚点的名字&

html邮件链接和锚点链接

锚点链接: 先设定一个锚点标记,后面点击锚点标记的时候页面自动到达锚点标记的位置. 设置标记: <a name="mn">锚点标记</a> <a href="#idmn">锚点的内容</a> 邮件链接: <a href="mailto:[email protected]?[email protected]"></a> <!--发送邮件给[email protected]