> 웹 프론트엔드 > HTML 튜토리얼 > HTML의 href 태그

HTML의 href 태그

WBOY
풀어 주다: 2024-09-04 16:32:57
원래의
462명이 탐색했습니다.

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>
로그인 후 복사

출력:

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은 웹 URL에 액세스하는 데 사용됩니다. href 속성을 허용하는 태그는 , , 입니다. 및 . 가장 자주 및 태그가 사용됩니다.

추천기사

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

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

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

원천:php
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