HTML의 앵커 포인트 란 무엇입니까?-프런트엔드 Q&A-php.cn

HTML의 앵커 포인트 란 무엇입니까?

青灯夜游

풀어 주다： 2023-01-06 11:12:36

원래의

8415명이 탐색했습니다.

HTML의 앵커 포인트는 명명된 앵커 포인트라고도 하는 웹 페이지의 하이퍼링크 유형으로, 방문자가 하이퍼링크를 클릭한 후 도착하는 위치를 정확하게 제어할 수 있습니다. 앵커는 사용자가 문서에서 태그를 설정하는 경우입니다. 이러한 태그는 일반적으로 특정 주제나 문서 상단에 배치된 다음 뷰어를 지정된 위치로 빠르게 이동할 수 있는 명명된 앵커에 대한 링크를 만듭니다.

HTML의 앵커 포인트 란 무엇입니까?

이 튜토리얼의 운영 환경: Windows 7 시스템, HTML5 버전, Dell G3 컴퓨터.

앵커--이름이 지정된 앵커라고도 불리는 웹 페이지의 하이퍼링크 유형입니다. 명명된 앵커는 빠른 위치 찾기와 같은 페이지 내의 하이퍼링크이며 널리 사용됩니다.

이름이 지정된 앵커: 사용자가 문서에 태그를 설정합니다. 이 태그는 일반적으로 특정 주제나 문서 상단에 배치됩니다. 그런 다음 시청자를 지정된 위치로 빠르게 이동할 수 있는 명명된 앵커 링크를 만듭니다.

앵커 링크 생성의 이점:

앵커 링크를 사용하면 방문자가 해당 위치에 도착한 후 하이퍼링크를 클릭하는 위치를 정확하게 제어할 수 있습니다. 명명된 앵커가 없는 링크는 방문자를 대상 페이지의 상단으로 이동합니다. 페이지의 글이 너무 긴 경우, 필요한 부분을 찾기 위해 단순히 스크롤바를 위아래로 움직여야 하는 번거로움이 있을 경우, 페이지 내에 하이퍼링크를 생성하여 필요한 정보를 빠르게 찾을 수 있습니다.

이름이 지정된 앵커를 만드는 방법:

이름이 지정된 앵커에 대한 링크를 만드는 과정은 두 단계로 나뉩니다. 먼저 명명된 앵커를 만든 다음 명명된 앵커에 대한 링크를 만듭니다.

HTML 페이지의 적절한 위치에 다음 앵커 포인트를 정의합니다.

<a name="top">这里是TOP部分</a> 
<a name="content">这里是CONTENT部分</a> 
<a name="foot">这里是FOOT部分</a>

로그인 후 복사

(name 속성 대신 id 속성을 사용할 수 있습니다. 명명된 앵커도 유효합니다.)

위에 액세스하는 방법에는 두 가지가 있습니다. 앵커 포인트

One One은 하이퍼링크 태그 를 사용하여 앵커 링크를 만드는 것인데, 이는 주로 페이지 내 앵커 액세스에 사용됩니다.

<a href="#top">点击我链接到TOP</a> 
<a href="#content">点击我链接到CONTENT</a> 
<a href="#foot">点击我链接到FOOT</a>

로그인 후 복사

다른 방법은 앵커 태그를 추가하는 것입니다. 주로 서로 다른 페이지 간 앵커 접근에 사용되는 페이지 주소 바로 뒤에

이 페이지의 주소가 http://file path/index.html인 경우, 풋 앵커에 접근하려면 다음 링크에 접속하세요

http://文件路径/index.html#foot

로그인 후 복사

html 앵커 포인트가 정확히 무엇인가요?

쉽게 말하면, 아주 긴 글을 세그먼트별로 정확하게 읽고 싶을 때 앵커 포인트를 활용하면 됩니다.

코드:

<a href="#001">跳到001</a> 
...文字省略 
<a name="001" id="001" ></a> 
...文字省略

로그인 후 복사

사실 앵커 포인트에는 이름만 있으면 됩니다. 호환성을 높이기 위해 id를 추가합니다.

href 값은 이름/id와 일치해야 하며 앞에 "#"을 추가해야 합니다. 위 코드는 ie6/7과 ff에서는 호환되지만 ie8에서는 호환되지 않습니다.

앵커 포인트의 값이 비어 있으므로 미학에 영향을 주지 않도록 공백을 추가하면 됩니다.

다음 코드는 ie8과 호환됩니다.

<a href="#001">跳到001</a> 
...文字省略 
<a name="001" id="001" > & n b s p </a> 
...文字省略

로그인 후 복사

또 다른 코드입니다. 질문이 있습니다. 특정 페이지(예: 123.html)의 앵커 콘텐츠를 표시하는 것은 어떻습니까?

코드는 다음과 같습니다

<a href="123.html#001">跳到001</a> 
...文字省略 
<a name="001" id="001" > & n b s p </a> 
...文字省略

로그인 후 복사

어제 배경 작업을 하던 중 "위치 수정"을 하고 싶어서 앵커 마크를 옮겼습니다(보통은 잊어버리곤 합니다).

근데 프로그램에서 값을 얻으려면 연결에 "?"나 "&"가 있어야 한다고 해서 앵커 포인트가 호환되지 않습니다...

하하! 미래에 해결책이 있을 것입니다!

JSP 페이지에서는 앵커 포인트 호환성에 문제가 있지만 정적 페이지에서는 문제가 없으며 여전히 배울 가치가 있습니다!

WEB 개발에서는 페이지 앵커가 사용됩니다.

HTML 페이지 앵커는 페이지의 특정 섹션을 연결하는 데 사용됩니다. W3School에서는 앵커를 만들 때 (앵커) 태그와 이름 속성을 사용한다고 말하지만 이것이 페이지 앵커를 만드는 유일한 방법은 아닙니다. HTML 페이지 앵커를 만드는 두 가지 방법에 대해 간략하게 이야기하겠습니다.

W3School의 온라인 테스트 도구를 사용하여 테스트할 수 있습니다. 링크 오픈 후 테스트 코드에서는 와 를 사용하고 있으며 테스트에는 문제가 없습니다. 그런 다음 "

설명하자면, 페이지 앵커를 만들 때 앵커 태그의 name 속성을 사용하는 것 외에 id 속성을 사용할 수도 있습니다. 앵커 태그의 href 속성 값은 #으로 시작하는 값과 대상의 이름 또는 ID입니다:

<html> 
<body> 
<p> 
<a href="#method1">页面锚点方法一</a> 
</p> 
<p> 
<a href="#method2">页面锚点方法二</a> 
</p> 
<h2><a name="method1">方法一</a></h2> 
<p>使用锚标签的 href 和 name 属性</p> 
<h2 id="method2">方法二</h2> 
<p>使用锚标签和 id 属性</p> 
</body> 
</html>

로그인 후 복사

동영상 공유 학습: css 동영상 튜토리얼

위 내용은 HTML의 앵커 포인트 란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!