웹 페이지를 작성하는 것은 집을 짓는 것과 같기 때문에 집이 무너지지 않을 것입니다. 웹 페이지를 만들 때도 마찬가지입니다. 좋은 HTML 구조는 아름다운 웹 사이트를 만드는 시작입니다. 마찬가지로 좋은 CSS는 똑같이 좋은 HTML에만 존재하므로 깨끗하고 의미 있는 HTML의 장점은 많습니다. , 우리는 이것을 달성했나요? 함께 사진을 감상해 보세요:
위 그림은 두 가지 코드를 보여줍니다. 첫 번째 코드만 좋아할 것 같습니다. 적어도 그 구조가 신선해 보이도록 하지는 않겠습니다. 언뜻 보면 나쁜 코드처럼 보이는 코드, 사람들이 싫어하게 만드는 코드. 그렇다면 어떻게 좋은 코드, 깔끔한 코드를 작성할 수 있을까요? 앞으로 코드를 작성할 때 다음 12가지 원칙을 준수하면 코드의 품질이 향상되고, 작성한 코드가 모두에게 사랑받을 수 있다는 점을 함께 알아봅시다.
1. DOCTYPE 설명
어떤 일을 잘하려면 먼저 그 일을 해야 할 권리가 무엇인지 알아야 합니다. "DOCTYPE" 문처럼 HTML4.01을 사용할지, XHTML1.0을 사용할지, 아니면 현재 HTML5에서는 엄격한 규정을 사용할지 논의할 필요가 없습니다. 버전 또는 과도기 버전은 우리가 작성하는 코드를 잘 지원할 수 있습니다.
현재 레이아웃은 테이블 레이아웃 없이도 좋은 레이아웃을 만들 수 있으므로 전환 유형을 사용하는 대신 엄격한 "DOCTYPE" 사용을 고려할 수 있습니다. 이전 버전과의 호환성을 위해 HTML5 선언 모드를 사용하는 것이 좋습니다.
이에 대해 더 자세히 알고 싶으시면 다음을 클릭하세요:
W3C: 웹 문서에 사용할 권장 DTD
올바른 DOCTYPE으로 사이트를 수정하세요!
더 이상 과도기적 DOCTYPE을 사용하지 마세요.
2. 문자 세트 및 인코딩된 문자
각 페이지 시작 부분에서
에 문자 세트를 설정합니다. 여기서는 모두 "UTF-8"을 사용합니다<meta charset="UTF-8" />
. 그리고 일반적으로 페이지에 글을 쓸 때 "&"와 같은 기호를 자주 접하게 되므로 페이지에 "&"를 직접 작성해서는 안 됩니다.
이를 달성하려면 코드에서 문자 인코딩을 사용해야 합니다. 예를 들어 "&"를 사용하여 코드에서 바꿔야 합니다.
이에 대해 더 자세히 알고 싶으시면 다음을 클릭하세요:
위키피디아: UTF-8
문자 코드 문제에 대한 튜토리얼
확장 ASCII 테이블
3. 올바른 코드 들여쓰기
페이지 편집에서 코드 들여쓰기가 올바른지 여부는 웹 사이트의 기능에 영향을 미치지 않지만, 표준화된 들여쓰기 원칙이 없으면 코드를 읽는 사람들이 매우 화를 낼 것이므로 올바른 코드 들여쓰기는 웹 사이트의 기능을 향상시킵니다. 코드의 가독성. 표준 프로그램의 들여쓰기는 탭 문자(또는 공백 몇 개)로 해야 합니다. 좀 더 생생하게 하려면 기사 시작 부분의 그림을 살펴보거나, 읽은 후 아래 그림을 살펴보겠습니다. 나중에 사람들이 즐겁게 읽을 수 있도록 코드를 작성하는 방법을 알게 될 것입니다.
말할 필요도 없이 모두가 아래 코드를 좋아할 것입니다. 이는 단지 습관의 문제일 뿐이지만, 다른 사람과 자신에게 유익이 되도록 처음부터 잘 하는 것이 좋습니다. 이 측면에 대한 소개는 다음을 참조할 수도 있습니다. HTML TIDY로 웹 페이지 정리.
4. CSS 스타일과 Javascript 스크립트를 외부적으로 연결
페이지에 CSS 스타일을 작성하는 방법에는 여러 가지가 있습니다. 그 중 일부는 스타일을 페이지의 "head"에 직접 입력하는 것입니다. 이는 마크업을 망칠 뿐만 아니라, 또한 이러한 스타일도 이 HTML 페이지에만 적합합니다. 따라서 CSS를 분리하여 외부에 저장해야 후속 페이지에서도 이러한 스타일을 연결할 수 있습니다. 페이지를 수정해야 하는 경우 스타일 파일만 수정하면 됩니다. 아래 사진과 같습니다:
위에서 이야기하는 것은 단지 스타일일 뿐입니다. 사실 JavaScript 스크립트는 CSS 스타일과 동일합니다. 제가 궁극적으로 표현하고 싶은 것은 사진과 텍스트로 "웹페이지를 만들 때 CSS 스타일과 자바스크립트 스크립트를 별도의 파일에 넣어서 링크를 통해 참조하도록 해보세요. 이렇게 하는 것이 가장 큰 장점은 스타일과 스크립트를 쉽게 관리하고 수정할 수 있습니다”
. 5. 올바른 라벨 중첩
HTML을 작성할 때 HTML 작성을 완료하는 데 도움이 되는 태그의 계층적 중첩이 항상 필요하지만 이러한 HTML의 중첩에 대해 자세히 설명하려면 여러 장을 사용해야 할 수도 있습니다. 그래서 제가 오늘 여기서 말하고 싶은 것은 HTML을 작성할 때 다음과 같은 엄청난 실수를 해서는 안 된다는 것입니다.
위 그림의 구조는 우리에게 공통적입니다. 예를 들어, 홈페이지 제목은 "" 태그에 넣을 수 없습니다. 인라인 요소에는 요소를 넣을 수 없습니다. 위의 내용은 하나의 예일 뿐이며 일상적인 생산 과정에서 모든 사람이 이러한 실수를 저지르지 않기를 바랍니다.
6. 불필요한 태그 삭제
먼저 예시의 스크린샷을 살펴보겠습니다.
위 그림은 분명히 탐색 메뉴를 생성한 것입니다. 위 예에는 "ul#bigBarNavigation" 목록을 래핑하는 "p#topNav"가 있고 "p" 및 "ul" 목록은 모두 블록 요소입니다. 여기에서 "ul"을 감싸기 위해 사용된 "p"는 전혀 효과가 없습니다. "p"의 등장은 웹 페이지를 만들 때 큰 이점을 제공하지만, 일반적으로 이러한 세부 사항에 주의를 기울이는 경우가 있는지 궁금합니다. 나도 그런 실수를 했다. 당신도 그런 경험이 있다면, 오늘부터 우리는 그런 실수를 바로잡기 위해 함께 노력할 것이다.
라벨을 올바르게 사용하는 방법에 대한 정보를 보려면 관심이 있는 경우 다음을 클릭하세요. pitis: 정의 및 치료 방법
7. 더 나은 이름을 사용하세요
여기에 언급된 이름 지정은 페이지의 관련 요소에 대한 클래스 이름 또는 ID 이름을 정의하는 것입니다. 예를 들어 요소에 빨간색 글꼴이 있으면 "red"를 추가하거나 심지어 레이아웃에도 "를 씁니다. left-sidebar" 등이 있지만 이 요소가 "빨간색"으로 정의되어 있고 고객이 며칠 후에 "파란색"을 요청하면 어떻게 될지 생각해 본 적이 있습니까? 즉, 당시의 "왼쪽 사이드바" 사이드바는 더 이상 왼쪽이 아닌 오른쪽에 배치되기를 원했던 것입니다. 이처럼 우리가 이전에 명명한 이름은 그림과 같이 전혀 의미가 없다고 할 수 있습니다. 아래 그림 표시:
그런 다음 좋은 이름을 정의하는 것이 매우 중요합니다. 귀하의 코드를 이해할 수 있을 뿐만 아니라 다른 사람들도 귀하의 코드를 쉽게 이해할 수 있습니다. 예를 들어 좋은 클래스 이름과 ID 이름 "mainNav", "subNav", "footer" 등이 있습니다. ., 그는 관련된 내용을 설명할 수 있습니다. 나쁜 점은 위에서 언급한 바와 같습니다.
이에 대해 더 자세히 알고 싶으시면 다음을 클릭하세요:
CSS 클래스 및 ID 이름 표준화
CSS 팁 #2: CSS의 구조적 명명 규칙
CSS 코딩: 명명 규칙의 의미론적 접근
CSS 명명 규칙 및 코딩 스타일
8. CSS 버전 나가기
메뉴를 디자인할 때 모든 메뉴 옵션의 텍스트를 모두 대문자로 표시해야 하는 경우가 있습니다. 일반적으로 HTML 태그에서 직접 대문자로 설정하시나요? 그렇다면 앞으로 더 나은 확장성을 위해 HTML에서 모두 대문자로 설정하면 안 됩니다. 더 나은 해결책은 CSS를 통해 달성하는 것입니다.
9.
의 클래스 이름 또는 ID 이름을 정의합니다.웹페이지를 만들 때 이런 문제가 발생했는지 모르겠습니다. 전체 웹사이트가 동일한 레이아웃과 구조를 사용합니다. 즉, 페이지 레이아웃에 동일한 구조와 동일한 클래스 이름을 사용합니다. 귀하의 상사는 고객 요구에 따라 페이지 레이아웃을 사이드바와 기본 콘텐츠 간에 바꿔야 한다고 말합니다. 이때 레이아웃을 변경하기 위해 전체 페이지의 구조를 수정하고 싶지는 않을 것입니다. 따라서 페이지의 "
"에 특수 클래스 이름이나 ID 이름을 정의하는 것이 좋습니다. 원하는 것을 쉽게 얻을 수 있다는 것. 이렇게 사용해 보셨는지 모르겠습니다:
"
"에 대한 고유한 클래스 및 ID 이름을 정의하는 것은 위와 같이 레이아웃을 변경하는 데 도움이 될 뿐만 아니라 때로는 페이지의 특정 부분을 구현하는 데 도움이 될 수 있다는 점입니다. 특수 효과는 다른 페이지의 성능에 영향을 미치지 않습니다. 왜 그런 기능이 있는지 설명할 필요는 없을 것 같습니다. 각 페이지의 콘텐츠는 ""의 하위 요소이기 때문입니다.이에 대해 더 자세히 알고 싶으시면 다음을 클릭하세요:
CSS 제어 및 특이성을 높이기 위해 신체 ID
사례 연구: 신체 클래스로 스타일 재사용
10. 코드 확인
사람들은 필연적으로 실수를 하게 되는데, 코드를 작성할 때도 마찬가지입니다. 예를 들어 요소 태그를 닫는 것을 잊어버리고 요소의 필수 속성을 작성하는 것을 기억하지 못하는 경우도 있습니다. 주어지지 않을 실수도 있습니다. 어떤 비참한 결과를 가져오더라도 예측할 수 없는 실수도 가져올 것입니다. 따라서 코드 작성을 마친 후 코드를 검증하는 것이 좋습니다. 확인된 코드는 확인되지 않은 코드보다 항상 좋습니다.
귀하의 코드를 효과적으로 검증하기 위해 관련 도구나 브라우저 플러그인을 사용하여 코드를 완료할 수 있습니다. 코드에 오류가 없으면 W3C 검증 도구는 사용자 앞에 녹색 텍스트를 표시합니다. 이는 사용자가 작성한 코드가 W3C 표준을 견딜 수 있음을 다시 한 번 증명하기 때문에 매우 흥분됩니다.
이에 대해 더 자세히 알고 싶으시면 다음을 클릭하세요:
W3C 마크업 검증 서비스
XHTML-CSS 검사기
무료 사이트 검사기(단지 한 페이지가 아닌 전체 사이트를 확인)
11. 논리 순서
이는 드문 오류 상황입니다. 왜냐하면 모든 사람이 페이지를 작성할 때 논리적 순서를 방해하지 않을 것이라고 생각하기 때문입니다. 즉, 가능하다면 웹 사이트에 대해 머리글을 먼저 쓴 다음 본문을 논리적 순서로 작성하는 것이 가장 좋습니다. , 마지막으로 바닥글입니다. 물론, 때때로 특별한 상황이 발생할 수 있습니다. 바닥글 부분은 우리 코드의 사이드바 위에 있습니다. 이는 귀하의 웹사이트 디자인 요구 사항에 가장 적합하기 때문일 수 있지만, 이를 구현하는 다른 방법이 있다면 해야 합니다. 바닥글을 페이지 끝에 넣은 다음 특정 기술을 사용하여 디자인 요구 사항을 충족하도록 만드세요.
위에서 우리는 깨끗한 HTML 코드 작성을 시작하는 몇 가지 방법을 논의했습니다. 프로젝트 초기에는 매우 쉽지만, 기존 코드를 수정해야 한다면 다소 어려울 것입니다. 위에서 제가 말한 내용은 주로 훌륭하고 깔끔한 HTML 코드를 작성하고 이를 고수하는 방법을 배우는 방법을 알려주는 것입니다. 이 기사를 읽은 후 처음부터 시작하여 다음 프로젝트에서 깨끗한 HTML 코드를 작성하도록 주장할 수 있기를 바랍니다.
관련 문서: 가장 일반적인 HTML 태그 실수 10가지
영어 출처: 코드를 깨끗하게 유지하기 위한 12가지 원칙
위 내용은 코드를 깔끔하게 유지하는 11가지 규칙의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
