HTML - href 属性

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

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

语法


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

其中，值可以是任何本地文件位置、图像位置、在线网站 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://www.qikepu.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:info@example.com">
						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：' title 来提及内联 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

在此代码中，我们在链接标签中使用 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;
}

支持的浏览器

浏览器
是否支持	Yes	Yes	Yes	Yes	Yes

本页