HTML에 하이퍼링크와 앵커를 추가하는 방법과 기능에 대한 자세한 설명(동영상 첨부)-HTML 지식-php.cn

HTML에 하이퍼링크와 앵커를 추가하는 방법과 기능에 대한 자세한 설명(동영상 첨부)

藏色散人

풀어 주다： 2018-09-11 16:15:20

원래의

8450명이 탐색했습니다.

이 글에서는 주로 HTML의 하이퍼링크 앵커 설정을 추가하는 방법과 그 기능에 대해 소개합니다.

HTML 하이퍼링크 및 앵커 포인트 대부분의 친구들은 이미 개념을 매우 잘 알고 있다고 생각하지만, HTML을 이제 막 시작하는 초보자에게는 #🎜 🎜#How html에 하이퍼링크 앵커 포인트를 추가하는 것이 여전히 약간 불분명할 수 있습니다. 그래서 이 글은 초보 친구들을 위한 글이고, 필요하신 분들에게 도움이 되었으면 좋겠습니다!

아래에서는 구체적인 HTML 코드 예시를 통해 자세히 설명하겠습니다.

HTML에 하이퍼링크 앵커를 추가하는 코드 예제는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
<a href="http://www.php.cn">PHP中文网</a>

<a href="#one">第一篇文章</a>
<a href="#two">第二篇文章</a>
<a href="#three">第三篇文章</a>

<a name="one"></a>
<h1>第一篇文章</h1>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>

<a name="two"></a>
<h1>第二篇文章</h1>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>

<a name="three"></a>
<h1>第三篇文章</h1>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>

<a href="">回到顶部</a>
</body>
</html>

로그인 후 복사

이 코드에서는 주로 When을 사용합니다. HTML의

태그 에 옵니다. href="link address to jump to" 속성을 a 태그에 직접 추가하면 달성할 수 있는 텍스트 하이퍼링크입니다. 예를 들어, 위의 코드 섹션 PHP 중국어 웹사이트 지정된 링크 페이지입니다.

a 태그에

name=" #anchor name" 속성을 추가하면 앵커 링크 가 설정되었음을 의미합니다. 그런 다음 본문에서 지정된 위치에 앵커 포인트를 설정할 수 있습니다. 즉, a 태그에 name = "anchor name" 을 추가하면 됩니다. 여기에 # 기호를 추가하지 않도록 주의하세요.

위 코드의 전체적인 효과는 다음과 같습니다. 🎜## 🎜🎜#

HTML에 하이퍼링크와 앵커를 추가하는 방법과 기능에 대한 자세한 설명(동영상 첨부) 페이지에 기사 콘텐츠의 큰 섹션이 있는 경우 페이지에 앵커 포인트를 설정하여 지정된 개체로 빠르게 이동할 수 있습니다. . 작업. 위와 같이 첫 번째 기사, 두 번째 기사, 세 번째 기사를 각각 클릭하면 지정된 콘텐츠 부분으로 빠르게 점프하게 됩니다. 동시에 기사 하단의 상단에 하이퍼링크를 다시 추가할 수 있습니다. a 태그의 href 속성 값을 비워두기만 하면 됩니다!