HTML5의 새로운 기능
HTML5에 대한 DOCTYPE 선언은 매우 간단합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
Content of the document......
</body>
</html>HTML5의 기본 문자 인코딩은 UTF-8입니다.
의미 요소를 블록 요소로 정의
HTML5는 8 개의 새로운 의미 요소를 정의합니다 . 이들은 모두 블록 레벨 요소입니다.
이전 브라우저에서 올바른 동작을 보장하기 위해 이러한 HTML 요소 의 CSS 표시 속성을 설정하여 차단할 수 있습니다 .
header, section, footer, aside, nav, main, article, figure {
display: block;
}
Internet Explorer 8 문제
모든 새로운 HTML5 요소에 대해 위에서 설명한 솔루션을 사용할 수 있습니다.
그러나 IE8 (및 이전)에서는 알 수없는 요소의 스타일을 허용하지 않습니다!
고맙게도 Sjoerd Visscher는 HTML5Shiv를 만들었습니다! HTML5Shiv는 버전 9 이전의 Internet Explorer 버전에서 HTML5 요소를 스타일링 할 수있는 JavaScript 해결 방법입니다.
IE 9 이전의 IE 브라우저에 호환성을 제공하려면 HTML5Shiv가 필요합니다.
HTML5Shiv 구문
HTML5Shiv는 <head>태그 내에 배치됩니다 .
HTML5Shiv는 <script>태그 에서 참조되는 자바 스크립트 파일입니다 .
당신과 같은 새로운 HTML5 요소를 사용하는 경우 당신은 HTML5Shiv를 사용한다 : <article>, <section>, <aside>, <nav>, <footer>.
당신은 할 수 GitHub의에서 HTML5shiv의 최신 버전을 다운로드 하거나 다음 CDN 버전을 참조 https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js
<head>
<!--[if lt IE 9]>
<script src="/js/html5shiv.js"></script>
<![endif]-->
</head>
HTML5의 새로운 요소
새로운 Semantic/Structural 요소
| <article> | 문서에서 기사를 정의합니다 |
| <aside> | 페이지 컨텐츠를 제외하고 컨텐츠를 정의합니다 |
| <bdi> | Isolates a part of text that might be formatted in a different direction from other text outside it |
| <details> | Defines additional details that the user can view or hide |
| <dialog> | Defines a dialog box or window |
| <figcaption> | Defines a caption for a <figure> element |
| <figure> | Defines self-contained content |
| <footer> | Defines a footer for a document or section |
| <header> | Defines a header for a document or section |
| <main> | Defines the main content of a document |
| <mark> | Defines marked/highlighted text |
| <meter> | Defines a scalar measurement within a known range (a gauge) |
| <nav> | Defines navigation links |
| <progress> | Represents the progress of a task |
| <rp> | Defines what to show in browsers that do not support ruby annotations |
| <rt> | Defines an explanation/pronunciation of characters (for East Asian typography) |
| <ruby> | Defines a ruby annotation (for East Asian typography) |
| <section> | Defines a section in a document |
| <summary> | Defines a visible heading for a <details> element |
| <time> | Defines a date/time |
| <wbr> | Defines a possible line-break |
새로운 Form 요소
| <datalist> | Specifies a list of pre-defined options for input controls |
| <output> | Defines the result of a calculation |
Read all about old and new form elements in HTML Form Elements.
새로운 Input Types
|
|
HTML 입력 유형 에서 이전 입력 유형과 새로운 입력 유형에 대해 자세히 알아보십시오 .
HTML 입력 속성의 입력 속성에 대해 자세히 알아보십시오 .
HTML5-새로운 속성 구문
HTML5는 속성에 대해 4 가지 다른 구문을 허용합니다.
이 예는 <input>태그에 사용 된 다양한 구문을 보여줍니다 .
| Empty | <input type="text" value="John" disabled> |
| Unquoted | <input type="text" value=John> |
| Double-quoted | <input type="text" value="John Doe"> |
| Single-quoted | <input type="text" value='John Doe'> |
HTML5에서는 속성에 필요한 내용에 따라 네 가지 구문을 모두 사용할 수 있습니다.
HTML5 그래픽
| <canvas> | Draw graphics, on the fly, via scripting (usually JavaScript) |
| <picture> | Defines a container for multiple image resources |
| <svg> | Draw scalable vector graphics |
HTML5 Canvas 에 대해 자세히 알아보십시오 .
HTML5 SVG 에 대해 자세히 알아보십시오 .
새로운 미디어 요소
| <audio> | Defines sound content |
| <embed> | Defines a container for an external (non-HTML) application |
| <picture> | Defines a container for multiple image resources |
| <source> | Defines multiple media resources for media elements (<video> and <audio>) |
| <track> | Defines text tracks for media elements (<video> and <audio>) |
| <video> | Defines video or movie |
HTML5 비디오 에 대해 자세히 알아보십시오 .
HTML5 오디오 에 대해 자세히 알아보십시오 .
https://www.w3schools.com/html/html5_new_elements.asp
HTML5 New Elements
HTML5 New Elements New Elements in HTML5 Below is a list of the new HTML5 elements, and a description of what they are used for. New Semantic/Structural Elements HTML5 offers new elements for better document structure: Tag Description Defines an article in
www.w3schools.com
'Publishing > HTML' 카테고리의 다른 글
| HTML5 Video (fullpage Video) (0) | 2020.02.13 |
|---|---|
| HTML5 audio (0) | 2020.02.13 |
| HTML 기본 layout (0) | 2020.02.12 |
| html header 정보 (0) | 2020.02.12 |
| 웹접근성 준수 된 회원가입 폼 (0) | 2020.02.12 |