> 웹 프론트엔드 > HTML 튜토리얼 > HTML 및 CSS에 대한 코딩 사양

HTML 및 CSS에 대한 코딩 사양

WBOY
풀어 주다: 2016-08-30 09:21:06
원래의
1104명이 탐색했습니다.

HTML 및 CSS 코딩 사양 내용

1. HTML 사양

2. CSS 사양

3. 주의사항:

4. 일반적으로 사용되는 명명 규칙

5. CSS 스타일 시트 파일 이름 지정

6. 파일 명명 규칙

1. HTML 사양:

1. 코드 사양

  • 페이지 첫 번째 줄에 표준 모드 선언
  • 을 추가하세요.
  • 코드 들여쓰기: 탭 키로 공백 4개 설정(보통 해당 공백 크기는 소프트웨어 오른쪽 하단에서 설정)
  • 처음에 DOC와 'UTF-8'이 있거나 대문자로 쓸 수 있는 머리 부분의 특수한 경우를 제외하고는 모두 소문자이며 CSS 클래스는 모두 소문자입니다
  • 문서 lang="zh-CN"에 대한 올바른 언어를 설정하려면 html 루트 요소에 lang 속성을 지정하는 것이 좋습니다
  • 다양한 문서 유형은 다양한 브라우저에서 다양한 렌더링 모드를 실행합니다
<code class="hljs xml"><span class="hljs-doctype"><!DOCTYPE html>
<span class="hljs-tag"><<span class="hljs-title">html <span class="hljs-attribute">lang=<span class="hljs-value">"zh-CN">
  <span class="hljs-tag"><<span class="hljs-title">head>
      <span class="hljs-tag"><<span class="hljs-title">meta <span class="hljs-attribute">charset=<span class="hljs-value">"UTF-8">
      <span class="hljs-tag"><<span class="hljs-title">meta <span class="hljs-attribute">http-equiv=<span class="hljs-value">"X-UA-Compatible" <span class="hljs-attribute">content=<span class="hljs-value">"IE=Edge">
  <span class="hljs-tag"></<span class="hljs-title">head>
  ....
<span class="hljs-tag"></<span class="hljs-title">html>
</span></span></span></span></span></span></span></code>
로그인 후 복사
  • @import를 사용하지 마세요
    • 태그에 비해 @import 명령은 훨씬 느려서 추가 요청 수가 늘어날 뿐만 아니라 예측할 수 없는 문제도 발생합니다. 대안에는 다음이 포함됩니다.
      • 여러 개의 <링크> 요소 사용
      • Sass 또는 Less와 같은 CSS 전처리기를 통해 여러 CSS 파일을 하나의 파일로 컴파일합니다
      • Rails, Jekyll, 기타 시스템을 통해 제공되는 CSS 파일 병합 기능
<code class="hljs xml"><span class="hljs-comment"><!-- Use link elements -->
<span class="hljs-tag"><<span class="hljs-title">link <span class="hljs-attribute">rel=<span class="hljs-value">"stylesheet" <span class="hljs-attribute">href=<span class="hljs-value">"core.css">

<span class="hljs-comment"><!-- Avoid @imports -->
<span class="hljs-tag"><<span class="hljs-title">style><span class="css">
  <span class="hljs-at_rule">@<span class="hljs-keyword">import <span class="hljs-function">url(<span class="hljs-string">"more.css");
<span class="hljs-tag"></<span class="hljs-title">style>
</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>
로그인 후 복사


CSS 및 JavaScript 파일 소개
  • HTML5 사양에 따르면 일반적으로 CSS와 JS를 도입할 때 유형을 지정할 필요가 없습니다. 왜냐하면 text/css와 text/javascript가 각각 기본값이기 때문입니다
<code class="hljs xml"><span class="hljs-comment"><!-- External CSS -->
<span class="hljs-tag"><<span class="hljs-title">link <span class="hljs-attribute">rel=<span class="hljs-value">"stylesheet" <span class="hljs-attribute">href=<span class="hljs-value">"code-guide.css">

<span class="hljs-comment"><!-- In-document CSS -->
<span class="hljs-tag"><<span class="hljs-title">style><span class="css">
 <span class="hljs-comment">/* ... */
<span class="hljs-tag"></<span class="hljs-title">style>

<span class="hljs-comment"><!-- JavaScript -->
<span class="hljs-tag"><<span class="hljs-title">script <span class="hljs-attribute">src=<span class="hljs-value">"code-guide.js"><span class="undefined"><span class="hljs-tag"></<span class="hljs-title">script>
</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>
로그인 후 복사

2.댓글


  • 참고: -- 뒤에 공백을 두지 마십시오. 공백을 남기는 경우 다른 모든 댓글에도 공백을 추가하십시오(후속 프로그램 개발을 용이하게 하기 위해). 즉, 댓글은 글로벌하게 통일되어야 합니다

예:


은 작성 사양이므로 모든 댓글을 포함하는 것이 가장 좋습니다. 이후의 문제와 오류를 줄이기 위해 시작과 끝을 만들어야 합니다. 줄을 감싸지 마십시오. CSS와 JS 주석도 마찬가지입니다.



은 쓰기 사양이며 바람직하게는 필요한 모든 댓글입니다. 이후의 문제와 오류를 줄이려면 시작과 끝이 있어야 합니다. 줄을 감싸지 마십시오. CSS와 JS 주석도 마찬가지입니다.