HTML5 튜토리얼


HTML5는 HTML의 최신 개정 버전으로, 2014년 10월 W3C(World Wide Web Consortium)에서 표준이 완성되었습니다.

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>

<!doctype> 선언은 HTML5 문서의 첫 번째 줄에 있어야 합니다. 사용이 매우 간단합니다. 

<!DOCTYPE html>

아래의 가장 작은 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 <오디오>

HTML5 애플리케이션

HTML5를 사용하면 간단하게 애플리케이션을 개발할 수 있습니다

  • 로컬 데이터 저장소

  • 로컬 파일에 액세스

  • 로컬 SQL 데이터

  • 캐시 참조

  • Javascript 작업자

  • XHTMLHttpRequest 2

HTML5 그래픽

HTML5를 사용하면 간단하게 그래픽을 그릴 수 있습니다.

  • <

  • 인라인 SVG 사용

  • CSS3 2D/3D 사용

HTML5 CSS3 사용

  • 새 선택기

  • 새 속성

  • 애니메이션

  • 2D/3D 변환

  • 둥근 모서리

  • 그림자 효과

  • 다운로드 가능한 글꼴

CSS3에 대해 자세히 알아보려면 이 사이트의 CSS3 튜토리얼을 확인하세요.

의미적 요소

HTML5는 다음과 같이 많은 의미적 요소를 추가합니다.

标签描述
<article>定义页面独立的内容区域。
<aside>定义页面的侧边栏内容。
<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>

  • <애플릿>

  • <기본 글꼴>

  • <big>

  • <center>

  • <dir>

  • <font>

  • <프레임>

  • <프레임세트>

  • <noframes>

  • <strike>

각 장의 예시

HTML 편집기를 사용하면 HTML을 편집한 다음 버튼을 클릭하여 결과를 볼 수 있습니다.

인스턴스

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<meta charset="utf-8">
</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>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

온라인 결과를 보려면 '사용해 보기' 버튼을 클릭하세요.

HTML5 브라우저 지원

Safari, Chrome, Firefox 및 Opera의 최신 버전은 일부 HTML5 기능을 지원합니다. Internet Explorer 9은 특정 HTML5 기능을 지원합니다.

IE9 이하 브라우저가 HTML5와 호환되도록 하는 방법은 Baidu 정적 리소스의 html5shiv 패키지를 사용하는 것입니다: 

<!--[if lt IE9]> 
<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->

로드 후 CSS를 초기화합니다. 새 태그: 

/*html5*/
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}

HTML5 참조 설명서

이 사이트에서 HTML5에 대한 태그 및 속성 설명을 찾을 수 있으며 자세한 내용을 보려면 HTML5 참조 설명서를 클릭하세요.