如何在 HTML 页面中创建页面链接？

链接是从一个网页到另一个网页的连接。

我们可以向网页添加页面链接。 HTML 链接 是超链接。 <a> 标签定义了一个超链接，用于在一个页面之间链接。 href 属性与 <a> 标签一起使用，指示链接的目标地址。

要在 HTML 页面 中创建页面链接，我们需要使用 <a> 和 </a> 标签的 href 属性。请确保 <a></a> 标签放置在 <body>…</body> 标签 内。

链接文本是可见的。单击链接文本将导航到指定的 URL 地址。默认情况下，链接在浏览器网页上显示如下。

  • 未访问的链接带下划线且为蓝色

  • 已访问的链接带下划线且为紫色

  • 活动的链接带下划线且为红色

语法

以下是网页上创建页面链接的语法。

<a href="https://www.Google.com/"> text of the link </a>

示例

以下示例程序演示如何在网页文档中创建页面链接。

Open Compiler
<!DOCTYPE html>
<html>
<body>
   <h1>HTML Article on Links </h1>
   <p><a href="https://www.Google.com/">Click this to navigate to the Google home page</a></p>
</body>
</html>

以下是未访问链接的输出。当我们单击链接时，它会将我们导航到 Google 搜索引擎的主页。因此，链接将被访问并显示为带下划线的紫色。

示例

在下面的示例中，我们在网页文档中链接了 tutorialspoint 的官方页面。

Open Compiler
<!DOCTYPE html>
<html>
<head>
   <title>HTML Links</title>
</head>
<body>
   <h1>Click the link below and navigate the official page of tutorialspoint</h1>
   <a href="https://tutorialspoint.com/index.htm">TUTORIALSPOINT</a>
</body>
</html>

如果我们单击链接，它将重定向到目标页面。当我们单击链接时，它会将我们导航到 tutorialspoint 网页的主页。

使用图像作为超链接

我们可以添加图像作为链接，以及其他 HTML 元素作为链接。

语法

以下是网页上添加图像作为链接的语法。

<a href="link address"><img src="image destination"></a>

示例

以下是如何将图像作为链接的示例程序。

Open Compiler
<!DOCTYPE html>
<html>
<body>
   <h1>HTML Article on Links </h1>
   <p><a href="https://www.Google.com/"><img src="https://tutorialspoint.com/javafx/images/javafx-mini-logo.jpg" style="width:50px;height:50px;"></a></p>
</body>
</html>

以下是图像作为链接的输出，单击图像将导航到 Google 主页。

更新于: 2023-09-01

83K+ 次浏览

启动你的 职业生涯

通过完成课程获得认证

立即开始
广告