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中不会。