부트 스트랩 HTML 코딩 규칙
문법
- 두 개의 공백 대신 탭 (탭)으로 -이 모든 환경에서 보여주기 위해 일관된 접근을 보장하는 유일한 방법입니다.
- 중첩 된 요소는 한 번 (즉, 두 개의 공간) 들여 쓰기되어야한다.
- 속성의 정의를 들어, 모든 따옴표를 사용하여 작은 따옴표를 사용하지 않습니다 있는지 확인하십시오.
- 자동 폐쇄 (자동 폐쇄) 요소 꼬리 슬래시를 추가하지 마십시오 - HTML5의 사양은 분명이 선택적임을 밝혔다.
- 선택 종료 태그 (종료 태그)를 생략하지 마십시오 (예를 들어,
</li>또는</body>).
예 :
<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
</head>
<body>
<img src="images/company-logo.png" alt="Company">
<h1 class="hello-world">Hello, world!</h1>
</body>
</html>
HTML5의 DOCTYPE
HTML 페이지의 첫 번째 행의 각 (표준 모드) 문 표준 모드를 추가, 이것은 각 브라우저에서 일관된 표시가 있는지 확인 할 수 있습니다.
예 :
<!DOCTYPE html> <html> <head> </head> </html>
언어 속성
HTML5의 사양에 따라 :
강력한 문서를위한 올바른 언어를 설정하도록 랭, HTML 루트 요소 속성 지정 권장한다. 이 번역 도구 등 규칙과 준수해야 그 번역을 결정하는 데 도움이됩니다, 자신의 발음을 결정하는 데 사용되어야한다 음성 합성 툴에 도움이 될 것입니다.
더에 lang 에서 지식 속성 이 사양 의 이해.
다음은 언어 코드 표 .
<html lang="zh-CN"> <!-- ... --> </html>
IE 호환 모드
특정 통해 IE 지원 <meta> IE 렌더링 된 페이지의 현재 버전을 확인하기 위해 태그를 사용해야합니다. 강한 특별한 요구가없는 한, 그렇지 않으면하여 지원하는 최신 모델을 사용하여 IE를 알리는 가장자리 모드를 설정하는 것이 가장 좋습니다.
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
문자 인코딩
명시 문자 인코딩을 선언함으로써, 브라우저는 신속하게 확보하고 쉽게 페이지 콘텐츠 렌더링을 결정할 수있다. 이것의 장점은 (일반적으로 UTF-8 인코딩을 사용) 전체 문서 인코딩과 일치 문자 엔터티 표시 (문자 엔티티) HTML에서의 사용을 피하는 것이다.
<head> <meta charset="UTF-8"> </head>
CSS와 자바 스크립트 파일의 도입
HTML5의 사양에 따라, CSS 및 JavaScript 파일의 도입시에 일반적으로 지정할 필요가 없습니다 type 과 같은 속성 text/css 와 text/javascript 기본값됩니다.
HTML5 스펙 링크
<!-- External CSS --> <link rel="stylesheet" href="code-guide.css"> <!-- In-document CSS --> <style> /* ... */ </style> <!-- JavaScript --> <script src="code-guide.js"></script>
실용은 왕이다
가격에 실용성을 희생 HTML 표준과 의미,하지만를 수행하려고합니다. 어떤 최소한의 레이블이 가능한 시간과 복잡성의 최소 유지한다.
주문 속성
HTML 속성은 코드의 가독성을 보장하기 위해, 아래의 순서로 우선 순위에 있어야합니다.
-
class -
id,name -
data-* -
src,for,type,href -
title,alt -
aria-*,role
클래스는 높은 재사용 가능한 구성 요소를 식별하는 데 사용되며, 따라서 상단에 표시한다. ID (예 : 페이지 내 북마크)를주의해서 사용해야합니다, 특정 구성 요소를 식별하는 데 사용됩니다, 그것은 2 위를했다.
<a class="..." id="..." data-modal="toggle" href="#"> Example link </a> <input class="form-control" type="text"> <img src="..." alt="...">
부울 (부울) 유형 속성
부울 속성은 선언시에 할당 할 수 없습니다. 그 할당을위한 XHTML 사양하지만, HTML5 스펙은 필요하지 않습니다.
자세한 내용을 참조하시기 바랍니다 부울 ON을 WHATWG 이동 섹션 속성 :
값이 거짓없는 경우 값이 true이면 요소 속성 부울입니다.
당신이 값을 할당해야하는 경우, WHATWG 규격을 참조하십시오 :
속성이 존재하는 경우, 그 값은 [...]가 정식 이름 속성은 빈 문자열 또는이어야하며, 시작과 끝 부분에 공백을 추가하지 마십시오.
간단하게, 그것은 할당되지 않습니다.
<input type="text" disabled> <input type="checkbox" value="1" checked> <select> <option value="1" selected>1</option> </select>
라벨의 수를 줄이
HTML 코드를 작성하면 불필요한 부모 요소를 방지 할 수 있습니다. 많은 경우에, 이것은 반복적 인 재건 달성하기 위해 필요하다. 다음과 같은 경우를 생각해 볼 수 있습니다 :
<!-- Not so great --> <span class="avatar"> <img src="..."> </span> <!-- Better --> <img class="avatar" src="...">
자바 스크립트를 생성 라벨
태그 콘텐츠를 찾아 수정하고, 성능을 감소시키는 것이 어렵게된다 자바 스크립트에 의해 생성. 방지하기 위해 피하십시오.