> 웹 프론트엔드 > HTML 튜토리얼 > HTML 링크에 대한 예제 튜토리얼

HTML 링크에 대한 예제 튜토리얼

零下一度
풀어 주다: 2017-06-24 13:50:48
원래의
1274명이 탐색했습니다.

HTML은 하이퍼링크를 사용하여 웹의 다른 문서에 연결합니다. 링크는 거의 모든 웹페이지에서 찾을 수 있습니다. 한 페이지에서 다른 페이지로 이동하려면 링크를 클릭하세요.



해 보세요 - 예제

HTML 링크
HTML 문서에 링크를 만드는 방법입니다.

(더 많은 예는 이 페이지 하단에서 찾을 수 있습니다.)


HTML 하이퍼링크(링크)

HTML은 태그를 사용하여 하이퍼텍스트 링크를 설정합니다.

하이퍼링크는 단어, 단어, 단어 그룹 또는 이미지일 수 있습니다. 이러한 내용을 클릭하면 새 문서나 현재 문서의 특정 부분으로 이동할 수 있습니다.

웹페이지의 링크 위로 마우스 포인터를 가져가면 화살표가 작은 손 모양으로 변합니다.

href 속성은 링크 주소를 설명하기 위해 태그에 사용됩니다.

기본적으로 링크는 브라우저에 다음과 같이 표시됩니다.

  • 방문하지 않은 링크는 밑줄이 그어진 파란색 글꼴로 표시됩니다.

  • 방문한 링크는 보라색과 밑줄로 표시됩니다.

  • 링크를 클릭하면 빨간색 밑줄이 그어져 나타납니다.

참고: 이러한 하이퍼링크에 CSS 스타일이 설정된 경우 표시 스타일은 CSS 설정에 따라 표시됩니다.


HTML 링크 구문

링크의 HTML 코드는 매우 간단합니다. 다음과 같습니다:

href 속성은 링크의 대상을 설명합니다. .

Example

위의 코드 줄은 다음과 같이 표시됩니다:: Noob 튜토리얼 방문

이 하이퍼링크를 클릭하면 사용자는 Rookie Tutorial의 홈 페이지로 이동합니다.

팁: "링크 텍스트"는 텍스트일 필요는 없습니다. 이미지나 기타 HTML 요소는 링크가 될 수 있습니다.


HTML 링크 - 대상 속성

대상 속성을 사용하면 링크된 문서가 표시될 위치를 정의할 수 있습니다.

다음 줄은 새 창에서 문서를 엽니다:

Example

<a href="" target="_blank" > 초보자 튜토리얼을 방문하세요 a>

해보세요! 밖으로 나가세요»


HTML 링크 - id attribute

id 속성은 HTML 문서에서 북마크 태그를 만드는 데 사용할 수 있습니다.

팁: 북마크는 특별한 방법으로 표시되지 않으며 HTML 문서에도 표시되지 않으므로 독자에게 숨겨집니다.

Example

HTML 문서에 ID 삽입:

HTML 문서에서 "유용한 팁 섹션"에 대한 링크 만들기(id=" Tips")":

또는 다른 페이지 섹션에서 "유용한 팁"에 대한 링크를 만드세요(id="tips ")":


기본 메모 - 유용한 팁

참고: 하위 폴더에는 항상 슬래시를 추가하세요. href="http://www.runoob.com/html"과 같이 링크를 작성하면 두 개의 HTTP 요청이 서버에 생성됩니다. 이는 서버가 주소에 슬래시를 추가한 다음 href="http://www.runoob.com/html/"과 같이 새 요청을 생성하기 때문입니다.



더 많은 예시

이미지 링크
이미지 링크 사용 방법.

현재 페이지의 지정된 위치로 링크
북마크 사용 방법

프레임 외부
이 예제는 페이지가 프레임 내에 고정되어 있다는 가정하에 프레임 밖으로 점프하는 방법을 보여줍니다.

이메일 링크 만들기
이 예에서는 이메일에 링크하는 방법을 보여줍니다. (이 예제는 이메일 클라이언트 프로그램을 설치한 후에만 작동할 수 있습니다.)

이메일 링크 만들기 2
이 예제는 좀 더 복잡한 이메일 링크를 보여줍니다.


HTML 링크 태그


tag 설명
하이퍼링크 정의

위 내용은 HTML 링크에 대한 예제 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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