如何在 HTML 中使用绝对 URL 链接页面?

htmlweb developmentfront end technology更新于 2024/6/29 1:16:17

在 HTML 中，不同的 HTML 元素具有包含指向其他资源的链接的属性。这些属性的值就是 URL，可以是绝对 URL，也可以是相对 URL。

绝对 URL 用于链接到网页上的资源，它包含网站地址。
绝对 URL 永远不会改变。
我们也可以使用绝对 URL 链接到网页上同一站点内的资源。

以下链接包含协议和域名(主机名)，使其成为绝对 URL。

<a href="www.Google.com">Link text…</a>

绝对 URL 以文件所在的域名开头。

语法

以下是使用绝对 URL 链接页面的语法。

<a href="absolute URL">Link text…</a>

示例

以下是使用绝对 URL 链接页面的示例程序。


<!DOCTYPE html>
<html>
<head>
</head>
<body>
   <h3>HTML-HyperText Markup Language </h3>
   <a href="https://www.youtube.com/watch?v=qz0aGYrrlhU">HTML tutorial</a>
</body>
</html>

以下是上述示例程序的输出。域名地址是 YouTube，点击链接后会直接跳转到同一网站的不同页面。

示例

以下是使用绝对 URL 链接页面的示例程序。


<!DOCTYPE html>
<html>
<head>
   <title>How to link pages using absolute URL in HTML?</title>
</head>
<body>
   <h2>Click the link below to redirect to instagram login page</h2>
   <a href="https://www.instagram.com/accounts/login/">Instagram login</a>
</body>
</html>

示例

以下是使用绝对 URL 链接页面并使用 CSS 更改超链接样式的示例程序。


<!DOCTYPE html>
<html>
<head>
   <title>How to link pages using absolute URL in HTML?</title>
   <style>
      a:link {
         text-decoration: none;
      }
      a:visited {
         text-decoration: none;
      }
      a:hover {
         text-decoration: underline;
      }
      a:active {
         text-decoration: underline;
      }
   </style>
</head>
<body>
<h2>Click the link below to redirect to facebook login page</h2>
<a href="https://www.facebook.com/login/">facebook login</a>
</body>
</html>