HTML - 链接

HTML - 链接 首页 / HTML入门教程 / HTML - 链接

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

链接文件

使用HTML标签<a>指定链接,该标签称为锚标签,开始<a>标签和结束</a>标签之间的所有内容均成为链接的一部分,用户可以单击该部分以到达链接的文档。 以下是使用<a>标签的简单语法。

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

让无涯教程尝试下面的示例,该示例在您的页面上链接http://www.learnfk.com-

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

Target属性

在前面的示例中,使用了 target 属性。此属性用于指定打开链接文档的位置。

Sr.NoOption & Remark
1

_blank

新窗口打开

2

_self

当前窗口打开

3

_parent

在父窗口打开

4

_top

在整个窗口中打开

5

targetframe

在名为 targetframe 的链接中打开

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

<!DOCTYPE html>
<html>

   <head>
      <title>Hyperlink Example</title>
      <base href="https://www.learnfk.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标签,该标签用于为所有链接提供基本路径。

下面的示例使用base标签指定基本URL,稍后无涯教程可以使用所有链接的相对路径,而不是为每个链接提供完整的URL。

<!DOCTYPE html>
<html>

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

这将产生以下输出,您可以单击生成的 HTML教程链接以转到HTML教程。

链接到页面

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

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

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

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

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

<a href="/article-html/html_text_links#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.learnfk.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.learnfk.com/page.pdf" download>Download PDF File</a>
   </body>
	
</html>

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

祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)

技术教程推荐

Java核心技术面试精讲 -〔杨晓峰〕

如何做好一场技术演讲 -〔极客时间〕

深入浅出计算机组成原理 -〔徐文浩〕

图解 Google V8 -〔李兵〕

A/B测试从0到1 -〔张博伟〕

说透数字化转型 -〔付晓岩〕

如何成为学习高手 -〔高冷冷〕

超级访谈:对话汤峥嵘 -〔汤峥嵘〕

林外 · 专利写作第一课 -〔林外〕

好记忆不如烂笔头。留下您的足迹吧 :)