HTML 中的 Href 标签

2025年1月11日 | 阅读 3 分钟

href 属性是什么？

在 HTML 中，借助锚标签（<a> 标签），我们可以在一个地址和另一个地址之间创建超链接。为了实现 <a> 标签的功能，<a> 标签内部必须存在 href 属性。href 标签的主要目的是指示超链接的目标地址。没有 href 属性，<a> 标签无法工作。

为了更好地理解，请看下面的代码片段。

<a href="https://tpointtech.cn/" rel="noopener" target="_blank" >homepage of javaTpoint</a>

在上面的代码片段中，有几点我们必须注意。这些如下：

目标链接位于 <a> 标签内部。用户选择标签之间的所有文本，我们可以为这些文本提供样式。
href 属性和所有其他重要属性必须放在 <a> 标签的开标签内部。
href 属性的值，它位于双引号内，是一个 URL，用于指示超链接的目标地址。

在上面的代码片段中，附加属性 target= "_blank" 和 rel= "noopener"。这意味着链接将在浏览器的新标签页中打开。与 href 属性相比，这些属性不是必需的。

Href 值有哪些？

我们总是看到 href 属性中的链接在同一个或不同的浏览器标签页中打开。我们也可以借助 href 属性做不同的事情。借助 href 属性，我们可以链接同一网页的不同部分或提供除 HTTPS 之外的协议。让我们通过一些示例来理解其他可能的值。

绝对 URL

借助此值，我们可以在当前网页上定位不同的域名。让我们通过以下示例来理解这一点。

示例 1

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
 <h2>How to link pages using absolute URL in HTML?</h2>
 <h4>Click the link below to redirect to the official website of javaTpoint</h4>
 <a href="https://tpointtech.cn/">javaTpoint</a>
</body>
</html>

输出

相对 URL

借助此值，我们可以设置同一网页上引用文件的路径。

示例 2

注册页面代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
 <h2>Relative link</h2>
  <h3>Sign Up Page</h3>
  <form>
   <label for="fname">Name</label><br>
   <input type="text" id="fname" name="fname" ><br>
   <label for="email">Email</label><br>
   <input type="text" id="email" name="email" ><br>
   <label for="fname">Password</label><br>
   <input type="text" id="fname" name="fname" ><br>
   <label for="lname"> Re-enter Password</label><br>
   <input type="text" id="lname" name="lname" ><br><br>
   <input type="submit" value="Submit"> <a href="./b.html">Login</a>
  </form>
</body>
</html>

登录页面代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
 <h2>Relative link</h2>
  <h3>Sign In Page</h3>
  <form>
   <label for="fname">Email Address</label><br>
   <input type="text" id="fname" name="fname" ><br>
   <label for="lname">Password</label><br>
   <input type="text" id="lname" name="lname" ><br><br>
   <input type="submit" value="Login"> <a href="./a.html">Sign Up</a>
  </form>
</body>
</html>

输出

当用户点击登录时，将打开以下页面。

相对路径不包含 HTTPs 协议或域名。当路径中没有 URL 时，浏览器认为它是指定文件的路径。

我们称此路径为相对路径，因为目标链接是相对于当前网页定义的。

URI 片段

URI 片段是当前网页的不同部分。它以符号 "#" 开头，然后包含所需的页面元素。我们还可以为 HTML 代码的任何部分编写锚标签。

附加协议

相对路径和绝对路径使用 HTTP 或 HTTPS 协议。我们还可以使用 href 属性的其他协议，例如 mailto: 和 file:。让我们通过下面的示例来理解这一点。

示例 3

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
 <h2>Welcome to javaTpoint</h2>
 <h4>Click the below mail to send the feedback.
  <a href="mailto:feedback@javatpoint.com">Send Email</a>
 </h4>
</body>
</html>

输出

说明

在上面的代码中，当用户点击发送邮件时，邮件应用程序将自动打开。

下一主题HTML 美化工具

HTML 中的 Href 标签

href 属性是什么？

Href 值有哪些？

绝对 URL

示例 1

相对 URL

示例 2

URI 片段

附加协议

示例 3

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

HTML 教程

HTML 属性

HTML 标签列表

HTML5 高级

HTML API

HTML 颜色名称

HTML 杂项

选择题

面试题

HTML 中的 Href 标签

href 属性是什么？

Href 值有哪些？

绝对 URL

示例 1

相对 URL

示例 2

URI 片段

附加协议

示例 3

相关帖子

HTML 日期选择器

HTML 隐藏元素

HTML 符号代码

HTML 按钮 disabled

HTML 和 CSS 着陆页

HTML Alt 标签

HTML 压缩器

HTML 创建器

在 HTML 中打开链接的新标签页

如何在 HTML 中添加线条

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器