Html 简明教程

HTML - Text Links

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

超链接是一种特定的链接类型，允许用户通过点击它从一个网页或资源导航到另一个网页或资源。你可以使用网页上可用的文本或图片创建超链接。通过 HTML 标签 <a> 指定超链接。该标签称为 anchor tag ，任何位于 <a> 开头标签和 </a> 结尾标签之间的内容都成为链接的一部分，用户可以点击此部分以打开链接文档。

Syntax

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

Examples of HTML Text Links

这里有一些示例代码，解释了在 HTML 中使用文本链接。

Create a hyperlink

在这个示例中，我们将使用锚标签创建一个到 tutorialspoint 网站的超链接。当点击“Learn tutorial”时，输出将使你重定向到 Tutorialspoint 的主页。

<!DOCTYPE html>
<html>

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

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

</html>

Target attribute of anchor Tag

HTML 中锚标签的 target 属性指定了打开链接文档的位置。该属性用于根据需要在新浏览器标签、相同标签或父帧中打开链接文档。

<!DOCTYPE html>
<html>

<head>
   <title>Hyperlink Example</title>
   <base href="https://www.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>

Use of Base Path

当你链接到同一网站相关的 HTML 文档时，没有必要为每个链接提供一个完整的 URL。如果你在你 HTML 文档头中使用 <base> 标签，你便可以不用提供完整 URL。该标签用于为所有链接提供一个基本路径。这样你的浏览器会将给定的相对路径与其基本路径连接，并将形成一个完整的 URL。

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

<!DOCTYPE html>
<html>

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

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

</html>

Linking to a Page Section

在下面的代码中，我们演示了 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>

Setting Link Text Colors

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

将下面内容保存在 test.htm 中，并在任何 web 浏览器中将其打开以查看 link, alink 和 vlink 属性的运作方式。

<html>

<head>
   <title>Hyperlink Example</title>
   <base href="https://www.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 Downloadable Links

你可以创建文本链接，让 PDF、DOC 或 ZIP 文件可下载。使用锚标记的 download 属性可以实现这一点。

<!DOCTYPE html>
<html>

<head>
   <title>Hyperlink Example</title>
   <base href="https://www.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>