Html 简明教程

HTML - Text Links

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

A webpage can contain various links that take us directly to other web pages or resources and even specific parts of a given page.

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

A hyperlink is a specific type of link that allows users to navigate from one web page or resource to another by clicking on it. You can create hyperlinks using text or images available on a webpage. A hyperlink is specified using HTML tag <a>. This tag is called anchor tag and anything between the opening <a> tag and the closing </a> tag becomes part of the link and a user can click that part to reach the linked document.

Syntax

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

Examples of HTML Text Links

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

Here are few example codes that illustrate the use of text links in HTML.

Create a hyperlink

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

In this example we will create a hyperlink to tutorialspoint website using anchor tag. In the output on clicking Learn tutorial you will be redirected to main page of 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 属性指定了打开链接文档的位置。该属性用于根据需要在新浏览器标签、相同标签或父帧中打开链接文档。

The target attribute of the anchor tag in HTML specifies where to open the linked document. This attribute is used to open linked document in new browser tab, same tab or parent frame depending upon the need.

<!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。

When you link HTML documents related to the same website, it is not required to give a complete URL for every link. You can get rid of it if you use <base> tag in your HTML document header. This tag is used to give a base path for all the links. So your browser will concatenate given relative path to this base path and will make a complete URL.

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

Following example makes use of <base> tag to specify base URL and later we can use relative path to all the links instead of giving complete URL for every link.

<!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”以导航至我们需要的部分。

In the below code we demonstrate the usage of the href attribute to navigate to a different section within the same page. We provide '#idofsection' inside href to navigate section of our need.

<!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 属性来设置链接、活动链接和访问过链接的颜色。

You can set colors of your links, active links and visited links using link, alink and vlink attributes of <body> tag.

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

Save the following in test.htm and open it in any web browser to see how link, alink and vlink attributes work.

<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 属性可以实现这一点。

You can create text link to make your PDF, or DOC or ZIP files downloadable. This is achieved by using download attribute of anchor tag.

<!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>