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

在 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 链接页面的示例程序。

Open Compiler
<!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，当我们点击链接时，它会直接将我们导航到同一网站的不同页面。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

示例

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

Open Compiler
<!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 更改了超链接的样式。

Open Compiler
<!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://#/login/">facebook login</a>
</body>
</html>

更新于：2022年11月11日

3K+ 次浏览

启动你的 职业生涯

完成课程获得认证

开始学习
广告