HTML의 href 태그

HTML href는 하이퍼텍스트 참조로 축약됩니다. 이는 앵커() 태그 내에서 사용할 수 있는 속성입니다. 이 href는 www.google.com, www.gmail.com, www.facebook.com 등과 같은 웹사이트 URL에 사용됩니다.

실시간 예: 우리는 일상생활에서 수많은 웹사이트에 접속했습니다. 우리가 이 웹사이트 URL에 어떻게 접근할지 생각해 본 적이 있나요? href 태그 덕분에 우리는 어떤 웹사이트 URL에도 접근할 수 있습니다. 우리는 href 속성의 큰따옴표(href=”website”) 안에 웹사이트가 필요했습니다.

HTML에서 href 속성은 어떻게 작동하나요?

HTML href 속성은 사용 중인 href 태그에 따라 작동합니다. 사용 가능한 모든 href 태그 목적은 웹 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>

• 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 id="The-area-tag-with-href-attribute-URLs-Example">The <area> tag with href attribute URLs Example</h1>
<img src="/static/imghwm/default1.png" data-src="planets.gif" class="lazy"    style="max-width:90%"  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>

출력:

클릭 후

예 #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  src="/static/imghwm/default1.png" data-src="stickman.gif" class="lazy"    style="max-width:90%"  style="max-width:90%" 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은 웹 URL에 액세스하는 데 사용됩니다. href 속성을 허용하는 태그는 , , 입니다. 및 . 가장 자주 및 태그가 사용됩니다.

추천기사

HTML의 href 태그에 대한 안내입니다. 여기에서는 코드 구현 및 출력과 함께 HTML의 href 태그 소개 및 해당 예제에 대해 설명합니다. 자세한 내용을 알아보려면 추천 기사를 살펴보세요.

1. HTML에서 Span 태그의 상위 15가지 속성
2. HTML에서 div 태그는 어떻게 작동하나요?
3. HTML 검색창 | 예시
4. HTML의 캔버스 태그 | 예시

위 내용은 HTML의 href 태그의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!