HTML 기본 튜토리얼 하이퍼링크

하이퍼링크는 웹사이트 어디에서나 볼 수 있습니다. Baidu News를 열고 임의의 단락을 클릭하면 뉴스 세부정보 페이지가 열립니다.

다음으로 하이퍼링크에 대한 자세한 지식을 소개하겠습니다

하이퍼링크

문법 형식:

참고: <a>는 <a> 태그를 포함할 수 없습니다.

공통 속성

href: 주소 대상 파일의 URL입니다. URL은 상대 주소일 수도 있고 절대 주소일 수도 있습니다.
target: 대상 파일의 표시 창입니다.

_blank: 대상 파일을 새 창에서 엽니다.
_self: 현재 창에서 대상 파일을 엽니다(기본적으로 열림). "교체" 작업과 동일합니다.
_parent: 대상 파일을 상위 창에서 엽니다.
_top: 최상위 창에서 대상 파일을 엽니다.

일반적으로 사용되는 _parent 및 _top 프레임 웹페이지 중 나중에 소개하겠습니다.

name: 앵커 링크의 이름을 정의합니다. .

1. 절대 주소 URL

(1) 원격 절대 주소

원격 파일에 액세스하려면 항상 "<a href="http://"도메인 이름 및 호스트 이름.">http://"도메인 이름 및 호스트 이름.</a>"으로 시작하세요.

예:

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
        <h1>欢迎加入php.cn</h1>
        <a href="http://www.php.cn/" >php.cn</a>
        <hr>
        <a href="http://www.taobao.com/" target="_blank">淘宝网</a>
        <hr>
        <a href="http://www.baidu.com/" target="_blank">百度</a>
    </body>
</html>

(2) 로컬 절대 주소(거의 사용되지 않음)

절대 주소 로컬 영역에 접속하기 위한 주소는 <a href="http://file:///.">file:///로 시작하는 절대 주소입니다. </a>

이전 예를 기반으로 추가:

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
        <h1>欢迎加入php.cn</h1>
        <a href="http://www.php.cn/" >php.cn</a>
        <hr>
        <a href="http://www.taobao.com/" target="_blank">淘宝网</a>
        <hr>
        <a href="http://www.baidu.com/" target="_blank">百度</a>
        <a href="file:///D:/image.html" target="_blank">点击查看图片</a>  
    </body>
</html>

참고: 로컬에서 테스트하세요

2. 상대 주소 URL(프로젝트 내 경로는 대개 상대 경로이므로 로컬에서 테스트해 보세요.)

(1) 현재 파일과 대상 파일이 동일한 레벨 관계에 있고, 링크 주소에 대상 파일 이름을 직접 씁니다.

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
        <h1>欢迎加入php.cn</h1>
       <a href="1.jpg">图片</a>  
    </body>
</html>

(2) 현재 파일과 대상 파일이 있는 폴더가 동일한 수준의 관계에 있습니다. 먼저 "폴더 이름"을 찾은 다음 "파일 이름"을 찾습니다. ".

즉, 대상 파일은 다음 레벨에 위치합니다.

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
        <h1>欢迎加入php.cn</h1>
       <a href="image/1.jpg">图片</a>  
    </body>
</html>

(3) 대상 파일은 상위 디렉터리에 위치하며, 해당 디렉터리를 조회한 후 해당 디렉터리에서 파일을 찾습니다.

"../" 기호를 찾아 사용하세요.

"../"는 상위 디렉터리를 나타냅니다.

"../../"는 상위 두 수준을 나타냅니다.

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
        <h1>欢迎加入php.cn</h1>
       <a href="../image/1.jpg">图片</a>  
    </body>
</html>

3. 특별링크

(1), 다운로드 링크

어떤 종류의 파일에 다운로드 메시지가 표시되나요?

반면, 직접 실행할 수 있는 파일과 웹페이지는 무엇인가요? 예: .jpg, .png, .gif, .html, .htm, .txt 등

대부분의 파일은 브라우저에서 직접 실행할 수 없습니다. 예: .doc, .xls, .ppt, .rar, .psd...

을 직접 실행할 수 없는 경우 다운로드 상자가 나타납니다.

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
        <h1>欢迎加入php.cn</h1>
       <a href="image/1.rar">下载</a>  
    </body>
</html>

(2), 이메일 링크

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
        <h1>欢迎加入php.cn</h1>
       <a href="mailto:php@php.cn">有问题的话，请给我们发邮件</a>  
    </body>
</html>

(3), 일반 빈 링크(#)

점프 링크 실행 단계:

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
        <h1>欢迎加入php.cn</h1>
       <a href="#">这是一个空链接</a>  
    </body>
</html>

지속적인 학습

새로운 파일

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <h1>欢迎加入php.cn</h1> <a href="http://www.php.cn/" >php.cn</a> <hr> <a href="http://www.taobao.com/" target="_blank">淘宝网</a> <hr> <a href="http://www.baidu.com/" target="_blank">百度</a> </body> </html>

제출하다 코드 재설정

자동운전