HTML+CSS 앵커 링크로...로그인

HTML+CSS 앵커 링크로 쉽게 시작하기

앵커 링크란 무엇입니까

HTML의 링크는 앵커 링크(북마크라고도 함)의 이름을 "앵커"라고 해야 합니다. 링크)는 크고 복잡한 콘텐츠가 있는 웹 페이지에서 자주 사용됩니다. 명명된 앵커를 클릭하면 문서를 가리킬 수 있을 뿐만 아니라 페이지의 특정 단락을 가리킬 수도 있습니다. "정확한 연결"을 통해 링크 개체에 초점을 맞출 수 있습니다. 시청자가 웹페이지의 내용을 보는 것이 편리합니다. 책을 읽을 때 목차 페이지 번호나 장 알림과 비슷합니다. 태그 앵커는 페이지의 특정 부분을 대상으로 해야 할 때 가장 좋은 방법입니다.

앵커 링크 생성 방법

1단계: 명명된 앵커 생성

명명된 앵커를 생성하려면 Dreamweaver 편집 보기에서 앵커 이름을 지정할 위치에 커서를 놓습니다. "레코드 삽입" 도구 모음을 선택하고 "명명된 앵커" 옵션을 선택합니다. 명명된 앵커 대화 상자가 나타납니다.

'앵커 이름' 텍스트 상자에 앵커 이름을 입력합니다. 일반적으로 앵커가 웹페이지 상단에 있는 경우 top을 입력할 수 있습니다. 앵커 이름에는 공백이 포함될 수 없으며 레이어 내에 배치되어서는 안 됩니다.

2단계: 명명된 앵커에 연결

앵커를 정의한 후 명명된 앵커에 연결할 수 있습니다. "맨 위로" 텍스트와 같이 링크를 만들려는 텍스트나 이미지를 선택합니다. 속성 패널의 "링크" 텍스트 상자에 "#anchor 이름"을 입력합니다(예: "#top"). 그림 2와 같습니다.

앵커에 저장된 웹페이지로 연결 후 F12를 누르면 웹페이지를 미리 볼 수 있습니다. 브라우저에서 링크 텍스트(맨 위로 돌아가기)를 클릭하면 웹 페이지는 이름이 "top"으로 표시된 앵커가 있는 행으로 이동합니다.

PS: 다른 문서에 있는 "top"이라는 앵커에 연결하려면 형식은 파일 절대 경로 + 파일 이름 #top입니다. 앵커 이름은 대소문자를 구분합니다.

SEO에서 앵커 링크의 역할

앵커 링크는 웹 페이지에 적절한 앵커 링크를 추가하는 것이 매우 중요한 개념입니다. 웹페이지와 그것이 가리키는 웹페이지의 내용이 키워드 순위에 영향을 미치게 됩니다. 앵커링크가 SEO에 미치는 영향은 주로 다음과 같은 측면에서 나타납니다.

앵커링크가 위치한 페이지에 미치는 영향

일반적으로 페이지에 추가된 링크 앵커 링크는 페이지 자체와 특정 관계를 갖습니다. 따라서 앵커 텍스트는 앵커 링크가 있는 페이지의 내용을 평가하는 데 사용될 수 있습니다. 예를 들어, 이 기사에는 "SEO"에 대한 링크가 포함되어 있으며 이는 이 기사가 SEO와 특정 관계가 있음을 의미합니다.

앵커 링크가 가리키는 페이지에 미치는 영향

앵커 링크는 포인팅된 페이지의 내용을 정확하게 설명할 수 있으므로 앵커 링크는 포인팅된 페이지에 대한 평가로 활용될 수 있습니다.

키워드 순위에 대한 앵커 링크의 영향

키워드 순위에 대한 앵커 링크의 중요성은 콘텐츠 페이지가 무작위로 서로 연결될 수 있게 하여 스파이더가 더 많은 페이지를 크롤링할 수 있게 한다는 것입니다. 또한 균등하게 전송되어 페이지의 관련성을 높여 궁극적으로 웹사이트의 키워드 순위를 향상시킵니다.

