Home  >  Article  >  Web Front-end  >  HTML锚与链接_html/css_WEB-ITnose

HTML锚与链接_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:46:011287browse

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+支持。

    提前缓存目标资源

    resource

    Link链接

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

    加载样式文件

    设置站点图标

    提前缓存目标资源

    其他

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

    Statement:
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn