HTML - href 属性_HTML 菜鸟教程

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

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

语法


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

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

用法

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

元素	描述
<a>	用于通过链接到网页来附加外部资源。
<link>	指定当前文档与外部资源之间的关系。
<base>	用于指定基本 URL。
<area>	指定图像区域、可以单击的映射或通过超链接链接到的活动区域。

HTML href 属性示例

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

使用 href 属性的 HTML 超链接

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


<!DOCTYPE html>
<html lang="zh-CN">
<body>
	 <h1>HTML href 示例</h1>
	 <p>
			请访问以下网站：
	 </p>
	 <a href="https://www.qikepu.com">
			学习一些教程
	 </a>
</body>

</html>

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

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


<!DOCTYPE html>
<html lang="zh-CN">
<head>
		<title>HTML href mailto示例</title>
</head>

<body>
		<h1>联系我们</h1>
		<p>
				如果您有任何问题，请随时 
				<a href="mailto:info@example.com">
						给我们发电子邮件
				</a>
		</p>
</body>

</html>

可点击的电话号码链接

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


<!DOCTYPE html>
<html lang="zh-CN">
<head>
	 <title>HTML href tel示例</title>
</head>

<body>
	 <h1>联系我们</h1>
	 <p>
			如果您有任何问题，请随时
			联系我们：  
			<a href="tel:+91-9876543210">
						9876543210
			</a>
	 </p>
</body>

</html>

使用 href 属性的内联 JavaScript

下面代码说明了如何利用 href 属性来执行内联 JavaScript 代码。在这里，我们在 href 值内的代码之前使用 javascript: title 来提及内联 javascript 代码。


<!DOCTYPE html>
<html lang="zh-CN">

<body>
		<h3>HTML href 属性</h3>
		<strong>
			使用href属性执行内联JavaScript
		</strong>
		<p>
				单击以下链接执行JavaScript：
				<a href="javascript:document.write('欢迎访问启科普教程！');">
						执行JavaScript
				</a> 
		</p> 
</body>

</html>

使用 href 属性进行页面导航

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


<!DOCTYPE html>
<html lang="zh-CN">

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

<body>
		<h2>Ed-Tech</h2>
		<div> 
				<p>
						启科普教程：简单易学
				</p>
				<a href="#about">了解更多</a>
		</div>
		<h2 id="about">部分 2</h2>
		<div> 
				<p>
					www.qikepu.com是一个在线学习平台
					提供免费教程、付费高级课程，
					以及电子书。了解最新技术和
					编程语言SQL、MySQL、Python、C
					C++、Java、Python、PHP、机器学习、数据
					科学、人工智能、快速工程等。
				</p>
		</div>
</body>
</html>

将样式表导入 HTML

在此代码中，我们在链接标签中使用 herf 属性来将外部 css 样式表导入 HTML 页面。此代码在 IDE 上不起作用，您必须运行此本地服务器。


<!DOCTYPE html>
<html lang="zh-CN">
<head>
			<title>使用链接标签导入CSS</title>
			<!-- 指向外部CSS文件的链接 -->
			<link rel="stylesheet" href="styles.css">
</head>
<body>
			<h1>使用链接标签导入CSS</h1>
</body>
</html>

styles.css


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

支持的浏览器

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

<< HTML - high 属性 HTML - hreflang 属性 >>