HTML 中的 href 標籤

WBOY
發布: 2024-09-04 16:32:57
原創
385 人瀏覽過

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>
登入後複製

輸出:

HTML 中的 href 標籤

範例 #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>
登入後複製

輸出:

HTML 中的 href 標籤

點擊後

HTML 中的 href 標籤

範例 #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>

登入後複製

輸出:

HTML 中的 href 標籤

範例#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;
}
登入後複製

輸出:
HTML 中的 href 標籤

結論

hrefin HTML 用於存取 Web URL。允許使用 href 屬性的標籤有 等。和。最常見的是和使用標籤。

推薦文章

這是 HTML 中 href 標籤的指南。在這裡,我們討論 HTML 中 href 標籤的簡介及其範例以及程式碼實作和輸出。您也可以瀏覽我們推薦的文章以了解更多資訊 –

  1. HTML 中 Span 標籤的前 15 個屬性
  2. div 標籤在 HTML 中如何運作?
  3. HTML 搜尋列 |範例
  4. HTML 中的畫布標籤 |範例

以上是HTML 中的 href 標籤的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!