<a>
HTML <a> 태그
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <a href="http://www.php.cn">访问php中文网!</a> </body> </html>
인스턴스 실행 »
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
브라우저 지원
모든 주요 브라우저는 <a> 태그를 지원합니다.
태그 정의 및 사용 지침
태그는 무엇을 의미하나요?
<a> 태그는 한 페이지에서 다른 페이지로 연결하는 데 사용되는 하이퍼링크를 정의합니다.
<a> 요소의 가장 중요한 속성은 링크 대상을 지정하는 href 속성입니다.
모든 브라우저에서 링크의 기본 모양은 다음과 같습니다.
방문하지 않은 링크는 밑줄과 파란색으로 표시됩니다.
방문한 링크는 밑줄과 보라색으로 표시됩니다.
-
활성 링크는 밑줄과 빨간색으로 표시됩니다
팁 및 참고 사항
팁: href 속성을 사용하지 않으면 hreflang, media, rel, target 및 type 속성을 사용할 수 없습니다.
팁: 다른 대상을 지정하지 않는 한 일반적으로 현재 브라우저 창에 링크된 페이지를 표시합니다.
팁: CSS를 사용하여 링크 스타일을 변경하세요.
HTML 4.01과 HTML5의 차이점
HTML 4.01에서 <a> 태그는 하이퍼링크 또는 앵커일 수 있습니다. HTML5에서 <a> 태그는 하이퍼링크이지만 href 속성이 없으면 하이퍼링크에 대한 자리 표시자일 뿐입니다.
HTML5에는 몇 가지 새로운 속성이 있으며 일부 HTML 4.01 속성은 더 이상 지원되지 않습니다.
Attributes
New: HTML5의 새로운 속성.
| Attribute | Value | Description |
|---|---|---|
| charset | char_encoding | HTML5 지원되지 않습니다. 대상 URL의 문자 인코딩을 지정합니다. |
| coords | coordinates | HTML5는 지원되지 않습니다. 링크의 좌표를 지정합니다. |
| downloadNew | filename | 다운로드 링크를 지정합니다 |
| href | URL | 링크의 대상 URL을 지정합니다. |
| hreflang | 언어_code | 대상 URL의 기본 언어를 지정합니다. href 속성이 있는 경우에만 사용됩니다. |
| mediaNew | media_query | 대상 URL의 미디어 유형을 지정합니다. 기본값: 모두. href 속성이 있는 경우에만 사용됩니다. |
| name | section_name | HTML5는 지원되지 않습니다. 앵커의 이름을 지정합니다. |
| rel | alternate 작성자 북마크 도와주세요 라이센스 다음 팔로우 안함 추천인 없음 프리패치 이전 검색 tag | 는 현재 문서와 대상 URL 간의 관계를 지정합니다. href 속성이 있는 경우에만 사용됩니다. |
| rev | text | HTML5는 지원되지 않습니다. 대상 URL과 현재 문서 간의 관계를 지정합니다. |
| 모양 | 기본 바로 서클 폴리 | HTML5는 지원되지 않습니다. 링크의 모양을 지정합니다. |
| target | _blank _parent _self _top framename | 은 대상 URL을 열 위치를 지정합니다. href 속성이 있는 경우에만 사용됩니다. |
| type New | MIME_type | 대상 URL의 MIME 유형을 지정합니다. href 속성이 있는 경우에만 사용됩니다. 참고: MIME = 다목적 인터넷 메일 확장자. |
전역 속성
<a> 태그는 HTML 전역 속성을 지원합니다.
이벤트 속성
<a> 태그는 HTML 이벤트 속성을 지원합니다.
해 보세요 - 예제
하이퍼링크 만들기
이 예제에서는 HTML 문서에서 링크를 만드는 방법을 보여줍니다.
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <h1>我使用了外部样式文件来格式化文本 </h1> <p>我也是!</p> </body> </html>
인스턴스 실행 »
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
이미지를 링크로 사용
이 예에서는 이미지를 링크로 사용하는 방법을 보여줍니다.
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <p> 图像作为链接: <a href="http://php.cn"> <img border="0" alt="w3cschool" src="logo.png" width="100" height="100"> </a> </p> </body> </html>
인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
새 브라우저 창에서 링크 열기
이 예는 새 브라우저 창에서 페이지를 여는 방법을 보여줍니다. 창을 통해 사이트를 떠나지 않고도 사용자에게 액세스할 수 있습니다.
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <a href="http://www.php.cn/" target="_blank">访问php中文网!</a> <p>如果你将 target 属性设置为 "_blank", 链接将在新窗口打开。</p> </body> </html>
인스턴스 실행 »
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
이메일 링크 만들기
이 예에서는 이메일에 연결하는 방법을 보여줍니다. (이 예제는 메일 클라이언트 프로그램을 설치한 후에만 작동할 수 있습니다.)
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <p> 这是一个电子邮件链接： <a href="mailto:someone@example.com?Subject=Hello%20again" target="_top"> 发送邮件</a> </p> <p> <b>Note:</b> Spaces between words should be replaced by %20 to ensure that the browser will display the text properly. </p> </body> </html>
인스턴스 실행»
온라인 예제를 보려면 "인스턴스 실행" 버튼을 클릭하세요
이메일 링크 만들기 2
This 예에서는 더 복잡한 이메일 링크를 보여줍니다.
Instance
<!DOCTYPE html> <html> <body> <p> This is another mailto link: <a href="mailto:someone@example.com?cc=someoneelse@example.com&bcc=andsomeoneelse@example.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!" target="_top">Send mail!</a> </p> <p> <b>Note:</b> Spaces between words should be replaced by %20 to ensure that the browser will display the text properly. </p> </body> </html>
인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
앵커를 사용하여 같은 페이지의 다른 위치로 이동하세요
이 예에서는 앵커를 사용하는 방법을 보여줍니다. 페이지의 다른 위치로 이동하려면 id 속성을 사용하세요(HTML5에서는 name 속성을 지원하지 않습니다).
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <h2><a id="top">这是标题，底部链接可以链接到这</a></h2> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <a href="#top">链接到标题</a> </body> </html>
인스턴스 실행 »
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
관련 기사
HTML 튜토리얼: HTML 링크
HTML DOM 참조 매뉴얼: 앵커 개체
