html5는 어떤 규칙을 따라야 합니까?

HTML5가 따라야 하는 규칙: 1. 레이아웃에 DIV를 잘 활용합니다. 2. HTML 태그와 CSS 스타일 시트를 분리합니다. 3. CSS 코드를 최적화합니다. 4. JS 파일을 최적화하고 페이지 하단에 배치합니다. 5, 제목 요소를 잘 활용하십시오. 6. 적절한 위치에 적절한 HTML 태그를 사용하십시오. 7. div 태그를 남용하지 마십시오.

이 튜토리얼의 운영 환경: Windows 7 시스템, HTML5 버전, Dell G3 컴퓨터.

HTML은 거의 20년에 걸쳐 개발되었습니다. HTML4에서 XHTML, 그리고 최근 매우 인기 있는 HTML5에 이르기까지 전체 인터넷의 발전을 거의 목격했습니다. 그러나 지금도 개발자가 세심한 주의를 기울여야 할 기본 개념과 원칙이 많이 있습니다. 웹 프런트엔드 개발 교육 편집자가 따라야 할 HTML5 개발 원칙을 소개합니다.

1. 레이아웃에 DIV를 잘 활용하세요

웹 페이지를 개발할 때 고려해야 할 한 가지는 페이지의 초점을 구별하는 것입니다. DIV 태그에 이러한 내용을 포함하면 페이지의 코드가 깔끔하고 잘 들여쓰기되어 표시됩니다.

2. HTML 태그와 CSS 스타일 시트를 분리하세요

좋은 페이지는 HTML 태그와 CSS 스타일 시트를 분리해야 합니다. 이는 모든 웹 개발자가 웹 개발을 접할 때 알아야 할 원칙입니다. 그러나 오늘날까지도 이 원칙을 엄격하게 따르지 않는 개발자가 여전히 많습니다.

HTML 태그에 스타일시트 코드를 삽입하지 마세요. 개발자는 CSS 스타일 시트를 저장하기 위해 별도의 파일을 만드는 습관을 길러야 합니다. 또한 이를 통해 다른 개발자가 코드를 수정할 때 작업을 보다 쉽고 빠르게 완료할 수 있습니다.

3. CSS 코드 최적화

요즘에는 웹사이트에 여러 CSS 파일을 추가하는 것이 매우 일반적입니다. 그러나 웹사이트에 CSS 파일이 너무 많으면 웹사이트의 응답 속도가 느려집니다. 해결책은 코드를 간소화하고 여러 CSS 파일을 최적화하여 하나의 파일로 병합하는 것입니다. 이 방법을 사용하면 웹사이트 로딩 속도를 크게 향상시킬 수 있습니다. 또한 CSS Optimizer, Clean CSS 등과 같이 CSS 파일을 최적화하는 데 사용할 수 있는 많은 도구가 있습니다.

CSS의 경우 꼭 알아야 할 우수한 CSS 프레임워크 10개도 추천해 드립니다. CSS 프레임워크의 유형과 관련 사용법을 배울 수 있습니다.

4. JS 파일을 최적화하여 페이지 하단에 배치합니다.

CSS처럼 페이지에 여러 JS 파일을 추가하는 것도 일반적입니다. 하지만 이렇게 하면 웹사이트의 응답 속도도 느려집니다. 이러한 이유로 개발자는 이러한 JS 파일을 간소화하고 최적화해야 합니다.

하지만 CSS와 한 가지 다른 점은 브라우저가 일반적으로 병렬 로딩을 지원하지 않는다는 것입니다. 즉, 브라우저가 JS 파일을 로드할 때 더 이상 다른 콘텐츠를 동시에 로드하지 않습니다. 이로 인해 페이지 로딩 속도가 느려지는 것처럼 보입니다.

좋은 해결책은 JS 파일의 로딩 순서를 마지막에 두는 것입니다. 이 목표를 달성하기 위해 개발자는 HTML 문서 하단에 JS 코드를 배치할 수 있으며, 적절한 위치는 태그 근처에 있습니다.

5. 제목 요소를 잘 활용하세요.

범위에서 h6까지 이 요소는 페이지의 핵심 콘텐츠를 강조하는 데 사용됩니다. 이를 통해 사용자는 페이지의 중요한 부분에 더 집중할 수 있습니다. 블로그의 경우, 나는(이 글의 저자를 언급하면서) 블로그 제목을 강조하기 위해 스팬 태그를 사용할 것을 권장합니다. 왜냐하면 블로그 제목은 페이지에서 거의 중요한 부분이기 때문입니다.

6. 적절한 HTML 태그를 올바른 위치에 사용하세요

HTML 태그는 표준화된 콘텐츠 구조를 구성하는 핵심입니다. 예를 들어 태그는 중요한 내용을 강조하는 데 사용됩니다.

태그는 기사 단락을 강조하는 데 적합합니다. 단락 사이에 빈 줄을 추가하려면

7. div 태그 남용을 피하세요

모든 블록 요소가

태그를 사용하여 생성되어야 하는 것은 아닙니다. 예를 들어, 인라인 요소의 속성에 display:block을 추가하여 이를 블록 요소로 표시할 수 있습니다.

8. 속성 값은 따옴표로 균일하게 묶어야 합니다.

HTML5의 일부 속성은 따옴표 없이 둘 수 있지만 표준화를 위해 각 속성에 따옴표를 추가해야 합니다.

9. 너무 긴 코드 줄은 피하세요

페이지 크기가 제한되어 있습니다. 코드가 너무 길면 스크롤 막대가 추가되어 코드의 가독성이 떨어집니다.

10.img 태그에 alt 추가

이미지 속성에 alt를 추가한 후 이미지가 표시되지 않을 때 alt의 내용으로 이미지의 공백을 메울 수 있으며, alt는 SEO 최적화에도 좋습니다.

11. 빈 줄과 들여쓰기

우리가 자바를 배울 때 선생님은 코드의 가독성을 높이기 위해 코드에 주석, 빈 줄, 들여쓰기를 추가하라고 가르쳐 주셨습니다.

12. 태그 닫기

HTML의 대부분의 태그는 쌍으로 표시됩니다. 일부 태그가 닫히지 않으면 문서 정렬 오류 등의 문제가 발생합니다. 일부 태그가 단일 태그를 사용할 수 있더라도 p와 같은 닫힌 태그로 통합하는 것이 가장 좋습니다. 그리고 메타처럼 다음과 같은 형식으로 작성하는 것이 가장 좋습니다: <meta charset="utf-8"/>.

관련 추천: "html 비디오 튜토리얼"

위 내용은 html5는 어떤 규칙을 따라야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!