网页可以包含各种链接,这些链接将我们直接带到其他网页或资源,甚至是给定页面的特定部分。
超链接是一种特定类型的链接,允许用户通过单击从一个网页或资源导航到另一个网页或资源。您可以使用网页上可用的文本或图像创建超链接。使用 HTML 标签 <a> 指定超链接。此标记称为锚标记,开头 <a> 标记和结束 </a> 标记之间的任何内容都将成为链接的一部分,用户可以单击该部分以访问链接的文档。
语法
<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>