HTML-a

简介

---

在HTML中插入链接或锚点 ，使用

<a href="..." target="..." >click</a> 

• href ： 为超链接地址，可以为相对路径，URL，和id（添加id为 #id_name 锚点）
• target : 为新连接打开方式， 可以省略为当前窗口，_blank为新窗口，自命名。
  注意：路径链接只用使用’/’，不能使用’\’。

对于a我们经常使用伪类，即将链接不同状态（点击，鼠标划过，已打开等）设置为不同样式。

主要状态包括：

• link：未访问链接状态
• visted：已访问链接状态
• hover：悬停链接状态，鼠标划过连接时。
• focus：链接拥有焦点状态，Tab选择页面链接时。
• acitve：第一次单击链接时。

顺序一般为：link，visted，hover，focus，active

格式：

a:link {
    color: red;
}
a:visted {
    color: blue;
}

使用冒号连接，注意中间不能有空格。

href详解

---

href=”URL”的链接作用

绝对URL

<a href="http://www.baidu.com"  target="_blank"></a> 

此时指向另一个站点,那么点击时就会直接跳转到这个链接的页面。

相对URL

<a href="/src/image/logo.png"></a>

此时指向站点内的某个文件，那么点击时就会直接下载文件。

锚# URL
此时指向页面中的锚，比如href=”#logo”，那么点击时就会到当前页面中id=”logo”的这个锚点，实现当前页面的跳转。
在可滚动页面中，添加菜单，可以直接回到页面中的某个部分的内容。

href的js作用

方式1

 <a href="javascript:void(0);" onclick="js_method()"> </a>

网站最常用和周全的方法，onclick方法负责执行js函数，而void是一个操作符，void(0)返回undefined，地址不发生跳转。且不会直接将js方法暴露在浏览器的状态栏。

方式2

<a href="javascript:;" > <img src= ""></a>

点击执行一行空代码，与href=”javascript:void(0);”作用相同。

方式3

<a href="#" onclick="js_method()"></a>

a中href=”#”表示回到最顶部。如果当前页面中需要滚动的话，那么用这种方式就可以直接回到顶部。比如有些网站会在右下角制作一个图标按钮，回到顶部，那么此时可以考虑用这种最简单的方式实现。

方式4

<a href="#" onclick="js_method();return false;"></a>

这种方法点击执行了js函数后return false，页面不发生跳转，执行后还是在页面的当前位置。