HTMLのhrefタグ

WBOY
リリース: 2024-09-04 16:32:57
オリジナル
441 人が閲覧しました

HTML href は、ハイパーテキスト参照と省略されます。これは、アンカー () タグ内で使用できる属性です。この href は、www.google.com、www.gmail.com、www.facebook.com などの Web サイト URL に使用されます。

リアルタイムの例: 私たちは日々、非常に多くの Web サイトにアクセスしています。この Web サイトの URL にどうやってアクセスするか考えたことはありますか? href タグのおかげで、あらゆる Web サイトの URL にアクセスできます。 href 属性のこの二重引用符 (href=”website”) 内に Web サイトが必要だっただけです。

HTML での href 属性はどのように機能しますか?

HTML href 属性は、使用している href タグに基づいて機能します。利用可能なすべての href タグの目的は、Web URL にアクセスする場合と同じですが、わずかな違いがあります。

href 属性を許可するタグが 4 つあります。それらは次のとおりです:

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. HTML で div タグはどのように機能しますか?
  3. HTML 検索バー |例
  4. HTML の Canvas タグ |例

以上がHTMLのhrefタグの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート