HTML의 앵커 및 페이지 점프-HTML 튜토리얼-php.cn

HTML의 앵커 및 페이지 점프

yulia

풀어 주다： 2018-09-10 15:48:15

원래의

2195명이 탐색했습니다.

1. 페이지 내에서 점프할 앵커 포인트를 설정합니다.
페이지 내에서 점프하려면 두 단계가 필요합니다.
방법 1:
①: 하나 설정 앵커링크 고양이 찾으러 가기; (참고: href 속성의 속성값 앞에 # 추가)
②: 의 필수 위치입니다. 페이지 앵커포인트 설정 ; , #)을 추가하지 않고 태그에 필요에 따라 필요한 텍스트를 입력합니다. 일반적으로 내용은 없습니다
방법 2:
①: 방법 1과 동일 ①
②: 앵커 포인트 위치 설정< ;h3 id="miao"> Meow Star Base 점프하려는 위치의 라벨에 id 속성을 추가합니다. 속성값은 #을 추가하지 않고 ①의 href 속성값과 동일합니다.
. 방법 2는 별도의 태그를 추가할 필요가 없으며, 앵커 포인트를 구체적으로 설정하려면 태그의 원하는 위치에 ID를 추가하면 됩니다.

소형 사례:

<!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>

로그인 후 복사

2. 페이지 간 이동

①: 앵커 링크를 설정합니다. href의 경로 뒤에 추가: #+앵커 이름, 가능
예: 귀여운 애완동물 컬렉션 계정 페이지로 이동
②: 이동하려는 페이지에 앵커 포인트를 설정하세요. 방법은 두 가지 방법 중 하나를 선택하세요.

위 내용은 HTML의 앵커 및 페이지 점프의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!