HTML 基础知识：HTML 链接

概述

本文介绍 HTML 中的链接、其实现、属性和类型。我们还将学习如何在 HTML 中使用不同的标签和元素作为链接。

HTML 链接

HTML 中的链接是通过 Web 连接两个资源之间的连接。HTML 链接（也称为超链接）允许用户从源导航到目标。

除此之外，HTML 链接还可以纵以在网页上存储特定位置（例如，在此页面的左上角，您可以找到一个包含文章涵盖的主题列表的部分。列表项是具有主题部分位置的链接，单击链接后，您可以直接跳转到该部分），或者我们可以制作一个链接以在网络上下载文件。

语法

<a href="link_address"> Text </a>

HTML 链接使用锚点<a>标签声明。

href：在锚标记中使用 href 属性来指定目标地址。HTML 链接（目标地址）位于 “ ” 中，并分配给 href 属性。

发短信：文本是部分，它将作为 HTML 链接在 Web 文档上可见。用户将能够单击此文本以访问目标地址。

例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html links</title>
</head>
<body>
    <h1>Html Links</h1>

    <!-- Upon clicking on 'here', the user will be redirected to the Scaler topics page -->
    <p>Click <a href="https://www.scaler.com/topics/">here</a> to visite Scaler topics website.</p>
</body>
</html>

输出

解释

在上面的示例中，文本“here”充当链接，单击它后，用户将被重定向到 URL https://www.scaler.com/topics/

链接中的目标属性

与链接关联的目标文件可以在多个位置打开，例如，有时当我们单击网站上的链接时，目标页面会在同一选项卡中打开，有时页面会在新选项卡中打开。target 属性指定链接文档应打开的位置。

注意：默认情况下，文档文件在同一选项卡中打开，即如果我们不提及目标属性，则文档文件将仅在同一选项卡中打开。

HTML 目标属性及其行为：

目标属性	描述
_blank	链接的文档将在新选项卡或窗口中打开。
_self	链接的文档将在同一窗口中打开。
_parent	链接的文档将在父框架中打开。
_top	链接的文档将在窗口的整个正文中打开。

默认情况下，target 属性设置为 _self

例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html links | Target</title>
</head>
<body>
    <h1>Html Links</h1>

    <!-- Upon clicking on 'here', the user will be redirected to the Scaler topics page. In this case the page will open in a new tab -->
    <p>Click <a href="https://www.scaler.com/topics/" target="_blank">here</a> to visite Scaler topics website.</p>
</body>
</html>

输出

解释

在上面的示例中，文本“here”充当链接，单击它后，浏览器将打开一个新选项卡（因为我们已将值“_blank”传递给目标属性）以打开 URL https://www.scaler.com/topics/

内部链接

内部链接是放置在同一网站的引用中的 HTML 链接。此链接会将用户导航到同一网站的一部分。

语法：

<a href="address"> Text </a>

内部链接是用相对URL声明的，即地址在链接地址中没有 http://www 部分。

例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html links</title>
</head>
<body>
    <h1>Html Links | Internal links</h1>

    <!-- Upon clicking on the link the user will be redirected to the image of the given URL -->
    <p>Click <a href="htmlLogo.png">here</a> to se the logo of the HTML</p>
</body>
</html>

输出

解释

在上面的例子中，单击此处后，用户将显示图像，如果徽标。在这里，传递给 href 属性的地址值没有 http://www 因为htmlLogo.png位于网页内部。

使用图像作为链接

图像可以用作 HTML 链接。我们可以将文档与图像相关联，这样，在单击它时，用户将被重定向到该文档。

要将图像用作 HTML 链接，我们需要在 <a> 标签中添加一个 <img> 标签。

放置在 <a> 中的图像将表现得类似于包含在锚标记中的文本项，即单击它时，用户将被定向到链接的文档。

语法

<a href="link">
    <img src="pic.jpg">
</a>

例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html links</title>
</head>
<body>
    <h1>Html Links</h1>

    <!-- Upon clicking on the image, the user will be redirected to the scaler website -->
    <a href="https://www.scaler.com/"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTWKU4_SOXBbh1Cbn5losacPNbWLGpeaeNA3A&usqp=CAU"></a>
</body>
</html>

输出

解释

在上面的示例中，单击图像后，用户将被重定向到 url https://www.scaler.com/

为网页创建书签链接

我们可以使用 HTML 链接为页面的特定部分创建书签，这样在单击该链接时，我们将到达该特定部分。

要创建书签链接，我们首先需要创建一个书签（通常使用类选择器、id 选择器）。然后，我们需要将 bookmark 属性（即类名或 id）添加到链接的 href 中。

语法

创建书签：

<div id="#bookmark">
    ...
</div>

