HTML - 文本链接

原创

admin 4个月前 (08-07) 阅读数 18 #HTML

HTML - 文本链接

HTML链接（超链接）是具有指向另一个页面链接的单词或按钮，当用户点击时会将用户带到该链接页面。

HTML超链接

超链接是一种特殊类型的链接，允许用户通过点击它从一个网页或资源导航到另一个。您可以使用网页上的文本或图像创建超链接。超链接是使用HTML锚标记（<a>）创建的。

锚标记(<a>)

锚标记，或称为<a>标记，是一个创建两个页面之间超链接的基本元素。任何写在开始<a>和结束</a>标记之间的内容都会变成可点击的，当有人点击它时，链接的页面将被打开。

语法

以下是在HTML中创建超链接的语法：

<a href="URL" target="_target_type">链接文本</a>

有关创建URL的更多信息，我们建议阅读本章：理解URL

创建超链接（链接网页/文档）

您可以通过将特定单词、图像或任何HTML元素超链接化来链接其他网页或文档。

如上所述，您可以使用带有href属性的HTML <a>标记创建超链接。href属性指定要链接的页面/文档。

语法

<a href="URL" ... 属性列表>链接文本</a>

示例

在此示例中，我们创建一个简单的HTML文档，演示如何使用超链接：

<!DOCTYPE html>
<html>
<head>
   <title>超链接示例</title>
</head>
<body>
   <p>点击以下链接</p>
   <a href="https://www.tutorialspoint.com/" target="_self">教程点</a>
</body>
</html>

执行上述示例后，将显示一个链接。您可以点击生成的链接访问教程点的主页。

"target"属性

target属性指定链接文档打开的位置。以下是target属性的可能值：

序号	选项 & 描述
1	`_blank` 在新窗口或选项卡中打开链接的文档。
2	`_self` 在同一框架中打开链接的文档。
3	`_parent` 在父框架中打开链接的文档。
4	`_top` 在窗口的完整主体中打开链接的文档。
5	`targetframe` 在命名的目标框架中打开链接的文档。

示例

尝试以下示例以了解target属性提供的几个选项之间的基本区别。

<!DOCTYPE html>
<html>
<head>
   <title>超链接示例</title>
   <base href="https://www.tutorialspoint.com/">
</head>
<body>
   <p>点击以下任何链接</p>
   <a href="/html/index.htm" target="_blank">在新窗口打开</a> | <a href="/html/index.htm" target="_self">在自身打开</a> | <a href="/html/index.htm" target="_parent">在父级打开</a> | <a href="/html/index.htm" target="_top">在主体打开</a>
</body>
</html>

这将产生以下结果，您可以点击不同的链接来了解target属性提供的各种选项之间的区别。

超链接中的基础路径使用

当您链接同一网站相关的HTML文档时，不需要为每个链接提供完整的URL。如果您在HTML文档头部使用<base>标记，可以省略它。此标记用于为所有链接提供基础路径。因此，您的浏览器会将给定的相对路径连接到此基础路径，并形成一个完整的URL。

示例

以下示例使用<base>标记指定基础URL，之后我们可以使用相对路径链接所有链接，而不必为每个链接提供完整的URL：

<!DOCTYPE html>
<html>
<head>
   <title>超链接示例</title>
   <base href="https://www.tutorialspoint.com/">
</head>
<body>
   <p>点击以下链接</p>
   <a href="/html/index.htm" target="_blank">HTML教程</a>
</body>
</html>

这将产生以下结果，您可以点击生成的HTML教程链接访问HTML教程。

链接到页面部分

链接到同一页面的某个部分允许用户直接导航到该部分。您可以通过使用带有#id值的href属性在同一页面中创建指向特定部分的链接，其中#id目标是页面上具有相应id属性的元素。

示例

在下面的代码中，我们演示了使用href属性在同一页面内导航到不同部分的用法。我们在href中提供#idofsection来导航我们需要的部分：

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        div {
            height: 900px;
        }
    </style>
</head>

<body>
   <h2>教育科技</h2>
   <div> 
      <p>
         教程点：简单易学
      </p>
      <a href="#about">了解更多</a>
   </div>
   <h2 id="about">第2部分</h2>
   <div> 
   <p>
      教程点是一个在线学习平台
      提供免费教程、付费高级课程
      和电子书。学习最新技术
      和编程语言SQL、MySQL、Python、C、
      C++、Java、Python、PHP、机器学习、数据
      科学、人工智能、提示工程等。
   </p>
   </div>
</body>

</html>

样式化超链接（设置链接颜色）

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

示例

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

<html>
<head>
   <title>超链接示例</title>
   <base href="https://www.tutorialspoint.com/">
</head>
<body alink="#54A250" link="#040404" vlink="#F40633">
   <p>点击以下链接</p>
   <a href="/html/index.htm" target="_blank">HTML教程</a>
</body>
</html>

这将产生以下结果。只需点击前检查链接的颜色，然后激活时检查其颜色，以及链接已被访问时的颜色。

可下载链接

HTML允许您创建可下载链接，您可以创建链接使您的PDF、DOC或ZIP文件可下载。要创建任何可下载链接，您可以在<a>标记中使用download属性，并在href属性中指定可下载的文件路径。

示例

以下示例演示了如何在HTML中创建可下载链接：

<!DOCTYPE html>
<html>
<head>
   <title>可下载链接示例</title>
</head>
<body>
   <a href="/html/src/sample.txt" download>下载文件</a>
</body>
</html>

自定义文件名

您还可以为下载的文件指定文件名。要为文件提供自定义文件名，您需要将其提供给download属性。

这是一个示例：

<a href="/html/src/sample.txt" download="自定义报告.txt">下载文件</a>

文件下载对话框

您还可以允许HTML在开始下载之前打开文件下载对话框，以便用户可以选择下载文件的位置。您可以通过在HTTP响应中使用HTTP标头来实现这一点。

例如，如果您想使filename文件从给定链接可下载，则其语法如下。

语法

#!/usr/bin/perl
# 额外的HTTP标头
print "Content-Type:application/octet-stream; name=\"FileName\"\r\n";
print "Content-Disposition: attachment; filename=\"FileName\"\r\n\n";
# 打开目标文件并按如下方式列出其内容
open( FILE, "

注意：有关PERL CGI程序的更多详细信息，请阅读教程PERL和CGI。
								
					版权声明
本文仅代表作者观点，不代表本站立场。
本文系作者授权本站发表，未经许可，不得转载。

上一篇： HTML的历史与演变下一篇： 2025年全面了解HTML编辑器