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中文網其他相關文章！