A의 의미론, 작문 및 모범 사례를 연결하십시오.
Javaeye 에서이 주제를 보면서 토론은 매우 흥미로 웠고 나는 도울 수 없었지만 참여할 수 없었습니다. 의미 론적 사고
우선, 링크 A 및 버튼 버튼은 시맨틱이며 사용의 편의로 인해 교체 할 수 없습니다. a는 앵커의 약어, 탐색 또는 찾기에 사용되는 앵커 포인트입니다. 일반적인 사용은 다음과 같습니다.
<a href = http : //www.w3c.org/> w3c 웹 사이트 </a> <a name = 앵커 -one> 이것은 앵커 1의 위치입니다. </a> <a href =#앵커 -one> 링크 링크 </a>
이름 및 HREF 속성을 동시에 지정할 수도 있습니다. 이것이 기본 지식입니다. 궁금한 점이 있으면 HTML 4.01 사양을 참조하십시오.
버튼 (버튼 및 <입력 유형 = 버튼 /제출 /> 포함)에 대해 이야기 해 봅시다. 의미 적으로 버튼은 양식의 일부이며 트리거 된 동작은 양식과 관련이 있습니다. 양식 작동이 전혀 없으면 버튼을 사용해서는 안됩니다. 몇 가지 예제 :
위의 그림은 일부 링크이지만 버튼처럼 보이지만 의미 적으로 a입니다.
위 그림의 디스플레이 및 정렬 버튼은 작동 양식입니다. 의미 적으로 버튼이나 입력을 사용하는 것이 더 적절합니다. (참고 : Taobao 검색 결과 페이지는 현재 점진적인 향상을 위해 A를 사용하고 있으며 아래에 언급 될 것입니다).
요컨대, 링크와 버튼에는 자체 의미 및 사용 시나리오가 있으며 마음대로 교체 할 수 없습니다. 쓰기 분석
세상은 결코 그렇게 단순하지 않습니다. 오늘날의 JavaScript 웹 세계에서 링크 A는 종종 JS 이벤트를 트리거하는 데 사용됩니다.
<a href = onclick = something ()> 테스트 1 </a> <a href =# onclick = onclick = something (); return false >> test 2 </a> <a href = javaScript : void (0) onclick = something () >> test 3 </a> <a href = javascript : void something ()> test 4 </a>
우선, HREF가 IE에 따라 자동으로 완료되기 때문에 첫 번째 작문 방법에는 문제가 있습니다.
두 번째로 작성하는 두 번째 방법은 OnClick 이벤트에서 기본 이벤트를 직접 방지하므로 href = #의 #은 실제로 모든 값이 될 수 있습니다. # 사용은 JS가 없을 때 클릭 한 후이 페이지에 유지됩니다 (참고 : A가 한 화면 아래에 있으면이 쓰기 방법으로 인해 페이지가 상단으로 롤백됩니다).
작문의 세 번째 방법은 HREF 값이 JavaScript 의사 프로토콜이고 void는 JavaScript (예 :!, typeof)의 단일 연산자라는 것입니다. 공극 연산자의 기능은 다음 표현식 만 실행하고 값을 반환하지 않는 것입니다. Void (0)는 기본 이벤트를 차단하는 것 같습니다. 그러나 실제로 다음과 같은 글쓰기 방법은 괜찮습니다.
<a href = javaScript : void (1) onclick = something () >> 테스트 3 </a> <a href = javaScript :; onclick = somethings () >> 테스트 3 </a> <a href = javaScript : onclick = something () >> 테스트 3 </a> <a href = javaScript : true onclick = something () >> 테스트 3 </a>
a의 기본 작업은 JavaScript 유사 프로토콜의 내용이므로 void를 추가하거나 다른 이벤트를 트리거합니다. (참고 : Pseudo Protocol에 반환 값이있는 경우 Opera에서 HREF가 변경되므로 일반적으로 void (0) 또는 빈 진술을 작성합니다).
작문의 세 번째 방법을 이해 한 후, 당신은 작문의 네 번째 방법을 이해하게됩니다 : href = javaScript : void something (). 이러한 방식의 장점 중 하나는 마우스가 매달리면 사용자가 상태 표시 줄을 통해 실행될 기능을 볼 수 있다는 것입니다. 이것은 개발자에게는 이점이 될 수 있지만 일반 사용자에게는 신뢰가 실제로 증가할까요? 아니면 두려움이 있습니까? 데이터가 없으면 결론을 도출 할 수 없습니다.
위의 작문 방법 외에도, 또 다른 권장되는 쓰기 방법이 있으며, 이는 클래스 또는 ID에 후크를 추가 한 다음 JS의 후크를 통해 이벤트를 추가하는 것입니다. 반사
위의 글쓰기 스타일 중 가장 좋은 점에 대해 논의하고 싶지 않습니다. 원산지 질문에 대해 생각해 봅시다. 왜 우리는 A를 사용하여 JS 이벤트를 트리거합니까? 내가 생각할 수있는 이유는 다음과 같습니다.
떠 다니는 스타일 외에도 실질적인 이유가 없다는 것을 알 수 있습니다. 당분간 스타일 문제를 제쳐두고 예를 살펴 보겠습니다.
위의 것은 Google Reader의 작동 표시 줄입니다. 관심이 있으시면 Firebug도 마찬가지입니다. 사용 된 태그는 다음과 같습니다.
마우스의 매달린 스타일은 전혀 문제가되지 않습니다.
CSS에서는 Cursor : Pointer를 추가하십시오.
위의 예에서, 우리는 결론을 도출 할 수 있습니다. 내비게이션 또는 포지셔닝 시맨틱없이 JS 작업을 트리거하는 경우 SPAN 또는 기타 적절한 태그를 사용할 수 있으며 잘못된 문제를 사용할 필요가 없습니다 (A를 사용하여 문제를 일으킬 필요가 없습니다. 먼저 기본 이벤트를 제거해야합니다.
물론, 링크 자체 인 경우 점진적인 향상된 관점에서 내비게이션 전에 일부 JS 논리 또는 양식 정렬 응용 프로그램을 추가하려면 가장 모범 사례는 JS를 지원하지 않는 브라우저에서 유용성을 보장 할 수 있도록 모든 HREF 값을 작성하는 것입니다. 모범 사례
요약이 아니며 일회성 마무리가 아닙니다. 모범 사례는 일련의 원칙 일뿐입니다. 코드를 작성하기 전에 그것에 대해 생각해야합니다.
코드에는 생명이 있고 태그 왕국은 동물원이며 친숙하며 모든 것이 사랑 스럽습니다.