HTML - href 属性

HTML 的 href 属性用于指定超链接指向的网页或资源的 URL。

如果不存在 href 属性，则 <a> 标签将不会被视为超链接，如果我们没有为 href 属性赋值，则用户点击链接时不会发生任何事情。我们可以使用 href = #id_name 或 href = #top 将同一文档中的顶部或任何其他页面部分链接到当前页面。

语法

<a href = "value"></a>

其中，value 可以是任何本地文件位置、图像位置、在线网站 URL、在线图像 URL、任何部分的 #id 等。

应用于

以下列出的元素允许使用 HTML href 属性

元素	描述
<a>	HTML <a> 标签用于使用链接将外部资源附加到网页。
<link>	HTML <link> 标签指定当前文档与外部资源之间的关系。
<base>	HTML <base> 标签用于指定基本 URL。
<area>	HTML <area> 标签指定图像的区域，可以单击或作为超链接链接到的活动区域。

HTML href 属性示例

以下示例将说明 HTML href 属性，以及我们应该在哪里以及如何使用此属性！

使用 href 属性的 HTML 超链接

在以下示例中，我们将使用 <a> 标签的 href 属性创建指向外部资源的超链接。

<!DOCTYPE html>
<html lang="en">
<body>
   <h1>HTML href Attribute</h1>
   <p>
      Visit the following website.
   </p>
   <a href="https://tutorialspoint.com">
      Learn some tutorials
   </a>
</body>

</html>

指向电子邮件地址的可点击链接

在此示例中，我们创建一个链接以将邮件发送到指定的电子邮件。我们使用 href 值内的“mailto:”在电子邮件名称之前来实现此目的。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML href mailto Example</title>
</head>

<body>
    <h1>Contact Us</h1>
    <p>
        If you have any questions, feel free to 
        <a href="mailto:[email protected]">
            send us an email
        </a>
    </p>
</body>

</html>

指向电话号码的可点击链接

在这里，我们创建一个指向指定电话号码的超链接，启用一键通话功能，利用 href 属性的 tel: 值。（在您的移动设备中工作）

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML href tel Example</title>
</head>

<body>
   <h1>Contact Us</h1>
   <p>
      If you have any questions, feel free to
      call us:  
      <a href="tel:+91-9876543210">
            9876543210
      </a>
   </p>
</body>

</html>

使用 href 属性的内联 JavaScript

以下代码说明了使用 href 属性执行内联 JavaScript 代码。在这里，我们在 href 值内代码之前使用“javascript:”标题来提及内联 javascript 代码。

<!DOCTYPE html>
<html lang="en">

<body>
    <h3>HTML href Attribute</h3>
    <strong>
      Execute inline JavaScript using href Attribute
    </strong>
    <p>
        Click the following link to execute JavaScript:
        <a href="javascript:document.write('Welcome to Tutorialspoint!');">
            Execute JavaScript
        </a> 
    </p> 
</body>

</html>

使用 href 属性进行页面导航

在下面的代码中，我们演示了使用 href 属性导航到同一页面内的不同部分。我们在 href 中提供 '#idofsection' 以导航到我们需要的部分。

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        div {
            height: 900px;
        }
    </style>
</head>

<body>
    <h2>Ed-Tech</h2>
    <div> 
        <p>
            Tutorialspoint: Simply Easy Learning
        </p>
        <a href="#about">Know More</a>
    </div>
    <h2 id="about">Section 2</h2>
    <div> 
        <p>
            Tutorials Point is an online learning platform
            providing free tutorials, paid premium courses,
            and eBooks. Learn the latest technologies and 
            programming languages SQL, MySQL, Python, C, 
            C++, Java, Python, PHP, Machine Learning, data
            science, AI, Prompt Engineering and more.
        </p>
    </div>
</body>

</html>

将样式表导入 HTML

在这里，我们在这段代码中使用 link 标签内的 herf 属性将外部 css 样式表导入 HTML 页面。此代码在我们的 IDE 上无法运行，您必须在本地服务器上运行它。

<!DOCTYPE html>
<html lang="en">
<head>
      <title>Import CSS using Link Tag</title>
      <!-- Link to external CSS file -->
      <link rel="stylesheet" href="styles.css">
</head>
<body>
      <h1>Imported CSS using Link Tag</h1>
</body>
</html>

styles.css

body{
   background-color: red;
   font-size: 5px;
}

支持的浏览器

属性
href	是	是	是	是	是

html_attributes_reference.htm

打印页面