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

htmlweb developmentfront end technology更新于 2025/2/23 20:28:17

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

我们可以将页面链接添加到网页。HTML 链接是超链接。<a> 标签定义超链接，用于从一个页面链接到另一个页面。href 属性与 <a> 标签一起使用，指示链接的目标。

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

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

未访问的链接带有下划线且为蓝色
已访问的链接带有下划线且为紫色
活动链接带有下划线且为红色

语法

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

<a href="https://www.Google.com/">链接文本 </a>

示例

以下示例程序用于在网页文档中创建页面链接。


<!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>

以下是未访问链接的输出。点击该链接后，会跳转到谷歌搜索引擎的主页。因此，该链接将被访问，并显示为带下划线和紫色。

示例

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


<!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://www.cainiaomax.com/index.htm">TUTORIALSPOINT</a>
</body>
</html>

点击链接后，系统会将您重定向到目标页面。点击链接后，系统会将您导航到 tutorialspoint 网页的主页。

使用图片作为超链接

我们可以将图片添加为链接，也可以将其他 HTML 元素添加为链接。

语法

以下是在网页上将图片添加为链接的语法。

<a href="链接地址"><img src="图片目标"></a>

示例

以下是将图片创建为链接的示例程序。


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