일반대회
태그

자동 닫는 태그, 닫을 필요 없음(예: 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의 중첩을 허용하지 않습니다.

엄격한 중첩 제약 조건은 모든 브라우저에서 허용되지 않습니다. 의미적 중첩 제약 조건의 경우 대부분의 브라우저가 내결함성을 처리하며 생성된 문서 트리가 서로 다를 수 있습니다.

의미적 중첩 제약

,
아래에 사용됨; , , , 는 아래에 사용됩니다.

엄격한 중첩 제약

인라인 수준 요소는 텍스트 또는 기타 인라인 수준 요소만 포함할 수 있습니다. ,

예시

구성한 페이지를 책으로 취급하고 태그의 의미를 해당 기능과 의미에 매핑하세요.

책 이름:

책 각 장 제목:

장 내 기사 제목:

부제/부제: < ;h4>

장 단락:

HEAD
문서 유형

각 브라우저에서 일관된 성능을 보장하려면 각 HTML 페이지의 첫 번째 줄에 표준 모드 선언을 추가하세요.

XML/HTML 코드클립보드에 콘텐츠 복사

>

언어 속성

<html lang="zh- 한스">

<html lang="zh- cmn-한스">

<html lang="zh- cmn-Hant">

<html lang="ko" >

문자 인코딩

BOM이 없는 utf-8 인코딩을 파일 형식으로 사용합니다.
문자 인코딩을 지정하는 메타는 head의 첫 번째 직접 하위 요소여야 합니다.

XML/HTML 코드클립보드에 콘텐츠 복사

<html>

<머리>

<메타 문자 집합="utf- 8">

…

머리>

<몸>

…

몸>

html>

IE 호환 모드

최신 버전의 IE 및 Chrome 커널을 우선적으로 사용하세요.

XML/HTML 코드클립보드에 콘텐츠 복사

<메타 http-equiv="X-UA -호환 가능" 콘텐츠="IE=edge,chrome=1">

SEO 최적화

XML/HTML 코드클립보드에 콘텐츠 복사

머리>

<메타 문자 집합="utf- 8">
" " 🎜>
<제목>스타일 가이드제목>

<
메타 이름="키워드" 콘텐츠="키워드">

<메타 이름="설명" 콘텐츠="설명">

<메타 이름="저자" 내용="작성자,이메일 주소">

머리> 뷰포트 뷰포트: 일반적으로 도구 모음, 탭 등을 제외한 브라우저 창의 콘텐츠 영역 크기를 나타냅니다. 너비: 브라우저 너비, 페이지의 표시 영역 너비입니다. 출력 장치; device- width: 장치 해상도 너비, 출력 장치의 화면 너비 initial-scale: 초기 스케일링 비율 maximum-scale: 최대 스케일링 비율; 모바일 장치의 경우 가시 영역의 너비와 초기 크기 조정을 설정합니다.

XML/HTML 코드클립보드에 콘텐츠 복사

<메타 이름="뷰포트" 콘텐츠="width=device-width,initial-scale=1.0">

iOS 아이콘

apple-touch-icon 사진은 자동으로 둥근 모서리와 하이라이트로 처리됩니다.
apple-touch-icon-precomposed는 시스템이 자동으로 효과를 추가하는 것을 금지하고 원본 디자인을 직접 표시합니다.

XML/HTML 코드
클립보드에 콘텐츠 복사

<링크 rel="apple- touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png">

<링크 rel="apple- touch-icon-precomposed" href="/apple-touch-icon-72x72-precomposed.png" 크기="72x72">

<링크 rel="apple- touch-icon-precomposed" href="/apple-touch-icon-114x114-precomposed.png" 크기="114x114">

<링크 rel="apple- touch-icon-precomposed" href="/apple-touch-icon-144x144-precomposed.png" 크기="144x144">

파비콘
favicon을 지정하지 않으면 대부분의 브라우저는 웹 서버의 루트 디렉터리에 있는 favicon.ico를 요청합니다. 파비콘에 액세스할 수 있고 404를 방지하려면 다음 두 가지 방법 중 하나를 따라야 합니다.

favicon.ico 파일을 웹 서버의 루트 디렉토리에 배치하세요.
링크를 사용하여 파비콘을 지정하세요.

XML/HTML 코드
클립보드에 콘텐츠 복사

<링크 rel="바로가기 아이콘" href="path/to/favicon.ico">

HEAD 템플릿

XML/HTML 코드클립보드에 콘텐츠 복사

>

<html lang="zh- cmn-한스">

<머리>

    <메타 문자 집합="utf- 8">

    <메타 http-equiv=" X-UA 호환" 콘텐츠="IE=edge,chrome=1">

    <제목>스타일 가이드제목>

    <메타 이름="설명" 콘텐츠="不超过150个字符">

    <메타 이름="키워드" 콘텐츠="">

    <메타 이름="저자" 콘텐츠="이름, email@gmail.com">





    <메타 이름="뷰포트" 콘텐츠="width=device-width, initial-scale=1.0">





    <링크 rel="apple- touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png">



<링크 rel="대체" 유형="application/rss xml" 제목="RSS" href="/rss.xml" />

<링크 rel="바로가기 아이콘 " href="path/to/favicon.ico">

머리>

HTML 주석

모듈 설명

XML/HTML 코드클립보드에 콘텐츠 복사

<div class="article- 목록">

...

div>

댓글 차단

标签	语义
	段落
...	标题
	无序列表
	有序列表
	大段引用
	一般引用
	为样式加粗而加粗
	为强调内容而加粗
	为样式倾斜而倾斜
	为强调内容而倾斜
code	代码标识
abbr	缩写

태그

의미

단락

...

제목

순서가 지정되지 않은 목록

순서가 지정된 목록

<인용문>

긴 인용

<인용>

일반 인용문

굵은 스타일은 굵게

<저장>

내용을 강조하기 위해 굵은 글씨

스타일 기울기를 위한 기울기

기울어 내용 강조

코드

코드 식별

약어

HTML 코드 작성 표준 가이드_HTML/Xhtml_웹페이지 제작

...

...

책 각 장 제목:

장 내 기사 제목:

부제/부제: < ;h4>