주니어 프론트엔드가 어떻게 고품질 코드를 작성할 수 있나요?

One HTML
1. DOCTYPE의 선언은 기본적으로 이제 H5의 세계이며, 단축키로 직접 생성할 수 있습니다.
2. 문자 세트 선언(일반적으로 ), 공백과 같은 기호 문자를 이스케이프 처리해야 합니다. -  &-amp;
3. 들여쓰기를 수정합니다. 이제 FamilyMart의 코드에는 들여쓰기로 구성되어 있어서 별 필요 없이 바로 사용 가능합니다
4.css와 js는 외부 링크 사용을 강조합니다. 이제 각 컴포넌트에 컴포넌트화된 것을 더 적게 쓸 수 있다는 느낌이 듭니다. 피부 변화 등의 효과를 쉽게 구현해보세요
5. 태그 중첩 수정
6. 불필요한 태그를 삭제하세요. 예를 들어

의미상 div와 ul은 모두 블록 수준 요소이므로 외부 div를 삭제할 수 있습니다
7. 페이지를 만들 때 영역을 설정합니다. .전체 사이트 레이아웃이 완료된 후 작은 영역 블록을 조정하려면 본문이나 근처의 큰 영역 블록에 별도의 클래스(ID도 가능)를 직접 정의하고 스타일 처리를 하면 됩니다
8. 그림, 스타일, 스크립트 및 기타 미디어 파일 URL(http:, https:)의 프로토콜 부분은 이 두 가지를 충족할 수 없는 경우가 아니면 생략하세요. 예를 들어,
9. 들여쓰기에는 두 개의 공백을 사용합니다(가능한 한 균일할 필요는 없음). 코드 형식을 구현하려면 10. 태그 이름, 속성, 속성 값에는 소문자를 사용해보세요. ​​
11. 요소 내용에서 불필요한 공백을 줄이고, 내용 끝에 공백을 사용하지 마세요.
12. 기능을 설명하는 적절한 설명을 추가합니다.
13. 할 일 항목을 표시하려면 TODO를 추가합니다. 예:

• Apples
• Oranges

14.h5 중간 차선 태그 필요하지 않습니다. 폐쇄형, 라벨을 직접 작성하세요. 예를 들어
캔버스 애니메이션과 같은 멀티미디어 요소를 사용하면 다른 액세스 가능한 콘텐츠가 제공됩니다. 예를 들어
17. 스타일 시트 참조 시 type은 기본적으로 text/css를 지정하며 생략 가능합니다. 스크립트 참조 시 type은 기본적으로 text/javascript를 지정하며 이는 생략 가능
18. 속성 값은 큰따옴표를 사용하세요 ​​
19. 공개된 코드는 압축해야 합니다

두 번째 CSS
1. Reset을 사용하세요. 먼저, 각 브라우저의 기본 속성 값이 다르고 호환성을 고려해야 하기 때문에 역할을 명확히 합니다. 전역 재설정은 비효율적이므로 사용하지 마십시오.
2. 속성 순서대로 레이아웃을 변경하는 내용은 앞에 기재(display, margin, padding, position 등), 기타는 뒤에 기재(알파벳순으로 정렬 가능)
3. 의미 있는 id 정의 짧고 명확한 클래스 이름, 여러 단어에 커넥터 사용
4. 큰 블록에서 ID를 정의하고

...nMultiple과 같은 블록에서 요소를 검색해 보세요. content

는 검색에 사용할 수 있습니다. # content .title-color{color:red}
5. Font-family: palatino, georgia, serif; 100%; : 1.6; 글꼴로 작성: 100%/1.6 palatino, georgia, serif;
6. 속성 값이 0인 경우 패딩과 같은 단위를 추가하지 않습니다: 0 15px;
7. 값이 -1 사이인 경우 그리고 1, 0은 생략 가능합니다(예:font-size:.8em
) 8. 색상 값 16진수 사용(예: color: #eebbcc 대신 color: #ebc
9. 각 스타일은 세미콜론(;)으로 끝납니다.
10 . 선택기와 {} 사이, 속성 이름과 속성 값 사이에 공백이 있어야 합니다. (코딩 시 형식을 지정해야 합니다.)
11. 속성 값에는 작은 따옴표를 사용하고, URI에는 따옴표를 추가하지 마세요. 12. 섹션에 주석을 달면 모든 스타일에 대해 주석을 달 필요가 없습니다(흐리게 하기 쉬운 경우 제외)
13. 상속을 잘 활용하고 상위 요소에 스타일을 정의하면 하위 요소가 스타일을 상속합니다. 글꼴 시작, 텍스트 시작, 줄 높이와 같은 상속될 수 있는 속성
14. 표현이 존재하지 않는 경우 표시: 숨김 대신 표시: 없음을 사용해 보십시오. 전자는 브라우저의 메모리를 차지하지 않기 때문입니다. 분석하고 후자는 메모리에 공간을 만듭니다
15. @import 사용을 피하세요
16. 게시된 코드는 압축되어야 합니다

위 내용은 주니어 프론트엔드가 어떻게 고품질 코드를 작성할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!