HTML 코드 작성 표준 가이드_HTML/Xhtml_웹페이지 제작
html
체재
사양
일반대회
태그
자동 닫는 태그, 닫을 필요 없음(예: img input br hr 등)
선택적 닫는 태그(닫는 태그), 닫아야 함(예: 또는 <) ; /body>);
태그 수를 최대한 줄이세요;
XML/HTML 코드클립보드에 콘텐츠 복사
- <img src="images/google.png " alt="Google">
- <입력 유형="텍스트" 이름="제목">
- <ul>
- <리>스타일리>
- <리>안내리>
- ul>
- <스팬 클래스="아바타" >
- <img src=".. .">
- 스팬>
- <img class="아바타" src="...">
클래스 및 아이디
클래스 이름은 표현식이 아닌 함수 또는 콘텐츠의 이름을 따서 지정해야 합니다.
클래스와 ID는 소문자여야 하며, 여러 단어로 구성할 경우 대시 구분을 사용하세요.
고유한 ID를 자바스크립트 후크로 사용하세요. , 스타일 정보 없이 클래스를 생성하지 마세요.
XML/HTML 코드클립보드에 콘텐츠 복사
- <div class="j- 왼쪽 콘텐츠 후크Wrapper">div>
- <div id="j- Hook" class="sidebar content-wrapper">< /div>
속성 순서
가독성을 보장하려면 HTML 속성이 특정 순서로 표시되어야 합니다.
id
class
name
data-xxx
src, for, type, href
title, alt
aria-xxx, role
XML/HTML 코드클립보드에 콘텐츠 복사
- <a id="..." 클래스="..." 데이터 모달="전환" href="###"> 아>
- <입력 클래스="form- 제어" 유형="텍스트">
- <img src=".. ." alt="...">
따옴표
속성 정의에는 큰따옴표를 균일하게 사용합니다.
XML/HTML 코드클립보드에 콘텐츠 복사
- <span id='j- 후크' 클래스=텍스트>구글 스팬>
- <span id="j- 후크" 클래스="텍스트">Google스팬>
b 중첩
a는 div의 중첩을 허용하지 않습니다. 이 제약 조건은 의미론적 중첩 제약 조건입니다. 예를 들어 a는 a의 중첩을 허용하지 않습니다.
엄격한 중첩 제약 조건은 모든 브라우저에서 허용되지 않습니다. 의미적 중첩 제약 조건의 경우 대부분의 브라우저가 내결함성을 처리하며 생성된 문서 트리가 서로 다를 수 있습니다.
의미적 중첩 제약
아래에 사용됨; , ,