HTML - 文本链接

一个网页可以包含各种链接，这些链接可以直接将我们带到其他网页或资源，甚至可以带到给定页面的特定部分。

超链接是一种特殊的链接，允许用户通过点击它从一个网页或资源导航到另一个网页或资源。您可以使用网页上提供的文本或图像创建超链接。超链接使用 HTML 标签 <a> 指定。此标签称为 **锚点标签**，起始 <a> 标签和结束 </a> 标签之间的任何内容都将成为链接的一部分，用户可以点击该部分以到达链接的文档。

我们建议您学习一下关于理解 URL 的简短教程。

语法

<a href="Document URL">Text</a>

HTML 文本链接示例

以下是一些说明如何在 HTML 中使用文本链接的示例代码。

创建超链接

在这个例子中，我们将使用锚点标签创建一个到 tutorialspoint 网站的超链接。在输出中，点击“学习教程”后，您将被重定向到 Tutorialspoint 的主页。

<!DOCTYPE html>
<html>

<head>
   <title>Hyperlink Example</title>
</head>

<body>
   <p>Click following link</p>
   <a href="https://tutorialspoint.com/" 
      target="_blank">
         Learn Tutorials
   </a>
</body>

</html>

锚点标签的 target 属性

HTML 中锚点标签的 target 属性指定在何处打开链接的文档。此属性用于根据需要在新浏览器标签页、同一标签页或父框架中打开链接的文档。

<!DOCTYPE html>
<html>

<head>
   <title>Hyperlink Example</title>
   <base href="https://tutorialspoint.com/">
</head>

<body>
   <p>Click any of the following links</p>
   <a href="/html/index.htm" target="_blank">
            Opens in New
   </a> | 
   <a href="/html/index.htm" target="_self">
            Opens in Self
   </a> | 
   <a href="/html/index.htm" target="_parent">
            Opens in Parent
   </a> | 
   <a href="/html/index.htm" target="_top">
            Opens in Body
   </a>
</body>

</html>

基本路径的使用

当您链接同一个网站的相关 HTML 文档时，不需要为每个链接都提供完整的 URL。如果您在 HTML 文档的头部使用 **<base>** 标签，就可以避免这种情况。此标签用于为所有链接提供一个基本路径。因此，您的浏览器会将给定的相对路径与基本路径连接起来，从而形成一个完整的 URL。

下面的示例使用 <base> 标签来指定基本 URL，之后我们可以对所有链接使用相对路径，而不是为每个链接提供完整的 URL。

<!DOCTYPE html>
<html>

<head>
   <title>Hyperlink Example</title>
   <base href="https://tutorialspoint.com/">
</head>

<body>
   <p>Click following link</p>
   <a href="/html/index.htm" target="_blank">
         HTML Tutorial
   </a>
</body>

</html>

链接到页面部分

在下面的代码中，我们演示了如何使用 href 属性导航到同一页面中的不同部分。我们在 href 中提供 '#idofsection' 来导航到我们需要的部分。

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

<head>
    <style>
        div {
            height: 900px;
        }
    </style>
</head>

<body>
   <h2>Ed-Tech</h2>
   <div> 
      <p>
         Tutorialspoint: Simply Easy Learning
      </p>
      <a href="#about">Know More</a>
   </div>
   <h2 id="about">Section 2</h2>
   <div> 
   <p>
      Tutorials Point is an online learning platform
      providing free tutorials, paid premium courses,
      and eBooks. Learn the latest technologies and 
      programming languages SQL, MySQL, Python, C, 
      C++, Java, Python, PHP, Machine Learning, data
      science, AI, Prompt Engineering and more.
   </p>
   </div>
</body>

</html>

设置链接文本颜色

您可以使用 <body> 标签的 **link、alink** 和 **vlink** 属性来设置链接、活动链接和已访问链接的颜色。

将以下内容保存到 test.htm 并将其在任何 Web 浏览器中打开，以查看 **link、alink** 和 **vlink** 属性是如何工作的。

<html>

<head>
   <title>Hyperlink Example</title>
   <base href="https://tutorialspoint.com/">
</head>
<body alink="red" link="green" vlink="black">
   <p>Click following link</p>
   <a href="/html/index.htm" target="_blank">
         HTML Tutorial
   </a>
</body>

</html>

HTML 可下载链接

您可以创建文本链接以使您的 PDF、DOC 或 ZIP 文件可下载。这是通过使用锚点标签的 download 属性实现的。

<!DOCTYPE html>
<html>

<head>
   <title>Hyperlink Example</title>
   <base href="https://tutorialspoint.com/">
</head>

<body>
   <a href="/html/src/sample.txt">
      View File
   </a>
   <br><br>
   <a href="/html/src/sample.txt" download>
      download File
   </a>
</body>

</html>

打印页面