HTML 링크 앵커 태그 소개 및 SEO_HTML/Xhtml_웹 페이지 제작에서의 역할

3499910bf9dac5ae3c52d5ede7383485 태그는 주로 하이퍼링크 또는 앵커 링크라고도 하는 링크와 북마크를 정의하는 데 사용됩니다.

하이퍼링크 href 속성을 생성하고 href="" 중간에 있는 링크로 이동합니다.

<a href="http://www.jb51.net/">www.jb51.net</a>

북마크를 생성하고 name 또는 id 속성을 사용하고 하이퍼링크 끝에 "#"을 추가하고 웹페이지의 특정 위치로 이동하려면 이 북마크 이름을 추가하세요

<a name="top"></a>
<a name="1"></a>
<a name="2"></a>
<a href="#top">返回顶部</a>
<a href="#1">打开第一章</a>
<a href="#2">打开第二章</a>

E-Dimension Technology W3Cchool 온라인 튜토리얼을 열면 제목 아래 탐색이 표시됩니다. 이는 북마크 이름을 통해 생성됩니다.

Javascript 이벤트 속성,

클릭 후 다른 명령 실행

<a href="javascript:void(0)" onclick="this.href='http://www.jb51.net/'">www.jb51.net</a>

앵커 링크 CSS 스타일

맞춤 앵커 링크7441550ff19d67aece0736607957bb92앵커 링크 텍스트5db79b134e9f6b82c0b36e0489ee08edCSS 스타일이 없는 경우 기본 앵커 링크 스타일은 다음과 같습니다.

기본 링크 스타일, 효과를 보려면 마우스를 사용하여 트리거하세요

080b747a20f9163200dd0a7d304ba388

