热搜:NVER node 开发 php

HTML锚与链接_html/css_WEB-ITnose

2024-11-09 12:05:01
HTML锚与链接_html/css_WEB-ITnose

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