HTML 中的 href 标签

HTML href 缩写为超文本引用。这是锚点 () 标记内可用的属性。此 href 用于 www.google.com、www.gmail.com、www.facebook.com 等网站 URL。

实时示例：日常生活中，我们访问了很多网站。您有没有想过我们如何访问这个网站的网址？由于有了href标签，我们可以访问任何网站的URL。我们只需要 href 属性的双引号 (href=”website”) 内有一个网站。

href 属性在 HTML 中如何工作？

HTML href 属性的工作原理取决于我们使用的 href 标签。所有可用的 href 标签的目的都是相同的，用于访问 Web URL，但有一些细微的差别。

有 4 个标签允许其中包含 href 属性。他们是：

1。 ：此标签用于指定链接必须位于 href 属性内的页面的 URL。

语法：

<a href="URL%20link"></a>

2。 ：此标签用于指定链接必须位于 href 属性内的页面的 URL。

语法：

<area href="URL%20link">

 3. ：此标签用于指定链接必须位于 href 属性内的所有相对页面 URL 的基本 URL。

语法：

<base href="Base%20URL%20link">

 4. ：此标签用于在 href 属性中指定外部文件位置，如 styles.css、javascript.js 等。

语法：

<link href="external%20link">

在 HTML 中实现 href 标签的示例

以下是不同的示例：

示例 #1 – 带有 href 属性的标签

代码：

<title>href attribute</title>

<!--CSS code-->
<style>
p
{
color: green;
border: 2px solid brown;
font-size: 22px;
}
h1
{
color: blue;
text-align: center;
}
</style>


<h1>The <a> tag with href attribute introduction</a>
</h1>
<p>HTML href is abbreviated as hypertext reference. This is the attribute which is available inside the anchor (<a>) tag. This href is used for website URLs like www.google.com, www.gmail.com, www.facebook.com etc.</a></p>
<p>Real time Example: Day to day life we have accessed so many websites. Have you ever think about how would we access this website URLs? Because of href tag we can access any website URLs. We simply required website within this double quotes (href="website") of href attribute.
</p>
<h1>The <a> tag with href attribute URLs</a>
</h1>

• Duplicate Checker
• EDUCBA
• Google
• Gmail

输出：

示例 #2 – ;带有 href 属性的标签

代码：

<title>href attribute</title>

<!--CSS code-->
<style>
p
{
color: fuchsia;
border: 2px solid orange;
font-size: 22px;
}
h1
{
color: red;
text-align: center;
}
</style>


<h1>The <a> tag with href attribute introduction</a>
</h1>
<p>HTML href is abbreviated as hypertext reference. This is the attribute which is available inside the anchor (<a>) tag. This href is used for website URLs like www.google.com, www.gmail.com, www.facebook.com etc.</a></p>
<p>Real time Example: Day to day life we have accessed so many websites. Have you ever think about how would we access this website URLs? Because of href tag we can access any website URLs. We simply required website within this double quotes (href="website") of href attribute.
</p>
<h1>The <area> tag with href attribute URLs Example</h1>
<imgsrc width="150"    style="max-width:90%" alt="HTML 中的 href 标签" usemap="#educba">
<map name="educba">
<!--Click on this coordinate gives you that images-->
<area shape="rect" coords="0,0,81,125" href="sun.htm">
<area shape="circle" coords="91,59,4" href="mercur.htm">
<area shape="circle" coords="125,59,9" href="venus.htm">

</map></imgsrc>

输出：

点击后

示例 #3 – 带有 href 属性的标签

代码：

<title>href attribute</title>

<!--From this path image is loaded-->
<base href="https://www.w3schools.com/images/">
<!--CSS code-->
<style>
p
{
color: navy;
border: 2px solid blue;
font-size: 22px;
}
h1
{
color: fuchsia;
text-align: center;
}
</style>


<h1>The <a> tag with href attribute introduction</a>
</h1>
<p><img     style="max-width:90%"  style="max-width:90%" src="stickman.gif" alt="HTML 中的 href 标签" > HTML href is abbreviated as hypertext reference. This is the attribute which is available inside the anchor (<a>) tag. This href is used for website URLs like www.google.com, www.gmail.com, www.facebook.com etc.</a></p>
<p>Real time Example: Day to day life we have accessed so many websites. Have you ever think about how would we access this website URLs? Because of href tag we can access any website URLs. We simply required website within this double quotes (href="website") of href attribute.
</p>

输出：

示例#4 – 带有 href 属性的标签

代码：

<title>href attribute</title>

<!--Including external CSS styles file with link tag-->
<link rel="stylesheet" type="text/css" href="styles.css">


<h1>The <a> tag with href attribute introduction</a>
</h1>
<p>HTML href is abbreviated as hypertext reference. This is the attribute which is available inside the anchor (<a>) tag. This href is used for website URLs like www.google.com, www.gmail.com, www.facebook.com etc.</a></p>
<p>Real time Example: Day to day life we have accessed so many websites. Have you ever think about how would we access this website URLs? Because of href tag we can access any website URLs. We simply required website within this double quotes (href="website") of href attribute.
</p>

CSS 代码：styles.css

p
{
color: red;
border: 2px solid green;
font-size: 22px;
}
h1
{
color: orange;
text-align: center;
}

输出：

结论

hrefin HTML 用于访问 Web URL。允许使用 href 属性的标签有 、、 等。和。最常见的是和使用标签。

推荐文章

这是 HTML 中 href 标签的指南。在这里，我们讨论 HTML 中 href 标签的简介及其示例以及代码实现和输出。您还可以浏览我们推荐的文章以了解更多信息 –

1. HTML 中 Span 标签的前 15 个属性
2. div 标签在 HTML 中如何工作？
3. HTML 搜索栏 |示例
4. HTML 中的画布标签 |示例

以上是HTML 中的 href 标签的详细内容。更多信息请关注PHP中文网其他相关文章！