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

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

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

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

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

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

  • 未访问过的链接是用下划线和蓝色表示。
  • 已访问过的链接是用下划线和紫色表示。
  • 活动链接是用下划线和红色表示。

语法

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

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

示例1

以下是一个示例程序,用于在Web文档中创建一个页面链接。

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

下面是未访问链接的输出。当我们点击链接时,它将导航到谷歌搜索引擎的首页。因此,链接将被访问并显示为下划线和紫色。

示例2

在下面的示例中,我们将网页文档链接到了deepinout的官方页面。

<!DOCTYPE html>
<html>
<head>
   <title>HTML Links</title>
</head>
<body>
   <h1>Click the link below and navigate the official page of deepinout</h1>
   <a href="https://www.deepinout.com">DEEPINOUT</a>
</body>
</html>

点击链接将会重定向到目标页面。当我们点击链接时,它将导航到deepinout网页的主页。

使用图像作为超链接

我们可以将图像作为链接,以及其他HTML元素作为链接。

语法

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

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

示例

以下是制作图像链接的示例程序。

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

以下是作为链接显示的图像输出,点击图像将导航到谷歌主页。

Camera课程

Python教程

Java教程

Web教程

数据库教程

图形图像教程

办公软件教程

Linux教程

计算机教程

大数据教程

开发工具教程