无涯教程-HTML - Go to the Top函数

无涯教程
73 阅读5分钟

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

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

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

链接文件

A link 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 to the linked document. Following is the simple syntax to use <a> tag.

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

例

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

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

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

目标属性

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

Sr.No Option & Description
1

_blank b>

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

_self b>

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

_parent b>

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

_top b>

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

目标框架 b>

在名为 targetframe i>的链接中打开链接的文档。

例

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

<!DOCTYPE html>
<html>

   <head>
      <title>Hyperlink 例</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>

这将产生以下结果，您可以单击不同的链接来了解为目标属性指定的各种选项之间的区别。

基本路径的使用

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.

例

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 例</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教程 b>链接以转到HTML教程。

Now given URL <a href = "/html/index.htm" is being considered as <ahref = "http://www.tutorialspoint.com/html/index.htm"

链接到页面部分

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

注意 b>-HTML5中不推荐使用的 name i>属性。不要使用此属性。请改用 id i>和 title i>属性。

First create a link to the place where you want to reach with-in a webpage and name it using <a...> tag as follows −

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

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

<a href = "/article-html/html_text_links#top">Go to the Top</a>

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

Go to the Top

设置链接颜色

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 b>， alink b>和 vlink b>属性的工作方式。

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

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

文件下载对话框

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

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

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

注意 b>-有关PERL CGI程序的更多详细信息，请阅读教程PERL和CGI。

参考链接

www.learnfk.com/html/html-t…

avatar
文章
阅读
粉丝