HTML – 文本链接

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

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

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

链接文件

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

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

例

让我们尝试以下链接http://www.seo0j.com/的示例 –

<!DOCTYPE html>
<html>
   
   <head>
      <title>Hyperlink Example</title>
   </head>
	
   <body>
      <p>Click following link</p>
      <a href = "http://www.seo0j.com/" target = "_self">Tutorials Point</a>
   </body>
	
</html>

这将产生以下结果，您可以单击生成的链接以访问Tutorials Point的主页（在此示例中）。

目标属性

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

Sr.No	选项和说明
1	_空白在新窗口或选项卡中打开链接的文档。
2	_自在同一帧中打开链接的文档。
3	_parent 在父框架中打开链接的文档。
4	_最佳在窗口的整个正文中打开链接的文档。
五	targetframe 在指定的目标框架中打开链接的文档。

例

尝试以下示例来了解为target属性指定的几个选项的基本差异。

<!DOCTYPE html>
<html>

   <head>
      <title>Hyperlink Example</title>
      <base href = "http://www.seo0j.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 = "http://www.seo0j.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.seo0j.com/html/index.htm”

链接到页面部分

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

注 – 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文本链接教程的顶部。

设置链接颜色

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

例

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

<!DOCTYPE html>
<html>
   
   <head>
      <title>Hyperlink Example</title>
      <base href = "http://www.seo0j.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 = "http://www.seo0j.com/page.pdf">Download PDF File</a>
   </body>
	
</html>

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

文件下载对话框

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

例如，如果要从给定链接下载文件名文件，则其语法如下所示。

#!/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");
}