좋은 HTML 코드는 아름다운 웹 사이트의 기초입니다. 다른 CSS를 가르 칠 때 항상 먼저 말합니다. 좋은 CSS는 좋은 HTML 태그에만 존재합니다. 집에 탄탄한 기초가 필요한 것 같아요? 깔끔하고 시맨틱 한 HTML 태그에는 많은 장점이 있지만 비우호적 인 태그 쓰기를 사용하는 웹 사이트가 여전히 많이 있습니다.
기록되지 않은 HTML 태그를 살펴보고 깔끔하고 표준 HTML 태그를 작성하는 방법을 배우기 위해 토론 해 보겠습니다.
WULIN.com 참고 : Chris Cyier는 여기에서 두 개의 문서를 사용 하여이 기사의 코드를 설명합니다 : 나쁜 코드 및 좋은 코드. 공부할 때이 두 문서를 참조하십시오.이렇게하려면 올바른 단계를 따라야합니다. HTML 4.01 또는 XHTML 1.0을 사용할 것인지에 대해 논의 할 필요가 없으며, 둘 다 올바른 코드 작성에 엄격한 요구 사항을 제시합니다.
그러나 무엇이든간에, 우리의 코드는 레이아웃에 테이블 테이블을 사용해서는 안되므로 과도기 Doctype을 사용할 필요가 없습니다.
관련 리소스 :<head> 섹션에서 첫 번째는 캐릭터 세트를 선언하는 것입니다. UTF-8을 사용했지만 <title> 뒤에 넣었습니다. 브라우저가 무엇이든 읽기 전에 어떤 문자를 처리할지 알고 싶어하기 때문에 캐릭터 세트 선언을 상단으로 옮기자.
캐릭터 세트 선언의 위치 외에도 <title>에 등장하는 이상한 캐릭터는주의를 기울여야하는 문제입니다. 예를 들어, 가장 일반적으로 사용되는 및 문자는 문자 엔티티 로 대체되어야합니다.
관련 리소스 :코드를 작성할 때, 들여 쓰기는 웹 페이지의 모양에 영향을 미치지 않지만 적절한 압축을 사용하면 코드를 더 읽기 쉽게 만들 수 있습니다. 표준 계약 방법은 새 요소를 시작할 때 탭 비트 (또는 몇 개의 공백)를 들여 보내는 것입니다. 또한 닫기 요소의 레이블은 시작 레이블과 정렬되어 있습니다.
Wulin.com 참고 : 일부 친구들은 코드를 작성할 때 들여 쓰기가 더 번거 롭다고 생각합니다. 이 코드를 읽고 있다면 아무런 문제가 없을 수 있습니다. 괜찮다고 생각하십시오. 그러나 공동 작업이거나 공개적으로 공개되고 공유되면 아름답고 읽기 쉬운 코드를 작성해야합니다. 관련 리소스 :<head> 섹션으로 확장 된 CSS 코드가 있습니다. 단일 HTML 페이지에서만 작동 할 수 있기 때문에 이것은 심각한 파울입니다. 독립형 CSS 파일을 유지한다는 것은 향후 웹 페이지를 링크하고 동일한 코드를 사용할 수 있음을 의미합니다. JavaScript도 마찬가지입니다.
Wulin.com 참고 : 물론,이 문제는 그렇게 심각하지 않을 수 있습니다. 예를 들어, WordPress 테마로 <head>에 작성된 코드는 모든 WordPress 페이지에 사용됩니다. 그러나 <head>에 CSS를 쓰는 것은 여전히 매우 나쁜 습관입니다.웹 사이트 제목에서 <H1>을 웹 사이트 제목 태그로 사용합니다. 홈페이지에 대한 링크가 추가되었지만 링크가 <H1> 외부에 배치되었고 링크가 <H1>을 둘러싸고 있다는 오류였습니다. 이 간단한 중첩 오류는 대부분의 브라우저에서 잘 처리되지만 기술적으로는 작동하지 않습니다.
앵커 링크는 인라인 요소이고 <H1> 제목은 블록 요소이며 블록 요소는 인라인 요소에 배치해서는 안됩니다.
누가 먼저 그것을 발명했는지는 모르겠지만, Divitis라는 단어가 마음에 듭니다.이 단어는 HTML 태그에서 DIV를 과도하게 사용하는 것을 의미합니다. Web Design 학습의 특정 단계에서 우리는 편리한 레이아웃과 스타일을 달성하기 위해 다른 요소를 랩핑하기 위해 DIV를 사용하는 방법을 배웁니다. 이것은 div 요소의 남용으로 이어집니다. 우리는 필요한 지역과 완전히 불필요한 영역을 사용합니다.
위에 표시된 예에서, 우리는 Div (topnav)를 사용하여 UL 목록 (bigbarnavigation)을 포함합니다. 그러나 Div와 UL은 모두 블록 요소이므로 UL 요소를 감싸기 위해 DIV를 사용할 필요가 없습니다.
관련 리소스 :이제 이름 지정 관리에 대해 이야기합시다. 이전 기사에 언급 된 예에서 UL은 ID 이름 bigbarnavigation을 사용합니다. 내비게이션은 블록의 내용을 매우 잘 설명하지만 크고 Bar는 컨텐츠보다는 디자인을 설명합니다. 이 메뉴는 큰 도구 모음이지만이 메뉴의 디자인이 수직이되면 이름이 혼란스럽고 관련이없는 것처럼 보입니다.
MainNav, Subnav, 사이드 바, 바닥 글, 메타 데이터와 같은 친절한 클래스 및 ID 이름. 나쁜 클래스 및 ID 이름은 BigBoldHeader, Leftsidebar 및 RoundedBox와 같은 디자인을 설명합니다.
wulin.com 참고 : Chris는 콘텐츠 또는 디자인으로 이름을 지정할지 강조합니다. 개인적으로, 나는 ID와 클래스 이름에 추가하여 소문자를 대문자 또는 소문자로 추가 하거나 단어의 초기 문자를 활용하고 싶습니다. 우선, 완전히 자본화 된 단어는 읽기에 도움이되지 않고 배제되지 않습니다. 단어의 첫 글자의 소문자 또는 대문자를 사용할지 여부는 개인 습관에 따라 다릅니다. 어떤 규칙을 사용하든 일관성이 있어야합니다 . 한 번에 첫 번째 글자에서 순전히 소문자가되고 대문자가되지 않으면 매우 혼란 스러울 것입니다.또한, 개인적으로 혼란스러워하는 것은 밑줄 _, 하이픈 여부, 더 긴 이름을 사용하지 않는 것입니다. 아니면 너무 복잡하다고 생각할 수도 있습니다. 모든 유형을 사용하는 것이 좋으며 일관성을 유지해도 괜찮습니다.
이전 페이지 1 2 다음 페이지 전체 텍스트 읽기