HTML href 縮寫(xiě)為超文本引用。這是錨點(diǎn) () 標(biāo)記內(nèi)可用的屬性。此 href 用於 www.google.com、www.gmail.com、www.facebook.com 等網(wǎng)站 URL。

即時(shí)範(fàn)例：日常生活中，我們?cè)煸L了許多網(wǎng)站。您有沒(méi)有想過(guò)我們?nèi)绾卧煸L這個(gè)網(wǎng)站的網(wǎng)址？由於有了href標(biāo)籤，我們可以訪問(wèn)任何網(wǎng)站的URL。我們只需要 href 屬性的雙引號(hào) (href=”website”) 內(nèi)有一個(gè)網(wǎng)站。

href 屬性在 HTML 中如何運(yùn)作？

HTML href 屬性的工作原理取決於我們使用的 href 標(biāo)籤。所有可用的 href 標(biāo)籤的目的都是相同的，用於存取 Web URL，但有一些細(xì)微的差別。

有 4 個(gè)標(biāo)籤允許其中包含 href 屬性。他們是：

1。 ：此標(biāo)籤用於指定連結(jié)必須位於 href 屬性?xún)?nèi)的頁(yè)面的 URL。

文法：

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

2。 ：此標(biāo)籤用於指定連結(jié)必須位於 href 屬性?xún)?nèi)的頁(yè)面的 URL。

文法：

<area href="URL%20link">

?3. ：此標(biāo)籤用於指定連結(jié)必須位於 href 屬性?xún)?nèi)的所有相對(duì)頁(yè) URL 的基本 URL。

文法：

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

?4. ：此標(biāo)籤用於在 href 屬性中指定外部檔案位置，如 styles.css、javascript.js 等。

文法：

<link href="external%20link">

在 HTML 中實(shí)作 href 標(biāo)籤的範(fàn)例

以下是不同的範(fàn)例：

範(fàn)例 #1 – 帶有 href 屬性的標(biāo)籤

代碼：

<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

輸出：

範(fàn)例 #2 – ;帶有 href 屬性的標(biāo)籤

代碼：

<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>
<img src="/static/imghw/default1.png" data-src="planets.gif" class="lazy"    style="max-width:90%"  style="max-width:90%" alt="HTML 中的 href 標(biāo)籤" 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>

輸出：

點(diǎn)擊後

範(fàn)例 #3 – 帶有 href 屬性的標(biāo)籤

代碼：

<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  src="/static/imghw/default1.png" data-src="stickman.gif" class="lazy"    style="max-width:90%"  style="max-width:90%" alt="HTML 中的 href 標(biāo)籤" > 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>

輸出：

範(fàn)例#4 – 帶有 href 屬性的標(biāo)籤

代碼：

<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;
}

輸出：

結(jié)論

hrefin HTML 用於存取 Web URL。允許使用 href 屬性的標(biāo)籤有 、、 等。和。最常見(jiàn)的是和使用標(biāo)籤。

推薦文章

這是 HTML 中 href 標(biāo)籤的指南。在這裡，我們討論 HTML 中 href 標(biāo)籤的簡(jiǎn)介及其範(fàn)例以及程式碼實(shí)作和輸出。您也可以瀏覽我們推薦的文章以了解更多資訊 –

1. HTML 中 Span 標(biāo)籤的前 15 個(gè)屬性
2. div 標(biāo)籤在 HTML 中如何運(yùn)作？
3. HTML 搜尋列 |範(fàn)例
4. HTML 中的畫(huà)布標(biāo)籤 |範(fàn)例

以上是HTML 中的 href 標(biāo)籤的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！