아름다운 코드는 아름다운 웹사이트의 기초입니다. 우수한 CSS는 똑같이 우수한 HTML 위에만 존재합니다. 깔끔하고 시맨틱한 HTML 코드는 웹사이트를 더욱 강력하게 만듭니다. 이 글에서는 웹 디자인에 종사하는 모든 사람에게 적합한 깔끔한 웹 디자인 코드를 달성하기 위한 12가지 법칙을 설명합니다.
1. 엄격한 DOCTYPE을
수행하려면 올바르게 수행하십시오. HTML 4.01이든 XHTML 1.0이든 모두 엄격 모드를 제공합니다. 엄격 모드를 사용하면 코드가 오류를 숨기지 않도록 할 수 있습니다.
2. 문자 집합 선언, 특수 문자는 인코딩되어 처리됩니다.
문자 집합 선언은 제목을 포함하여 웹 페이지의 모든 내용을 브라우저가 알 수 있도록 hea> 부분 앞에 배치해야 합니다. 또한 &와 같은 일부 특수 문자는 가장 안전한 방법인 &로 대체하는 것이 가장 좋습니다.
3. 적절한 잠금 및
들여쓰기는 웹 페이지 렌더링에 영향을 미치지 않지만 소스 코드 읽기 경험을 크게 향상시킵니다. 들여쓰기에 대한 특정 규칙은 없지만 전체적으로 일관성을 유지하는 것이 좋습니다.
4. CSS와 JavaScript를 외부 파일
에
넣습니다. CSS와 JavaScript를 참조용으로 외부 파일에 넣으면 단일 웹 페이지의 크기가 줄어들 뿐만 아니라 다른 웹 페이지에서도 이러한 코드를 공유할 수 있습니다.동일한 코드의 반복 다운로드를 최소화하세요.
5. 아래 표시된 대로 태그 태그를 올바르게 중첩합니다
. 코드의 첫 번째 줄에서는 h1> 태그가 a> 태그에 중첩되어 있지만 대부분의 브라우저에서는 이를 올바르게 렌더링하지만 이는 좋은 습관이 아닙니다. 그러나 인라인 개체, 인라인 개체에는 블록 개체가 포함되어서는 안 됩니다.
6. 불필요한 div를 제거합니다.
Div는 종종 남용됩니다(특히 현재 DIV+CSS 신화 - 번역기에서). 사람들은 CSS 스타일을 할당할 수 있도록 모든 것을 div에 넣기를 원합니다. 부풀어 오르다.
7. 더 나은 명명 규칙을 사용하십시오.
아래와 같이 Cat의 CSS 클래스 이름은 빨간색 이탤릭체로 지정됩니다. 이는 Cat이 빨간색 이탤릭체를 사용함을 의미합니다. Cat을 파란색 굵은체로 변경하려면 어떻게 해야 합니까?
8. 아래 그림과 같이 CSS를 사용하여 텍스트 서식을 제어해 보세요
. 대문자를 직접 사용하지 마세요. CSS를 사용하여 텍스트 서식을 제어하면 더 유연해집니다.
9. 본문에 독립적인 클래스/id를 할당합니다
. 페이지의 모든 개체가 본문에 위치하므로 페이지의 모든 개체를 쉽게 찾을 수 있는 독립적인 클래스/id를 body 태그에 할당합니다.
10. 확인
말할 필요도 없이 웹 페이지의 코드를 가능한 한 많이 확인해야 합니다. 일부 코드 오류는 브라우저에 의해 자동으로 수정될 수 있지만 일부 오류는 특히 엄격 모드에 있을 때 나쁜 결과를 초래할 수 있습니다. 아무것도 하지 않더라도 녹색 W3C 인증 마크를 보는 것만으로도 기분이 좋아질 수 있습니다.
W3C 검증을 통과하기 위해 엄격한 기준을 적용할 필요는 없습니다. W3C 검증 결과만 고수하면 W3C 표준에 많은 버그가 있을 수 있습니다. 100 %W3C 검증을 통해 자신의 웹사이트가 IE6을 지원하지 않는다고 선언하면 적어도 중국에서는 이득보다 손해가 더 클 것입니다. - 번역기
11. 합리적인 구조적 순서
웹페이지 구조를 논리적 순서로 유지하십시오.
12. 최선을 다하십시오.
처음부터 작성하는 경우 위의 원칙을 유지하는 것이 훨씬 쉽습니다. 이전 코드를 수정해야 한다면 일부 CMS 시스템의 잘못된 코딩은 문제가 될 것입니다. , 또는 귀하의 대형 웹사이트에는 변경해야 할 사항이 너무 많습니다. 어떤 일이 있어도 항상 좋은 습관을 유지하는 것이 매우 중요합니다.