HTML 链接 - 绿叶网

在 HTML 中，链接（超链接）是最重要的元素之一，它用于在当前页面中创建一个指向当前页面或其他页面的链接。当用户单击链接时，就会自动跳转到相应的页面。

HTML 链接随处可见，它是一个网页中最常见的元素了。就拿咱们的绿叶网（如下图所示）来说，顶部导航、侧栏导航、图片列表等都用到链接。只要我们点击一下，就会跳转到其他页面。

HTML链接

在 HTML 中，链接也叫做 “超链接（hyperlink）” 。每一个网站都是由非常多的网页组成，而页面之间通常都是通过链接来相互关联的。链接能够让我们在各个独立的页面之间方便地跳转。

HTML 链接标签

在 HTML 中，我们可以使用 a 标签来创建一个链接（超链接）。

语法：

<a href="链接地址">文本或图片</a>

说明：

href 属性用于定义你想要跳转到那个页面的路径（也就是地址）。这个路径可以是相对路径，也可以是绝对路径。对于路径的写法，如果忘了的小伙伴，记得回去翻一下 “HTML 图片” 这一节。

1. 链接的类型

HTML 链接使用范围非常广。你可以将文本设置为链接，这种叫做 “文本链接”。你也可以将图片设置为链接，这个叫做 “图片链接”。

示例 1：HTML 创建文本链接

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <a href="https://www.lvyenet.com">绿叶网</a>
</body>
</html>

页面效果如下图所示。

HTML文本链接

分析：

当我们点击 “绿叶网” 这个文本，就会跳转到绿叶首页。

示例 2：HTML 创建图片链接

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <a href="https://www.lvyenet.com">
        <img src="imgs/logo.jpg" alt="绿叶网">
    </a>
</body>
</html>

页面效果如下图所示。

HTML图片链接

分析：

当我们点击图片后，就会跳转到绿叶首页。不管是哪种链接，我们都是把文字或图片放到 a 标签内部来实现的。

2. 链接的 target 属性

默认情况下，链接都是在当前浏览器窗口打开新页面的。在 HTML 中，我们可以使用 target 属性来定义链接打开窗口的方式。

语法：

<a href="链接地址" target="打开方式"></a>

说明：

a 标签的 target 属性取值有 4 种，如下表所示。

target 属性取值
属性值	说明
_self（默认值）	在原窗口打开链接
_blank	在新窗口打开链接
_parent	在父窗口打开链接
_top	在顶层窗口打开超链接

提示: 大多数情况下，target 属性只会用到 “_blank” 这一种取值。小伙伴们也只需要记住这一个就够了，其他 3 种取值不需要深究。

示例 3：a 标签的 target 属性

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <p>第1个链接：<a href="http://www.lvyenet.com">绿叶网</a></p>
    <p>第2个链接：<a href="http://www.lvyenet.com" target="_blank">绿叶网</a></p>
</body>
</html>

页面效果如下图所示。

a标签的target属性

分析：

从浏览器效果上看，这 2 个链接没什么区别。但当我们分别点击 2 个链接之后，会发现它们打开窗口的方式是不一样的，小伙伴们可以自行试一下。

注意: _blank 属性是以 “下划线（_）” 开头，而不是 “中划线（-）” 开头。

HTML 内部链接

从链接地址的角度来看，HTML 链接还可以分为以下 2 种：

外部链接：链接地址指向 “外部网站的页面”。
内部链接：链接地址指向 “当前网站的其他页面”。

接下来，我们在 VSCode 中修改一下项目结构，如下图所示。

HTML链接的项目结构

对于上图中的 3 个页面，如果我们在 page1.html 点击链接跳转到 page2.html 或者 page3.html，这种链接就是内部链接。这是因为 3 个页面都是位于同一个网站下。

我们在 VSCode 中按照上图建立 3 个页面，代码分别如下所示。

page1.html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <a href="page2.html">跳转到页面2</a>
    <a href="test/page3.html">跳转到页面3</a>
</body>
</html>

page2.html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <h1>这是页面2</h1>
</body>
</html>

page3.html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <h1>这是页面3</h1>
</body>
</html>

小伙伴们在 VSCode 中自己实践一下，就知道内部链接是怎样一回事了。此外，内部链接使用的都是相对路径，而不是绝对路径，这个跟图片路径是一样的。

HTML 锚点链接

有些页面内容比较多，导致页面过长，此时用户需要不停拖动浏览器上的滚动条才可以看到下面的内容。为了方便用户操作，我们可以使用锚点链接来优化用户体验。

在 HTML 中，锚点链接其实是内部链接的一种，它链接地址（也就是 href）指向的是当前页面的某个部分。所谓的锚点链接，简单来说，就是点击某一个超链接，然后它就会跳到 “当前页面” 的某一部分。

示例 4：使用锚点链接

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <div>
        <a href="#article">推荐文章</a><br>
        <a href="#music">推荐音乐</a><br>
        <a href="#movie">推荐动漫</a><br>
    </div>
    ……<br>
    ……<br>
    ……<br>
    ……<br>
    ……<br>
    ……<br>
    ……<br>
    ……<br>
    <div id="article">
        <h3>推荐文章</h3>
        <ul>
            <li>朱自清-荷塘月色</li>
            <li>余光中-乡愁</li>
            <li>鲁迅-阿Q正传</li>
        </ul>
    </div>
    ……<br>
    ……<br>
    ……<br>
    ……<br>
    ……<br>
    ……<br>
    ……<br>
    ……<br>
    <div id="music">
        <h3>推荐音乐</h3>
        <ul>
            <li>任然-疑心病</li>
            <li>司南-冬眠</li>
            <li>艾辰-错位时空</li>
        </ul>
    </div>
    ……<br>
    ……<br>
    ……<br>
    ……<br>
    ……<br>
    ……<br>
    ……<br>
    ……<br>
    <div id="movie">
        <h3>推荐动漫</h3>
        <ul>
            <li>仙逆</li>
            <li>剑来</li>
            <li>遮天</li>
        </ul>
    </div>
</body>
</html>

页面效果如下图所示：

HTML锚点链接

分析：

当我们点击 “推荐文章”、“推荐音乐”、“推荐电影” 这 3 个超链接后，页面就会自动滚动到相应的部分。小伙伴们仔细观察这个例子就可以知道，想要实现锚点链接，需要执行以下 2 步才行。

设置目标元素的 id。
将 a 标签的 href 属性指向该 id。

其中，id 属性就是元素的名称，这个 id 名是随便起的（一般是英文）。不过在同一个页面中，id 是唯一的，也就是说一个页面不允许出现相同的 id。道理很简单，你见过哪两个人的身份证号码是相同的吗？

最后要注意一点，a 标签的 href 属性取值时，需要在 id 前面加上 “#”（井号），以表示这是一个锚点链接。