如何在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>
以下是作为链接显示的图像输出,点击图像将导航到谷歌主页。