HTML - 文本链接

网页可以包含各种链接，可将您直接带到其他页面甚至给定页面的特定部分。这些链接称为超链接。

超链接允许访问者通过单击单词、短语和图像在网站之间导航。因此，您可以使用网页上可用的文本或图像创建超链接。

注意- 我建议您阅读有关了解 URL 的简短教程

链接文档

使用 HTML 标签 <a> 指定链接。此标记称为锚标记，开始 <a> 标记和结束 </a> 标记之间的任何内容都将成为链接的一部分，用户可以单击该部分来访问链接的文档。以下是使用 <a> 标记的简单语法。

<a href = "Document URL" ... attributes-list>Link Text</a>

例子

让我们尝试以下示例，该示例在您的页面上链接 http://www.tutorialspoint.com -

现场演示 
<!DOCTYPE html>
<html>
   
   <head>
      <title>Hyperlink Example</title>
   </head>
	
   <body>
      <p>Click following link</p>
      <a href = "https://www.tutorialspoint.com" target = "_self">Tutorials Point</a>
   </body>
	
</html>

这将产生以下结果，您可以单击生成的链接到达Tutorials Point 的主页（在本例中）。

目标属性

我们在前面的示例中使用了target属性。该属性用于指定链接文档的打开位置。以下是可能的选项 -

先生编号 选项和说明
1

_空白的

在新窗口或选项卡中打开链接的文档。
2

_自己

在同一框架中打开链接文档。
3

_parent

在父框架中打开链接文档。
4

_顶部

在整个窗口中打开链接文档。
5

目标框架

在命名的targetframe中打开链接文档。

例子

尝试以下示例来了解为目标属性给出的几个选项的基本差异。

现场演示 
<!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>

这将产生以下结果，您可以在其中单击不同的链接来了解为目标属性提供的各种选项之间的差异。

基本路径的使用

当您链接与同一网站相关的 HTML 文档时，不需要为每个链接提供完整的 URL。如果您在 HTML 文档标头中使用<base>标记，则可以摆脱它。该标签用于为所有链接提供基本路径。因此，您的浏览器会将给定的相对路径连接到该基本路径，并生成一个完整的 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>

这将产生以下结果，您可以在其中单击生成的HTML 教程的链接来访问 HTML 教程。

现在给定的 URL <a href = "/html/index.htm" 被视为 <ahref = "http://www.tutorialspoint.com/html/index.htm"

链接到页面部分

您可以使用名称属性创建指向给定网页的特定部分的链接。这是一个两步过程。

注意- HTML5 中不推荐使用name属性。不要使用该属性。请改用id和title属性。

首先在网页中创建一个指向您想要到达的位置的链接，并使用 <a...> 标签对其进行命名，如下所示 -

<h1>HTML Text Links <a name = "top"></a></h1>

第二步是创建一个超链接来链接文档和您想要到达的位置 -

<a href = "/html/html_text_links.htm#top">Go to the Top</a>

这将生成以下链接，您可以在其中单击生成的链接“转到顶部”以到达 HTML 文本链接教程的顶部。

Go to the Top

设置链接颜色

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

例子

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

现场演示 
<!DOCTYPE html>
<html>
   
   <head>
      <title>Hyperlink Example</title>
      <base href = "https://www.tutorialspoint.com/">
   </head>
	
   <body alink = "#54A250" link = "#040404" vlink = "#F40633">
      <p>Click following link</p>
      <a href = "/html/index.htm" target = "_blank" >HTML Tutorial</a>
   </body>
   
</html>

这将产生以下结果。只需在单击链接之前检查链接的颜色，然后在激活链接和访问链接时检查其颜色。

下载链接

您可以创建文本链接以使您的 PDF、DOC 或 ZIP 文件可供下载。这很简单；您只需提供可下载文件的完整 URL，如下所示 -

现场演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Hyperlink Example</title>
   </head>
	
   <body>
      <a href = "https://www.tutorialspoint.com/page.pdf">Download PDF File</a>
   </body>
	
</html>

这将产生以下链接并将用于下载文件。

文件下载对话框

有时，您希望提供一个选项，用户单击链接，它会向用户弹出“文件下载”框，而不是显示实际内容。这非常简单，可以使用 HTTP 响应中的 HTTP 标头来实现。

例如，如果您想要从给定链接下载Filename文件，则其语法如下。

#!/usr/bin/perl

# Additional HTTP Header
print "Content-Type:application/octet-stream; name = \"FileName\"\r\n";
print "Content-Disposition:attachment; filename = \"FileName\"\r\n\n";

# Open the target file and list down its content as follows
open( FILE, "<FileName" );

while(read(FILE, $buffer, 100)){
   print("$buffer");
}

注- 有关 PERL CGI 程序的更多详细信息，请参阅教程PERL 和 CGI ​​。