HTML - 文本链接

网页可以包含各种链接，这些链接将我们直接带到其他网页或资源，甚至是给定页面的特定部分。

超链接是一种特定类型的链接，允许用户通过单击从一个网页或资源导航到另一个网页或资源。您可以使用网页上可用的文本或图像创建超链接。使用 HTML 标签 <a> 指定超链接。此标记称为锚标记，开头 <a> 标记和结束 </a> 标记之间的任何内容都将成为链接的一部分，用户可以单击该部分以访问链接的文档。

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

语法


<a href="Document URL">Text</a>

HTML 文本链接示例

以下是一些示例代码，用于说明在 HTML 中使用文本链接。

创建超链接

在此示例中，我们将使用锚标记创建指向 qikepu网站的超链接。在输出中，单击“学习教程”，您将被重定向到 启科普 的主页。


<!DOCTYPE html>
<html>

<head>
	 <title>Hyperlink Example</title>
</head>

<body>
	 <p>Click following link</p>
	 <a href="https://www.qikepu.com/" 
			target="_blank">
				 Learn 启科普
	 </a>
</body>

</html>

anchor Tag 的目标属性

HTML 中锚点标记的 target 属性指定在何处打开链接的文档。此属性用于根据需要在新的浏览器选项卡、同一选项卡或父框架中打开链接的文档。


<!DOCTYPE html>
<html>

<head>
	 <title>Hyperlink Example</title>
	 <base href="https://www.qikepu.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> 标签，则可以删除它。此标记用于为所有链接提供基本路径。因此，您的浏览器会将给定的相对路径连接到此基本路径，并创建一个完整的 URL。

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


<!DOCTYPE html>
<html>

<head>
	 <title>Hyperlink Example</title>
	 <base href="https://www.qikepu.com/">
</head>

<body>
	 <p>Click following link</p>
	 <a href="/html/index.htm" target="_blank">
				 HTML Qikepu
	 </a>
</body>

</html>

链接到页面部分

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


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

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

<body>
	 <h2>Ed-Tech</h2>
	 <div> 
			<p>
				 qikepu: Simply Easy Learning
			</p>
			<a href="#about">Know More</a>
	 </div>
	 <h2 id="about">Section 2</h2>
	 <div> 
	 <p>
			Qikepu Com是一个在线学习平台，提供免费的课程，以及电子书。
           了解最新技术和编程语言SQL、MySQL、Python、CC++、
            Java、Python、PHP、机器学习、数据科学、人工智能、快速工程等。
	 </p>
	 </div>
</body>

</html>

设置链接文本颜色

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

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


<html>

<head>
	 <title>Hyperlink Example</title>
	 <base href="https://www.qikepu.com/">
</head>
<body alink="red" link="green" vlink="black">
	 <p>Click following link</p>
	 <a href="/html/index.htm" target="_blank">
				 HTML Qikepu 
	 </a>
</body>

</html>

HTML 可下载链接

您可以创建文本链接以使您的 PDF、DOC 或 ZIP 文件可下载。这是通过使用 anchor 标签的 download 属性来实现的。


<!DOCTYPE html>
<html>

<head>
	 <title>Hyperlink Example</title>
	 <base href="https://www.qikepu.com/">
</head>

<body>
	 <a href="/html/src/sample.txt">
			View File
	 </a>
	 <br><br>
	 <a href="/html/src/sample.txt" download>
			download File
	 </a>
</body>

</html>

打印本页