9. a元素 {ignore}

9. a元素 {ignore}

[toc]

1. href属性

hyper reference：超级引用，即：超链接。通常表示跳转的地址。

普通链接

普通链接，即：跳转地址，用于跳转到某个页面。

示例：

<a href="https://dahuyou.top">跳转到我的主页</a>

锚链接

锚点的作用

锚点 —— 会改变地址，如果锚点在当前页，那么页面跳转不会刷新；否则，页面跳转会刷新。

测试

锚点在当前页，不会刷新页面。

先使用 emmet 语法，快速生成一段 HTML。

<!-- 袁：a[href="#chapter$"]*6>{章节$}
((h2[id="chapter$"]>{章节$})+p>lorem1000)*6 -->
<!-- 陶：a[href='#chapter$']{章节$}*6
(h2#chapter${章节$}+p>lorem1000)*6 -->

9. a元素 - 图1

补充：

<a href="#">回到顶部</a>
<!-- href="#" 若#后面啥也不加，那么会自动跳转到页面顶部。 -->

锚点在其他页面，会刷新页面。

在同一个目录下，新建两个文件：test1.html、test2.html，内容如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>test1</title>
</head>

<body>
    <a href="./test2.html">跳转到test2.html</a>
    <p>
        this is test1.html
    </p>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>test2</title>
</head>

<body>
    <a href="./test1.html">跳转到test1.html</a>
    <p>
        this is test2.html
    </p>
</body>

</html>

功能链接

点击后，触发某个功能 —— 不过触发某个功能的前提是拥有能够触发这个功能的应用。比如：大部分笔记本电脑不能打电话，所以拨号功能也就没啥用了。

执行JS代码，javascript:js代码
发送邮件，mailto:邮箱
- 要求用户计算机上安装有邮件发送软件，比如微软的 exchange。
拨号，tel:电话号码
- 要求用户计算机上安装有拨号软件，或使用的是移动端访问。

<a href="javascript:alert('您好')">
    弹出：'您好'
</a>
<a href="mailto:dahuyou_top@163.com">
    给 dahuyou_top@163.com 发邮件
</a>
<a href="tel:111222333">
    给 111222333 拨打电话
</a>

2. target属性

表示跳转窗口位置。

target的取值：

_self：在当前页面窗口中打开，默认值 —— 当前页会被覆盖
_blank: 在新窗口中打开 —— 当前页不会被覆盖

除了这两个取值外，还有其他取值。不过，现阶段只要了解这两个取值即可。

3. title属性

title 是一个全局属性，所有元素都可以用。

作用：当鼠标悬停在内容上时，会显示 title 的属性值。

小结

a元素的3个属性：

href
- 普通链接
- 锚链接
  - 当前页的锚链接
  - 其他页的锚链接
- 功能链接
  - javascript:
  - mailto:
  - tel:
target
- 两个属性值：_self、_blank，了解它们都有啥用即可。
title
- 是一个全局属性，当鼠标 hover 时，显示设置的属性值。