Meta Tags

优质

小牛编辑

125浏览

2023-12-01

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

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

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

链接文件

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

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

例子 (Example)

让我们尝试以下链接http://www.xnip.cn的示例 -

<!DOCTYPE html>
<html>
   <head>
      <title>Hyperlink Example</title>
   </head>
   <body>
      <p>Click following link</p>
      <a href = "https://www.xnip.cn" target = "_self">xnip</a>
   </body>
</html>

目标属性

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

Sr.No	选项和说明
1	_blank 在新窗口或选项卡中打开链接的文档。
2	_self 在同一帧中打开链接的文档。
3	_parent 在父框架中打开链接的文档。
4	_top 在窗口的整个正文中打开链接的文档。
5	targetframe 在指定的目标targetframe打开链接的文档。

例子 (Example)

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

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

例子 (Example)

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

<!DOCTYPE html>
<html>
   <head>
      <title>Hyperlink Example</title>
      <base href = "https://www.xnip.cn/">
   </head>
   <body>
      <p>Click following link</p>
      <a href = "/html/index.htm" target = "_blank">HTML Tutorial</a>
   </body>
</html>

链接到页面部分

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

Note - HTML5中不推荐使用name属性。不要使用此属性。请改用id和title属性。

首先使用标记创建指向您希望在网页中访问的地点的链接，如下所示 -

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

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

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

这将生成以下链接，您可以在其中单击生成的链接Go to the Top以访问HTML文本链接教程的顶部。

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

设置链接颜色

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

例子 (Example)

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

<!DOCTYPE html>
<html>
   <head>
      <title>Hyperlink Example</title>
      <base href = "https://www.xnip.cn/">
   </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.xnip.cn/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");
}

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