HTML에서 앵커 포인트를 설정하는 방법-프런트엔드 Q&A-php.cn

HTML에서 앵커 포인트를 설정하는 방법

藏色散人

풀어 주다： 2023-01-06 11:15:23

원래의

24917명이 탐색했습니다.

HTML에서 앵커 포인트를 설정하는 방법: 1. 앵커 링크 "..."를 설정합니다. 2. HTML에서 필요한 위치에 앵커 포인트를 설정합니다. 3. href의 경로 뒤에 "#+앵커 이름"을 추가합니다.

HTML에서 앵커 포인트를 설정하는 방법

이 글의 운영 환경: Windows 7 시스템, HTML5 버전, DELL G3 컴퓨터

html의 앵커 포인트

페이지 내 점프를 위한 앵커 포인트 설정

페이지 내 점프를 위해서는 다음이 필요합니다. 두 단계 ：

방법 1:

①: 고양이를 찾기 위한 앵커 링크 )

②: 앵커 포인트 ;를 설정합니다. (참고: a 태그에는 name 속성을 써야 하며, 속성 값은 href와 동일해야 합니다. ①에서 속성 값은 추가하지 않고 동일함#) 라벨에 필요한 텍스트를 입력합니다. 일반적으로 내용을 쓰지 않습니다.

방법 2:

①: ①

②: 앵커 포인트 위치 설정 & lt ; h3 ID = "miao">Meow Star Base;

방법 2는 앵커 포인트를 구체적으로 설정하기 위해 별도의 태그를 추가할 필요 없이 태그의 필요한 위치에 ID만 추가하면 됩니다.

Small Case:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>萌宠集结号</title>
</head>
<body>
    <ul>
        <li><a href="#miao">去找喵星人</a></li>
        <li><a href="#wang">去找汪星人</a></li>
        <li><a href="#meng">其他萌物</a></li>
    </ul>
    <a name="miao"></a><!--设置锚点方法1-->
    <h3 id="miao">喵星人基地</h3><!--设置锚点方法2-->
    <p>喵喵喵~</p>
    <p>喵喵喵~</p>
    <p>喵喵喵~</p>
    <p>喵喵喵~</p>
    <p>喵喵喵~</p>
    <p>喵喵喵~</p>
    
    <a name="wang"></a>
    <p>汪汪汪~</p>
    <p>汪汪汪~</p>
    <p>汪汪汪~</p>
    <p>汪汪汪~</p>
    <p>汪汪汪~</p>
    <p>汪汪汪~</p>
    <a name="meng"></a>
    <p>萌萌萌~</p>
    <p>萌萌萌~</p>
    <p>萌萌萌~</p>
    <p>萌萌萌~</p>
    <p>萌萌萌~</p>
    <p>萌萌萌~</p>
</body>
</html>

로그인 후 복사