a{color:#00F}

a:방문{color:#800080}

a:hover{color:#F00}

531ac245ce3e4fe3d50054a55f265927

7441550ff19d67aece0736607957bb92www.jb51.net5db79b134e9f6b82c0b36e0489ee08ed

a{color:#00F} 방문하지 않은 앵커 링크는 모두 파란색이고 밑줄이 그어져 있습니다

a:visited{color:#800080} 클릭하면 링크가 보라색으로 밑줄이 그어집니다

a:hover{color:#F00} 마우스를 누르면 빨간색으로 밑줄이 그어집니다

그러나 이 세 가지 색상은 너무 강하기 때문에 모든 웹 디자인 스타일과 일치하지 않는 경우가 많습니다. 다른 색상의 앵커 링크 스타일이 필요한 경우 위 세 가지 스타일에 따라 CSS의 색상과 배경만 수정하면 됩니다.

앵커 링크에 밑줄을 쳐야 하는 이유는 무엇인가요?

사실 HTML이 처음 출시되었을 당시 브라우저는 지금만큼 발전하지 않았으며, 당시 컴퓨터 화면은 오늘날의 LCD 색상을 갖지 못했고, 심지어 많은 화면이 흑백이었습니다. 당시에는 링크인지 구분하는 방법이 대부분 흑백 디스플레이나 색맹 사용자를 위한 웹 페이지에서는 밑줄을 긋는 것이 가장 좋았습니다. 그렇지 않으면 사용자가 색상을 구분할 수 없었기 때문입니다. .

물론 미적 측면을 고려하여 현대 웹 디자인에서는 일반적으로 링크에 직접 밑줄을 긋지 않습니다. 다만, 색맹 사용자나 흑백 휴대폰 디스플레이 사용자를 배려하기 위해서는 사용자 마우스가 트리거될 때 밑줄이 그어지도록 CSS 스타일을 설정하는 것이 좋습니다.

앵커링크 대상 점프 창 설정

이 페이지의 링크를 열면 일부 링크를 열면 다른 창으로 팝업되고, 일부 링크를 열면 이 페이지가 바로 대체됩니다. 이 점프 방법은 앵커 링크의 대상 속성을 사용하여 점프 창을 설정할 수 있습니다.

_self 현재 창이 열려 있으며 앵커 링크는 기본적으로 현재 브라우저 창으로 이동합니다. 즉, 기본 target="_self"

<a href="http://www.jb51.net/" target="_self">这里是当前新窗口显示E维科技首页</a>

_blank 새창이 열립니다

<a href="http://www.jb51.net/" target="_blank">这里是打开新窗口显示E维科技首页</a>

이름 없는 대상이 새 창에서 열립니다

<a href="http://www.jb51.net/" target="_weigeti"> 如果这里面的_weigeti不是网页内部的name或id，就网页中所有target="_weigeti" 链接都在同一个新窗口打开，而_blank每个链接都打开不同新窗口 </a>

프레임 이름 또는 ID

<a href="http://www.jb51.net/" target="weigeti">点击这里，将在下面name="weigeti" 的框架里面显示E维科技首页，不会跳转新窗口或者替换当前窗口</a>
<iframe name="weigeti"></iframe>

_parent 상위 창은 열리고 연결된 파일을 상위 프레임세트 또는 연결된 프레임이 포함된 상위 창에 로드합니다. 링크가 포함된 프레임이 중첩되지 않은 경우 링크된 파일은 _self 매개변수와 마찬가지로 브라우저의 전체 화면 창에 로드됩니다.

<iframe>
   <a href="http://www.jb51.net/" target="_parent">这里是框架内部</a>
</iframe>

_top 프레임의 최상위 수준 , 예를 들어 웹페이지 B는 네트워크 A의 iframe에 포함되고, 웹페이지 C는 웹페이지 B의 iframe에 포함됩니다.

<iframe>
   <iframe><a href="http://www.jb51.net/" target="_top">这里是框架内部的框架</a></iframe>
</iframe>

웹 페이지 C의 링크 설정 target=_parent가 웹 페이지 B를 제거하고 A의 웹 페이지 C에 링크 페이지를 직접 삽입하는 경우

그리고 웹페이지 C에서 target=_top인 경우 모든 iframe에서 빠져나와 C의 링크 페이지로 바로 이동합니다.

_top은 현재 브라우저 창 전체에서 연결된 문서를 열어 모든 프레임을 제거합니다.

SEO에서 앵커링크의 역할

외부링크는 항상 검색엔진 최적화의 핵심 중 하나로 여겨져 왔습니다. 이 때문에 다양한 형태의 외부링크가 등장했지만, 모든 외부링크가 SEO에 효과적인 것은 아닙니다.

JS로 작성된 외부 링크는 SEO에 적합하지 않습니다

검색 엔진은 상대적으로 Javascript를 인식하는 것을 꺼려하므로 이해하기 쉽습니다.

<a href="#" onclick="this.href='http://www.jb51.net/'">这样的链接对SEO无效</a>
<a href="#" onclick="window.open('http://www.jb51.net/');">这样的链接对SEO无效，甚至在Chrome等浏览器下都无法打开</a>

링크 rel=nofollow도 SEO에 유효하지 않습니다

다른 웹사이트와 링크를 교환하고 소스 코드를 통해 다른 웹사이트가 귀하의 링크에 rel=nofollow 속성을 추가한 것을 발견하면 검색 엔진에서 해당 링크를 크롤링하지 않는다는 의미입니다.

<a href="http://www.jb51.net/" rel="nofollow">这样的链接对SEO无效</a>

<meta name="robots" content="nofollow" />
<a href="http://www.jb51.net/">如果网页开头有上面一句话，那么这个网页内部所有链接都不会会搜索引擎抓取，所以对SEO无效</a>

링크 및 배경색은 SEO에 효과적이지 않습니다

Google 검색에서는 베이징과 동일한 색상의 외부 링크를 단속하는 새로운 알고리즘을 출시했으며 이러한 외부 링크는 일반적으로 블랙 링크로 간주됩니다.

<style type="text/css">
#vgtlink{background:#FFF}
#vgtlinka{background:#FFF}
</style>
<div id="vgtlink">
  <a href="http://www.jb51.net/" id="vgtlinka">这样的链接对SEO无效</a>
</div>

 <a href="http://www.jb51.net/" style="background:#FFF">这样的链接对SEO也无效</a>