创建书签链接：

<a href="#bookmark"> Text </a>

法典

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html links</title>
</head>
<body>
    <h1>Html Links | Bookmark</h1>

    <a href="#sec-2"> Jump to CSS </a>

    <br>
    <div id="sec-1">
        <h3>
            Html:
        </h3>
        <p>
            The HyperText Markup Language, or HTML is the standard markup language for documents designed to be displayed in a web browser.
        </p>
    </div>
    <br>
    <div id="sec-2">
        <h3>
            CSS:
        </h3>
        <p>
            Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language such as HTML.
        </p>
    </div>
</body>
</html>

输出

书签链接-in-html

解释

在上面的示例中，为 href 属性分配了地址 #sec-2。单击“跳转到 CSS”后，用户将被重定向到网页上 ID 为 sec-2 的 div。

按钮作为链接

按钮可以通过三种方法制作 HTML 链接：

onclick 事件：onclick 事件属性可用于在用户单击时将用户定向到链接的文档。onclick 属性位于 <button> 标记内。

语法
```
<button onclick="window.location.href = 'address';">
    Text
</button>
```
onclick 事件属性位于 <button> 标记内，并传递值 window.location.href = 'address'，其中地址具有链接文档的地址。
通过在锚点标签内添加按钮标签：可以通过在 <a> 标签内放置一个按钮来创建按钮链接。该按钮的行为方式与放置在锚标记内的文本相同（即它将在单击时打开链接的文档）。

语法
```
<a href="address">
    <button > Text </button>     
</a>    
```
通过使用表单标记：我们可以通过使用表单标签中的 action 属性来制作按钮链接。该按钮可以放置在表单内部，其行为与放置在锚标记中的文本一样（即它将在单击时打开链接的文档）。

语法
```
<form action="address">
    <button type="submit">
        Click Here
    </button>
</form>    
```
为操作属性分配了链接文档的地址，并且按钮的类型应设置为提交。

例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html links</title>
</head>
<body>
    <h1>Html Links | Button</h1>

    <!-- onclick event -->
    <button onclick="window.location.href = 'https://www.scaler.com/topics/';">
        Button 1
    </button>
    
    <br>

    <!-- By adding button tag inside anchor tag -->
    <a href="https://www.scaler.com/topics/"><button> Button 2 </button></a>

    <br>

    <!-- By using form tag -->
    <form action="https://www.scaler.com/topics/">
        <input type="text" value="name" placeholder="Enter your name">
        <button type="submit">
            Button 3
        </button>
    </form>    
</body>
</html>

输出

解释

单击按钮 1 和按钮 2 后，用户将被重定向到 https://www.scaler.com/topics/ 。由于按钮 3 是表单的提交按钮，因此它不会打开网站，但会将数据提交给 https://www.scaler.com/topics/。（有关表单工作的详细说明，请参阅 HTML 表单文章）。

下载链接

我们可以在单击该链接时创建链接，可以下载文件。

要创建下载链接，我们需要在 <a> 标签中添加 download 属性。

浏览器将自动分配正在下载的文件的正确格式，我们无需提及任何内容。
出于安全原因，仅当内容从同一源/服务器提供时，download 属性才会触发下载。

语法

<a href="address" download> Text </a>

下载可以采用一个值，该值将指定文件的默认名称。尽管传递此值不是强制性的。

例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html links</title>
</head>
<body>
    <h1>Html Links | Download</h1>

    <img src="htmlImage.png" width="400px">
    <br>

<!--     upon clicking this link, the user will be able to download the above image -->
    <a href="htmlImage.png" download="img">Click here to download the above image.</a>
</body>
</html>

输出

解释

在上面的示例中，单击链接后，将下载图像。

:::

支持的浏览器

标签/属性	Chrome	Safari	Internet Explorer	Opera	Firefox
<a>	Yes	Yes	Yes	Yes	Yes
href	Yes	Yes	Yes	Yes	Yes
target	Yes	Yes	Yes	Yes	Yes
download	14.0	10.1	18.0	15.0	20.0

上面的列有浏览器名称，行有标签/属性名称。

YES 表示所有版本的浏览器都支持该标记/属性。

如果提到了浏览器的版本，则表示它是支持该标记/属性所需的浏览器的最低版本。

结论

HTML 链接通过 Web 连接两个资源。
HTML 链接通常使用 anchor 标记进行声明。它们也称为超链接。
HTML 链接中的 target 属性用于更改链接文档的打开位置。
通过向目标属性提供不同的值，可以在新窗口、父窗口、父框架或窗口的整个正文中打开链接文档。
按钮、图像等可以用作链接。
除了切换到不同的资源外，链接还可用于为页面的一部分添加书签、导航到网站的内部部分、下载文件等。