의견 : HTML5에는 많은 새로운 기능이 있습니다. 새 코드. 매우 좋은. 지금 요약합시다. 참조 만
1. 새로운 DocType브라우저 가이 문장을 이해하지 못하더라도 표준 모드에 따라 렌더링됩니다.
2. 그림 요소
<Figure> 및 <figcaption>을 사용하여 제목이있는 사진을 의미 적으로 표현하십시오.
<그림>
<img src = path/to/image alt = image/>
<피스 캡션>
<p> 이것은 흥미로운 것의 이미지입니다. </p>
</figcaption>
</그림>
3. 재정의 <Small>
<Small>은 재정의되었으며 이제 웹 사이트 하단의 저작권 통지와 같은 작은 조판을 나타내는 데 사용됩니다.
4. 링크 및 스크립트 태그에서 유형 속성 제거
5. 괄호를 추가/없음
HTML5는 속성을 인용하고 닫아야하는지 여부를 요구하지 않지만 견적 및 닫힌 태그를 추가하는 것이 좋습니다.
6. 콘텐츠를 편집하고 만족스러운 속성을 추가하십시오.
7. 이메일 입력
입력 유형을 이메일로 설정하면 브라우저는 입력이 이메일 유형인지 확인합니다. 물론, 우리는 프론트 엔드 검증에만 의존 할 수 없으며 백엔드에는 해당 검증이 있어야합니다.
8. 자리 표시 자
이 입력 속성의 의미는 자리 표시 자의 효과를 만들기 위해 JavaScript를 사용할 필요가 없다는 것입니다.
9. 로컬 스토리지
로컬 스토리지를 사용하여 클라이언트에 큰 데이터 조각을 영구적으로 저장하십시오 (적극적으로 삭제되지 않는 한). 현재 대부분의 브라우저는 이미 지원했습니다. Window.localStorage를 사용하기 전에 존재하는지 확인할 수 있습니다.
10. 시맨틱 헤더 및 바닥 글
11. 더 많은 HTML5 형태 기능
12. IE 및 HTML5
기본적으로 새로운 HTML5 요소가 인라인으로 렌더링되지만 다음 방법을 사용하여
블록 모드로 렌더링됩니다
헤더, 바닥 글, 기사, 섹션, Nav, 메뉴, hgroup {
디스플레이 : 블록;
}
불행히도 IE는 이러한 스타일을 무시하고 다음과 같이 고칠 수 있습니다.
문서 .CreateElement (기사);
문서 .CreateElement (바닥기);
문서 .CreateElement (헤더);
문서 .CreateElement (HGROUP);
문서 .CreateElement (NAV);
문서화 (메뉴);
13. HGROUP
일반적으로 헤더의 제목 세트를 다음과 같이 결합하는 데 사용됩니다.
<Header>
<hgroup>
<H1> 리콜 팬 페이지 </h1>
<H2> 평생의 기억을 원하는 사람들에게만. </h2>
</hgroup>
</헤더>
14. 필수 속성
필요한 속성은 입력이 필요한지 여부를 정의하고 아래처럼 선언 할 수 있습니다.
<입력 유형 = 텍스트 이름 = 일부 푸트 필수>
또는
<입력 유형 = 텍스트 이름 = 일부 푸트 필수 = 필수>
15. 자동 초점 특성
그 의미와 마찬가지로 입력 상자에 집중하는 것입니다.
<입력 유형 = 텍스트 이름 = someput 자리 표시 자 = Douglas Quaid 필수 자동 초점>
16. 오디오 지원
HTML5는 <오디오> 태그를 제공하므로 타사 플러그인에 따라 더 이상 오디오를 렌더링 할 필요가 없습니다. 대부분의 최신 브라우저는 HTML5 오디오를 지원하지만 다음과 같은 일부 호환 처리를 제공해야합니다.
<Audio AutoPlay = AutoPlay Controls = Controls>
<소스 src = file.ogg /> <! - ff–>
<소스 src = file.mp3 ″ /> <! - WebKit ->
<a href = file.mp3 ″>이 파일을 다운로드하십시오. </a>
</오디오>
17. 비디오 지원
오디오와 마찬가지로 <video> 태그는 비디오를 지원합니다. HTML5 문서는 비디오에 대한 특정 인코딩을 지정하지 않기 때문에 브라우저는 지원할 인코딩을 결정하여 많은 불일치로 이어집니다. Safari 및 IE는 H.264 인코딩 형식, Firefox 및 Opera 지원 Theora 및 Vorbis 인코딩 형식을 지원합니다. HTML5 비디오를 사용하는 경우 다음과 같은 두 가지를 제공해야합니다.
<비디오 컨트롤 예압>
<소스 src = cohagenphonecall.ogv type = video/ogg; Codecs = 'Vorbis, Theora' />
<소스 src = cohagenphonecall.mp4 ″ type = video/mp4; 'Codecs ='AVC1.42E01E, MP4A.40.2 ' />
<p> 브라우저는 오래되었습니다. <a href = cohagenphonecall.mp4 ″> 대신이 비디오를 다운로드하십시오. </a> </p>
</video>
18. 예압 비디오
Preload 속성은 문자 그대로 의미하는 것만 큼 간단하며 페이지가로드 될 때 비디오를 사전로드 해야하는지 결정해야합니다.
<비디오 예압>
19. 비디오 컨트롤 표시
<비디오 예압 컨트롤>
20. 정규 표현
패턴 속성으로 인해 마크 업에서 일반 표현식을 직접 사용할 수 있습니다.
<양식 action = method = post>
<label for = username> 사용자 이름을 만듭니다 : </label>
<입력 유형 = 텍스트 이름 = username id = username 자리 표시기 = 4 <> 10 ″ Pattern = [a-za-z] {4,10} autofocus request>
<버튼 유형 = 제출> go </button>
</form>
21. 감지 속성 지원
Modernizr 외에도 JavaScript를 사용하여 다음과 같은 일부 속성이 지원되는지 간단히 감지 할 수 있습니다.
<cript>
if (! 'Pattern'in Document.CreateElement ( 'input')) {
// 클라이언트/서버 측 유효성 검사를 수행합니다
}
</스크립트>
22. 마크 요소
<mark> 요소를 강조 표시로 고려하십시오. 텍스트 단락을 선택할 때 HTML에 대한 JavaScript의 마크 업 효과는 다음과 같습니다.
<H3> 검색 결과 </h3>
<p> 그들은 Quato가 말한 직후에 방해 받았다. </p>
23. <div>를 사용할 때
HTML5는 너무 많은 요소를 도입 했으므로 여전히 DIV를 사용해야합니까? 더 나은 요소가 없을 때 DIV를 사용할 수 있습니다.
24. 지금 html5를 사용하고 싶습니까?
2022 년을 기다리지 마십시오. 지금 사용할 준비가되었습니다.
25. HTML5가 아닌 것은 무엇입니까?
1) SVG
2) CSS3
3) 지리 위치
4) 클라이언트 스토리지
5) 웹 소켓
26. 데이터 속성
<div id = myDiv data-custom-attr = my value> bla bla </div>
CSS에서 사용 :
<스타일>
H1 : 호버 : {후 {
내용 : attr (data-hover-response);
색상 : 검은 색;
위치 : 절대;
왼쪽 : 0;
}
</스타일>
<h1 Data-Hover-Response = 나는 나를 만지지 말라고 말했다!> don 't touch me </h1>
27. 출력 요소
<output> 요소는 계산 결과를 표시하는 데 사용되며 레이블과 같은 속성도 있습니다.
28. 범위 입력을 사용하여 슬라이더를 작성하십시오
HTML5에서 참조 된 범위 유형은 슬라이더를 생성 할 수 있으며, 최소, 최대, 단계 및 값 속성을 허용하는 슬라이더를 만들 수 있습니다.
CSS를 사용할 수 있습니다.
<입력 유형 = 범위 이름 = 범위 min = 0 ″ max = 10 ″ step = 1 ″ value =>
입력 [type = range] : {content : attr (min); 패딩-오른쪽 : 5px;
}
입력 [type = range] : {content : attr (max); 왼쪽 패딩 : 5px;}