앵커링크와 하이퍼링크의 차이

1. 키워드 순위의 차이.

키워드 순위 차이를 이야기하자면. Baidu 순위의 차이를 숫자로 설명할 수 있습니다. 앵커 텍스트로 링크를 만든다고 가정해 보겠습니다. 예를 들어 "웹마스터 네트워크"라는 키워드를 만듭니다. 이 외부 링크가 Baidu에 포함된 경우. Baidu가 이 링크에 부여한 가중치를 아라비아 숫자로 표시한다고 가정합니다. 예를 들어, 5인 경우 키워드 Webmaster.com에 대한 이 외부 링크의 순위는 4로 할당될 수 있고 당사 웹사이트의 다른 키워드에 대한 순위는 할당될 수 있습니다.

2. 백링크의 차이점

우리는 SEO를 할 때 우리 웹사이트의 백링크에 주목하는 경우가 많습니다. 일반적으로 모든 사람은 야후 백링크와 바이두 도메인을 통해 자신의 웹사이트를 검색합니다. 앵커 텍스트 링크를 만들면. 야후에 포함해달라고 요청하면 야후의 백링크를 통해 앵커 텍스트 링크를 쿼리할 수 있습니다. 이 링크가 Baidu에 포함된 경우 Baidu 도메인을 통해 쿼리할 수 없습니다. URL 링크를 만들어 Yahoo에 포함하도록 요청하면 Yahoo의 백링크를 통해 쿼리할 수 있으며, Baidu에 포함하도록 요청하면 Baidu 도메인을 통해서도 쿼리할 수 있습니다. 따라서 앵커 텍스트 링크를 사용하면 당사 웹사이트에 대한 Yahoo 백링크 수가 늘어날 수 있습니다. Baidu 도메인 수는 늘릴 수 없습니다. URL 링크는 당사 웹사이트에 대한 Yahoo 백링크 수를 늘릴 수 있으며 Baidu 도메인 수도 늘릴 수 있습니다.


앵커 링크 예시: 상위로 돌아가는 예시를 만들어 보세요. 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>锚点链接</title>
</head>
<body>

		<a name="top">我们都一样</a>

		推开窗看见星星  一直守在夜空中<br>
		心中不免多了些暖暖的感动<br>
		一闪一闪的光  努力把黑夜点亮气氛如此安详<br>
		你在我的生命中是那最闪亮的星<br>
		一直在我深夜中守护着我们的梦<br><br>
		这世界那么大我的爱只想要你懂<br>
		陪伴我孤寂旅程<br>
		你知道我的梦你知道我的痛<br>
		你知道我们感受都相同<br>
		就算有再大的风也挡不住勇敢的冲动 <br><br>



		最美的太阳

		我的世界 因为有你才会美<br>
		我的天空 因为有你不会黑<br>
		给我快乐 为我伤心流眼泪<br>
		给我宽容 让我能展翅高飞<br>
		你的话你的泪 你的笑你的美<br>
		在我眼中胜过最美的玫瑰<br>
		抱着梦 往前飞 不逃避 不后退<br>
		你是我成功路上的堡垒<br>
		给我翅膀 让我可以翱翔<br>
		给我力量 是你让我变坚强<br>
		不怕受伤 因为有你在身旁<br>
		你的笑 你的泪 是我筑梦路上最美的太阳<br><br>



		明天过后<br>
		没有星星的夜空<br> 
		没有话题能补充 <br>
		太多承诺从指缝中溜走 <br>
		不敢奢求什么 <br>
		回忆将我们扣留 <br>
		一瞬间亲吻的时候 <br>
		一切就好像轮回般朦胧 <br>
		心动渐渐的失控 <br>
		是否两个人足够捕捉爱的镜头 <br>
		闭上了眼睛记得你的笑容 <br>
		幸福的从容将灵魂都掏空 <br>
		享受一分钟的感动 <br>
		是否爱上一个人不问明天过后 <br>
		山明和水秀不比你有看头 <br>
		牵着你的手,一直走到最后 <br>
		这一刻怎么回头 <br>




		明天过后<br>
		没有星星的夜空<br> 
		没有话题能补充 <br>
		太多承诺从指缝中溜走 <br>
		不敢奢求什么 <br>
		回忆将我们扣留 <br>
		一瞬间亲吻的时候 <br>
		一切就好像轮回般朦胧 <br>
		心动渐渐的失控 <br>
		是否两个人足够捕捉爱的镜头 <br>
		闭上了眼睛记得你的笑容 <br>
		幸福的从容将灵魂都掏空 <br>
		享受一分钟的感动 <br>
		是否爱上一个人不问明天过后 <br>
		山明和水秀不比你有看头 <br>
		牵着你的手,一直走到最后 <br>
		这一刻怎么回头 <br>






		<a href="#top">顶部</a>
