HTML - 文本链接

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

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

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

链接文档

使用HTML标记< a>指定链接.该标签被称为锚标签以及开头< a>之间的任何内容.标签和结束</a>标记成为链接的一部分,用户可以单击该部分以访问链接的文档.以下是使用< a>的简单语法. tag.

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

示例

让我们尝试以下示例链接http://www.it1352.com在您的页面上减去;

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

这将产生以下结果,您可以点击生成的链接以访问Tutorials Point的主页(在此示例中).

The target Attribute

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

Sr.NoOption & Description
1

_blank

Opens the linked document in a new window or tab.

2

_self

Opens the linked document in the same frame.

3

_parent

Opens the linked document in the parent frame.

4

_top

Opens the linked document in the full body of the window.

5

targetframe

Opens the linked document in a named targetframe.

Example

请尝试以下示例,以了解为目标属性提供的几个选项的基本区别。

<!DOCTYPE html>
<html>

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

Example

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

<!DOCTYPE html>
<html>

   <head>
      <title>Hyperlink Example</title>
      <base href = "https://www.IT屋.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.it1352.com / html / index.htm"

Linking to a Page Section

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

注意:name属性在HTML5中已弃用。 不要使用此属性。 请改用id和title属性。

首先在网页中创建指向您想要到达的地方的链接,并使用<a ...>标记将其命名,如下所示:

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

第二步是创建一个超链接以链接文档和您想要到达的地方:

<a href = "https://img01.yuandaxia.cn/Content/img/tutorials/html/html_text_links.htm">Go to the Top</a>

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

Go to the Top


Setting Link Colors

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

Example

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

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

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

Download Links

您可以创建文本链接以下载PDF或DOC或ZIP文件。 这很简单; 您只需要提供可下载文件的完整URL,如下所示:

<!DOCTYPE html>
<html>

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

This will produce following link and will be used to download a file.

文件下载对话框

有时候,您希望提供一个用户点击链接的选项,它会向用户弹出"文件下载"框,而不是显示实际内容.这非常简单,可以使用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");
}

注意 : 有关PERL CGI程序的更多详细信息,请参阅 PERL和CGI 教程.