HTML5 소개
HTML5는 어떤 모습이며 어떻게 사용하나요? 실제로 HTML 튜토리얼의 첫 번째 장에서 우리가 제공한 예제에 사용된 코드는 모두 HTML로 작성되었습니다. HTML5를 자세히 살펴보겠습니다
HTML5 소개
 |
|
HTML5란 무엇인가요?
HTML5는 차세대 HTML 표준입니다.
HTML, HTML 4.01의 이전 버전은 1999년에 탄생했습니다. 그 이후로 웹의 세계는 극적으로 변했습니다.
HTML5는 아직 진행 중인 작업입니다. 그러나 대부분의 최신 브라우저에는 이미 HTML5가 일부 지원되어 있습니다.
HTML5는 어떻게 시작되었나요?
HTML5는 W3C와 WHATWG(Web Hypertext Application Technology Working Group) 간의 협력의 결과입니다. .
WHATWG는 웹 양식과 애플리케이션을 다루는 반면, W3C는 XHTML 2.0에 중점을 두고 있습니다. 2006년에 두 당사자는 새로운 버전의 HTML을 만들기 위해 협력하기로 결정했습니다.
HTML5의 몇 가지 흥미로운 새 기능:
그림을 위한 캔버스 요소
미디어 재생을 위한 비디오 및 오디오 요소
네이티브 오프라인 저장에 대한 더 나은 지원
기사, 바닥글, 헤더, 탐색, 섹션과 같은 새로운 특수 콘텐츠 요소
캘린더, 날짜, 시간, 이메일, URL과 같은 새로운 양식 컨트롤 , 검색
HTML5 <!DOCTYPE>
< HTML5 문서의 첫 번째 줄은 사용이 매우 간단합니다.
<!DOCTYPE html>
첫 번째 장의 예가 <!DOCTYPE>
가장 작은 HTML5 문서
로 시작하는지 확인할 수 있습니다. 다음은 간단한 HTML5 문서입니다:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文档标题</title> </head> <body> 文档内容...... </body> </html>
참고: 중국어 웹페이지의 경우 <meta charset="utf-8">을 사용하여 인코딩을 선언해야 합니다. 그렇지 않으면 잘못된 문자가 나타납니다.
HTML5 개선
새로운 요소
새로운 속성
CSS3 완벽 지원
비디오 및 오디오
2D/3D 그래픽
로컬 스토리지
로컬 SQL 데이터
웹 애플리케이션
HTML5 멀티미디어
HTML5를 사용하면 웹페이지에서 동영상과 오디오를 간단하게 재생할 수 있습니다. HTML5
애플리케이션HTML5를 사용하면 간단히 애플리케이션을 개발할 수 있습니다.
로컬 데이터 저장소
로컬 파일 액세스
로컬 SQL 데이터
캐시 참조
Javascript Worker
그래픽 그리기:
<canvas> 요소 사용
인라인 SVG 사용
CSS3 2D/3D 사용
CSS3을 사용하는 HTML5
새 선택기
-
새로운 속성
애니메이션
2D/3D 변환
둥근 모서리
그림자 효과
다운로드 가능한 글꼴
CSS3에 대해 자세히 알아보세요. 이 사이트를 확인하세요. CSS3 튜토리얼.
의미 요소
HTML5는 다음과 같이 많은 의미 요소를 추가합니다.
| 설명<🎜> | ||||||||||
| <article> | 페이지에서 독립적인 콘텐츠 영역을 정의합니다. | ||||||||||
| < side> | 페이지의 사이드바 콘텐츠 정의 . | ||||||||||
| < bdi> | 상위 요소의 텍스트 방향 설정에서 벗어나도록 텍스트입니다. | ||||||||||
| < command> | 라디오와 같은 명령 버튼 정의 선택 버튼, 체크박스 또는 버튼 |
| <details> | 用于描述文档或文档某个部分的细节 |
| <dialog> | 定义对话框，比如提示框 |
| <summary> | 标签包含 details 元素的标题 |
| <figure> | 规定独立的流内容（图像、图表、照片、代码等等）。 |
| <figcaption> | 定义 <figure> 元素的标题 |
| <footer> | 定义 section 或 document 的页脚。 |
| <header> | 定义了文档的头部区域 |
| <mark> | 定义带有记号的文本。 |
| <meter> | 定义度量衡。仅用于已知最大和最小值的度量。 |
| <nav> | 定义导航链接的部分。 |
| <progress> | 定义任何类型的任务的进度。 |
| <ruby> | 定义 ruby 注释（中文注音或字符）。 |
| <rt> | 定义字符（中文注音或字符）的解释或发音。 |
| <rp> | 在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。 |
| <section> | 定义文档中的节（section、区段）。 |
| <time> | 定义日期或时间。 |
| <wbr> | 规定在文本中的何处适合添加换行符。 |
HTML5 양식
새 양식 요소, 새 속성, 새 입력 유형, 자동 유효성 검사.
요소 삭제됨
다음 HTML 4.01 요소가 HTML5에서 제거되었습니다.
<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<프레임셋>
<noframes>
<strike>
예제
다음 예는 웹페이지에서 동영상을 재생하는 방법을 보여줍니다
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文档标题</title> </head> <body> <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> 你的浏览器不支持 video 标签。 </video> </body> </html>
You You 로컬에서 비디오를 찾고 src에 비디오의 위치와 이름을 넣을 수 있습니다.
HTML5 브라우저는
을 지원합니다.최신 버전의 Safari, Chrome, Firefox 및 Opera는 일부 HTML5 기능을 지원합니다. Internet Explorer 9은 특정 HTML5 기능을 지원합니다.
일부 이전 브라우저(HTML5를 지원하지 않음)에서 HTML5를 지원하도록 할 수 있습니다.
최신 브라우저는 HTML5를 지원합니다.
또한 이전 브라우저와 새 브라우저를 막론하고 모든 브라우저는 인식할 수 없는 요소를 자동으로 인라인 요소로 처리합니다.
이 때문에 브라우저가 "알 수 없는" HTML 요소를 처리하도록 "가르쳐 "할 수 있습니다.
IE6(Windows XP 2001) 브라우저에 알려지지 않은 HTML 요소를 처리하도록 가르칠 수도 있습니다.
HTML5 요소를 블록 요소로 정의
HTML5는 8개의 새로운 HTML 의미 요소를 정의합니다. 이 모든 요소는 블록 수준 요소입니다.
이전 버전의 브라우저에서 이러한 요소를 올바르게 표시하려면 CSS 표시 속성 값을 다음과 같이 차단하도록 설정할 수 있습니다.
header , 섹션, 바닥글, 옆, nav, 메인, 기사, 그림 {
디스플레이: 블록
}
HTML에 새 요소 추가
HTML에 새로운 요소를 추가할 수 있습니다.
이 예는 HTML에 새 요소를 추가하고 요소의 스타일을 정의합니다. 요소 이름은 <myHero>입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>php中文网(php.cn)</title>
<meta charset="utf-8">
<title>为 HTML 添加新元素</title>
<script>document.createElement("myHero")</script>
<style>
myHero {
display: block;
background-color: #9dddd7;
padding:40px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
<myHero>我的第一个新元素</myHero>
</body>
</html>프로그램을 실행하여 확인하세요
JavaScript 문 document.createElement("myHero")는 IE 브라우저에 새 요소를 추가하는 것입니다.
Internet Explorer 브라우저 문제
위 방법을 사용하여 IE 브라우저에 HTML5 요소를 추가할 수 있지만,
Internet Explorer 8 이하 IE 브라우저에서는 위 방법을 지원하지 않습니다.
Sjoerd Visscher가 만든 "HTML5 Enabling JavaScript", " shiv"를 사용하여 이 문제를 해결할 수 있습니다.
<!--[IE 9인 경우]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
위 코드는 주석으로, IE 브라우저 버전이 1보다 작을 때 html5.js 파일을 읽는 데 사용됩니다. IE9를 사용하여 구문 분석합니다.
참고: 국내 사용자는 Baidu 정적 리소스 라이브러리를 사용하세요. (Google 리소스 라이브러리는 중국에서 불안정합니다.):
<!--[IF lt IE 9]>
<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif ]-->
html5shiv는 IE 브라우저에 더 나은 솔루션입니다. html5shiv는 주로 HTML5에서 제안한 새 요소가 IE6-8에서 인식되지 않는 문제를 해결합니다. 이러한 새 요소는 하위 요소를 래핑하기 위한 상위 노드로 사용할 수 없으며 CSS 스타일을 적용할 수 없습니다.
완벽한 Shiv 솔루션
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>php中文网(php.cn)</title> <meta charset="utf-8"> <title>渲染 HTML5</title> <!--[if lt IE 9]> <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script> <![endif]--> </head> <body> <h1>学习HTML就到PHP中文网</h1> <article> php中文网 —— php中文网！！ </article> </body> </html>
html5shiv.js 참조 코드는 IE 브라우저가 <head> 새 HTML5 요소를 구문 분석할 때 먼저 이 파일을 로드해야 합니다.