</body>
</html>

우리 웹 페이지에 콘텐츠가 많을 때. , 우리는 계속해서 페이지를 내려다보고 있습니다. 페이지 상단으로 바로 이동하려면 클릭하세요.

다음 섹션
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>锚点链接</title> </head> <body> <a name="top">我们都一样</a> 推开窗看见星星 一直守在夜空中<br> 心中不免多了些暖暖的感动<br> 一闪一闪的光 努力把黑夜点亮气氛如此安详<br> 你在我的生命中是那最闪亮的星<br> 一直在我深夜中守护着我们的梦<br><br> 这世界那么大我的爱只想要你懂<br> 陪伴我孤寂旅程<br> 你知道我的梦你知道我的痛<br> 你知道我们感受都相同<br> 就算有再大的风也挡不住勇敢的冲动 <br><br> 最美的太阳 我的世界 因为有你才会美<br> 我的天空 因为有你不会黑<br> 给我快乐 为我伤心流眼泪<br> 给我宽容 让我能展翅高飞<br> 你的话你的泪 你的笑你的美<br> 在我眼中胜过最美的玫瑰<br> 抱着梦 往前飞 不逃避 不后退<br> 你是我成功路上的堡垒<br> 给我翅膀 让我可以翱翔<br> 给我力量 是你让我变坚强<br> 不怕受伤 因为有你在身旁<br> 你的笑 你的泪 是我筑梦路上最美的太阳<br><br> 明天过后<br> 没有星星的夜空<br> 没有话题能补充 <br> 太多承诺从指缝中溜走 <br> 不敢奢求什么 <br> 回忆将我们扣留 <br> 一瞬间亲吻的时候 <br> 一切就好像轮回般朦胧 <br> 心动渐渐的失控 <br> 是否两个人足够捕捉爱的镜头 <br> 闭上了眼睛记得你的笑容 <br> 幸福的从容将灵魂都掏空 <br> 享受一分钟的感动 <br> 是否爱上一个人不问明天过后 <br> 山明和水秀不比你有看头 <br> 牵着你的手,一直走到最后 <br> 这一刻怎么回头 <br> 明天过后<br> 没有星星的夜空<br> 没有话题能补充 <br> 太多承诺从指缝中溜走 <br> 不敢奢求什么 <br> 回忆将我们扣留 <br> 一瞬间亲吻的时候 <br> 一切就好像轮回般朦胧 <br> 心动渐渐的失控 <br> 是否两个人足够捕捉爱的镜头 <br> 闭上了眼睛记得你的笑容 <br> 幸福的从容将灵魂都掏空 <br> 享受一分钟的感动 <br> 是否爱上一个人不问明天过后 <br> 山明和水秀不比你有看头 <br> 牵着你的手,一直走到最后 <br> 这一刻怎么回头 <br> <a href="#top">顶部</a> </body> </html>
코스웨어