概述
本文介绍 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>
输出
解释
在上面的示例中，为 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 属性用于更改链接文档的打开位置。
- 通过向目标属性提供不同的值，可以在新窗口、父窗口、父框架或窗口的整个正文中打开链接文档。
- 按钮、图像等可以用作链接。
- 除了切换到不同的资源外，链接还可用于为页面的一部分添加书签、导航到网站的内部部分、下载文件等。
1179
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
