a 元素是相当重要的一个元素，应用十分广泛，a 元素就是一个链接，凡是和跳转页面有关的按钮或者链接甚至图片都可以用 a 元素来写。

<body>
    <a href="https://www.baidu.com">跳转到百度</a>
</body>

a 元素会生成一个链接，一般浏览器默认会给这个 a 元素蓝色样式，并且带上下划线，当然这些样式都可以修改，最神奇的是 a 元素点击是可以跳转的。a 元素有一个 href (hyper reference) 属性，我这里要跳转到百度，就把这个属性直接写成百度官网即可。a 元素还有一个 target 属性，这里只介绍这两个属性。

href 属性

这个 href 属性可以填的值非常多，主要有以下几种

• 跳转到某个地址：跳转到某个网址
• 锚链接：跳转到当前页面的某个位置
• 功能性链接：点击后出发某个功能

跳转到某个地址

这里路径的书写方式参考 7.路径的书写方式，其实一般来说都是写某个网址或者某个相对地址。

锚链接

锚点可以让网页在不刷新的情况下跳转到当前页面的某个位置，首先我们要设置锚点，锚点的设置用 id 属性，如下所示

<p id="test"></p>

设置好锚点之后，就要设置锚链接了，锚链接的链接方式以 # 开头，后面跟上 id 属性，例如我要跳转到上面的 p 元素，id 为 test，那我就要像下面这样写

<a href="#test"></a>

有了这个 a 元素之后，href 属性值为 #test ，那点击后就会跳转到 id 为 test 的那个锚点上去

锚点方式和超链接方式本质是一样的，点击之后地址栏最后会拼接上 #id ，拼接上后就会跳转到对应 id 的位置，但不同点就在于锚点不刷新链接，不会跳转到其他页面, 哪怕不使用这个超链接，我直接输入 http://localhost:8080/index.html#test 跳转到的也是当前页面的 test 锚点处。 如果直接写 # 不拼接 id，那么浏览器会自动回到页面顶部，所以我们可以用这样一个超链接实现回到顶部的功能：<a href="#"></a>

id 属性

id 属性是一个全局属性，任何元素都可以有 id 这个属性，id 属性表示元素在文档中的唯一编号，id 一定是唯一的，不允许出现两个相同的 id

功能链接

功能链接主要有以下三个作用

• 点击执行 js 代码
• 发送邮件
• 拨打电话

<a href="javascript:altert('hello')"></a>

以上就可以执行 JS 代码，弹出一个 hello

这个功能其实还是比较实用的，举一个例子，我们有时候就是希望 a 标签不跳转某个页面，转而执行我们给定的 JS 代码，这个就要用到 JS 中的事件来做，但是 a 元素比较特别，因为我不让他跳转到某个页面，所以链接理应为空，也就是这样 <a href=""></a>，读者若真这么写，那这里就有问题了，因为 a 元素如果不写链接，默认是刷新当前页面，这就很恶心，因为 js 代码执行过程中是不能刷新页面的，这一刷新就让我们 js 代码执行不了了，为了取消这一个刷新的默认事件，js 事件对象里其实也有相应方法，但是我们也可以写成这样 <a href="javascript:void(0)"></a>，这样就可以直接取消 a 标签默认跳转的事件。

<a href="mailto:1461428394@qq.com"></a>

这样点击超链接后就会调用系统默认的邮箱发送软件来给指定的邮箱发送消息。

很显然，要调用系统默认的邮箱发送软件，系统必须有邮箱发送软件，如果系统没有邮箱发送软件那这个东西是无效的。

<a href="tel:18888888888"></a>

这样点击后就可以直接拨打电话，这个功能必须在手机端才有效，因为一般电脑毕竟也没法插电话卡，如果电脑真的有可以拨打电话的软件，那理论上应该也可以。

target 属性

target 表示跳转窗口的位置，我们这里只关心两个属性，第一个就是不写，默认值 _self，如果不写或者赋为 _self，那就是在当前窗口打开，如果将 target 赋值为 _blank，那就会在新窗口打开。

<a href="https://www.baidu.com" target="_self">在当前窗口打开百度</a>
<a href="https://www.baidu.com" target="_blank">在新窗口打开百度</a>

title 属性

title 是一个全局属性，任何一个元素都可以有 title 属性，当加上 title 属性之后，鼠标选停在这个元素上过一会儿就会有提示文字