답변:
앵커 태그의 주요 사용은 - <a></a>- 같다 하이퍼 링크 . 그것은 기본적으로 그들이 당신을 어딘가로 데려가는 것을 의미합니다. 하이퍼 링크 href는 위치를 지정하기 때문에 속성이 필요합니다 .
#하이퍼 링크 내의 해시 는 창을 스크롤 할 html 요소 ID를 지정합니다.
href="#some-id"현재 페이지에서와 같은 요소로 스크롤합니다 <div id="some-id">.
href="https://stackoverflow.com//site.com/#some-id"site.com해당 페이지의 ID 로 이동하여 스크롤합니다.
href="#"ID 이름을 지정하지 않지만 해당 위치가 있습니다 (페이지 상단). 로 앵커를 클릭하면 href="#"스크롤 위치가 맨 위로 이동합니다.
하이퍼 링크 자리 표시자가 적합한 예는 템플릿 미리보기입니다. 템플릿에 대한 단일 페이지 데모 <a href="#">에서 앵커 태그가 하이퍼 링크이지만 어디로도 가지 않도록 자주 보았습니다 . href속성을 비워 두지 않겠습니까? 빈 href속성은 실제로 현재 페이지에 대한 하이퍼 링크입니다. 즉, 페이지를 새로 고칩니다. 앞에서 설명한 것처럼 href="#"하이퍼 링크이기도하며 스크롤이 발생합니다. 따라서 하이퍼 링크 자리 표시 자에 대한 가장 좋은 해결책은 실제로 href="#!"페이지의 요소가 id="!"누구에게 있지 않기를 바라는 것입니다.
궁금한 또 다른 질문은 "href 속성을 해제하지 않는 이유는 무엇입니까?"입니다. 내가 들었던 일반적인 대답은 그 href속성이 필요하다는 것이므로 앵커에 "있어야한다". 이것은 거짓입니다! 이 href속성은 앵커가 실제로 하이퍼 링크 인 경우에만 필요합니다! w3에서 이것을 읽으십시오. 그렇다면 자리 표시 자에게만 사용하지 않는 이유는 무엇입니까? 브라우저는 요소의 기본 스타일을 렌더링하고 href 속성이없는 앵커 태그의 기본 스타일을 변경합니다. 대신 일반 텍스트로 간주됩니다. 요소에 대한 브라우저의 동작도 변경됩니다. href 속성이없는 앵커에 마우스를 올리면 상태 표시 줄 (화면 하단)이 표시되지 않습니다. 앵커에 자리 표시 자 href 값을 사용하여 하이퍼 링크로 취급되도록하는 것이 가장 좋습니다.
스타일과 동작의 차이를 보여주는 이 데모를보십시오 .
.click()메소드 를 사용하고 싶다면 <div></div>작동하지 않습니다. 앵커에 있거나 touch이벤트 를 사용해야 합니다.
"#"기호를 무언가의 href로 사용한다는 것은 다른 URL이 아니라 같은 페이지의 다른 id 또는 name 태그를 가리키는 것을 의미합니다. 예를 들면 다음과 같습니다.
<a href="#bottomOfPage">Click to go to the bottom of the page</a>
blah blah
blah blah
...
<a id="bottomOfPage"></a>그러나 아이디 나 이름이 없으면 "어디에 없습니다."
다음 은 'name'또는 'id'의 HTML 앵커와 비슷한 질문입니다 .
<a href="#">...</a>"아무데도 가지 않았기" 때문에 여기에 왔으며 페이지를 떠나고로드 중 site.com/#이었습니다. 어떻게 가능합니까?
onclick이벤트 핸들러가 해당 요소에 연결되어 자바 스크립트 함수가 호출되어 해당 페이지로 리디렉션 되었기 때문일 가능성이 높습니다 .
불행히도, 가장 일반적으로 사용되는 <a href="#">것은 앵커처럼 동작하는 클릭 가능한 비 하이퍼 링크 자바 스크립트 코딩 요소를 원하는 게으른 프로그래머가 사용 하지만 하이퍼 링크가 아닌 요소의 클래스에 스타일을 추가 cursor: pointer;하거나 :hover스타일을 부여 할 수는 없으며 추가로 너무 게으른로 설정 href했습니다 javascript:void(0);.
이것에 대한 문제는 <a href="#" onclick="some_function();">불가피하게 자바 스크립트 오류로 끝나고 onclick javascript 오류가있는 앵커는 항상 그 뒤에옵니다 href. 일반적으로이 페이지 상단에 성가신 점프 인 끝,하지만 사용하는 사이트의 경우 <base>, <a href="#">같은 처리 <a href="[base href]/#">예상치 못한 탐색의 결과로. 만약 가능한 오류가 생성되면 영구 로그를 활성화하지 않으면 후자의 경우 오류가 표시되지 않습니다.
앵커 요소가하면 되는 비 앵커로 사용이 해야 그가 href에 폭넓게 javascript:void(0);의 이익을 위해 우아한 저하.
방금 페이지를 새로 고쳐야하는 임의의 예기치 않은 페이지 리디렉션을 디버깅하는 데 이틀을 낭비하고 마침내 클릭 이벤트를 발생시키는 함수까지 추적했습니다 <a href="#">. 교체 #와 javascript:void(0);그것을 해결했습니다.
내가 월요일에하고있는 첫 번째 일은의 모든 인스턴스의 프로젝트를 제거하는 것입니다 <a href="#">.
<base>정말 큰 차이를 만듭니다 #. 지적 해 주셔서 감사합니다!
정렬되지 않은 목록은 종종 메뉴로 사용하려는 의도로 만들어 지지만 li목록 항목은 텍스트입니다. 목록 li항목은 텍스트이므로 마우스 포인터는 화살표가 아니라 "I 커서"입니다. 사용자는 무언가를 클릭 할 수있을 때 마우스 포인터를 가리키는 손가락을 보는 데 익숙합니다. 태그 a안에 앵커 태그를 사용하면 li마우스 포인터가 가리키는 손가락으로 바뀝니다. 가리키는 손가락은 목록을 메뉴로 사용하기에 훨씬 좋습니다.
<ul id="menu">
<li><a href="#">Menu Item 1</a></li>
<li><a href="#">Menu Item 2</a></li>
<li><a href="#">Menu Item 3</a></li>
<li><a href="#">Menu Item 4</a></li>
</ul>목록이 메뉴에 사용되고 링크가 필요하지 않은 경우 URL을 지정할 필요가 없습니다. 그러나 문제는 href속성을 생략하면 <a>태그의 텍스트가 텍스트로 표시되므로 마우스 포인터가 I 커서로 돌아갑니다. I- 커서는 사용자가 메뉴 항목을 클릭 할 수 없다고 생각하게 할 수 있습니다. 따라서 여전히을 (를) 필요로 href하지만 어느 곳으로도 연결될 필요는 없습니다.
메뉴 목록에 많은 div또는 p태그를 사용할 수 있지만 마우스 포인터도 해당 메뉴에 대한 I 커서가됩니다.
메뉴 목록을 위해 서로 쌓인 버튼을 많이 사용할 수는 있지만 목록이 선호되는 것 같습니다. 그리고 아마도 이것이 href="#"아무데도 가리 키지 않는 이유 는 목록 태그 내부의 앵커 태그에서 사용됩니다.
CSS에서 포인터 스타일을 설정할 수 있으므로 다른 옵션입니다. href="#"어디까지가 그냥 몇 가지 스타일을 설정하는 게으른 방법이 될 수 있습니다.
빈 링크에 href = "#"을 사용할 때의 문제점은 원하는 조치가 아닐 수있는 페이지 맨 위로 이동한다는 것입니다. 이 문제를 피하려면 이전 브라우저 또는 HTML5가 아닌 doctype의 경우
<a href="javascript:void(0)">Goes Nowhere</a>내가 아는 한 일반적으로 JavaScript가 첨부 된 링크의 자리 표시 자입니다. 링크의 요점은 JavaScript 코드를 실행하여 제공됩니다. JS 지원 브라우저는 실제 링크 대상을 무시합니다. 브라우저가 JS를 지원하지 않는 경우 해시 마크는 기본적으로 링크를 no-op로 바꿉니다. 눈에 잘 띄지 않는 JavaScript를 참조하십시오 .
다른 답변 중 일부가 지적했듯이 a요소에는 href특성과# 가 자리 표시 자로 사용되지만 역사적인 유물이기도합니다.
에서 모질라 개발자 네트워크 :
href
이것은 하이퍼 텍스트 소스 링크를 정의하는 앵커의 단일 필수 속성이지만 HTML5에서는 더 이상 필요하지 않습니다. 이 속성을 생략하면 플레이스 홀더 링크가 작성됩니다. href 속성은 링크 대상 (URL 또는 URL 조각)을 나타냅니다. URL 조각은 현재 문서 내의 내부 대상 위치 (ID)를 지정하는 이름 앞에 해시 마크 (#)가 붙습니다.
또한 HTML5 사양에 따라 :
요소에 href 속성이없는 경우 요소는 요소의 내용만으로 구성되어 있고 관련이있는 경우 링크가 배치되었을 수있는 자리 표시자를 나타냅니다.
href 속성은 링크 리소스의 URL을 정의합니다. 앵커 태그에 href 태그가 없으면 하이퍼 링크가되지 않습니다. href 속성의 값은 다음과 같습니다.
1. Absolute path: move to another site like href="http://www.google.com"
2. Relative path: move to another page within the site like herf ="defaultpage.aspx"
3. Move to an element with a specified id within the page like href="#bottom"
4. href="javascript:void(0)", it does not move anywhere.
5. href="#" , it does not move anywhere but scroll on the top of the current page.
6. href= "" , it will load the current page but some browsers causes forbidden errors.
Note: When we do not need to specified any url inside a anchor tag then use
<a href="javascript:void(0)">Test1</a>