>  기사  >  웹 프론트엔드  >  HTML5_html5 튜토리얼 스킬의 기본 기능과 구문을 간단하게 정리

HTML5_html5 튜토리얼 스킬의 기본 기능과 구문을 간단하게 정리

WBOY
WBOY원래의
2016-05-16 15:45:491560검색

HTML5 개요
HTML5는 HTML 4.01, XHTML 1.0 및 XHTML 1.1을 대체하는 HTML 표준의 다음 주요 버전입니다. HTML5는 또한 World Wide Web에서 콘텐츠를 구조화하고 표시하기 위한 표준이기도 합니다.

HTML5는 W3C(World Wide Web Consortium)와 WHATWG(Web Hypertext Technology Working Group) 간의 협력의 산물입니다.

이 새로운 표준에는 과거 Adobe Flash, Microsoft Silverlight 및 Google Gears와 같은 타사 브라우저 플러그인에 의존했던 비디오 재생 및 드래그 앤 드롭과 같은 기능이 추가되었습니다.

브라우저 지원
최신 버전의 Apple Safari, Mozilla FireFox 및 Opera는 대부분의 HTML5 기능을 지원하며 IE9도 일부 HTML5 기능을 지원합니다.

iPhone, iPad 및 Android 휴대폰에 사전 설치된 모바일 브라우저는 모두 HTML5를 잘 지원합니다.

새로운 기능
HTML5에는 현대적인 웹사이트를 구축하는 데 도움이 되는 많은 새로운 요소와 속성이 도입되었습니다. HTML5에 도입된 주요 기능은 다음과 같습니다.

새로운 의미 요소:

,

Forms 2.0: HTML 웹 양식이 개선되어 태그에 대한 몇 가지 새로운 속성이 도입되었습니다.

영구적인 로컬 저장소: 타사 플러그인을 통해 구현되지 않도록 합니다.

WebSocket: 웹 애플리케이션을 위한 차세대 양방향 통신 기술입니다.

서버 푸시 이벤트: HTML5는 웹 서버에서 웹 브라우저로 이벤트(SSE(서버 푸시 이벤트)라고도 함)를 도입합니다.

캔버스: JavaScript를 사용하여 프로그래밍 방식의 2D 드로잉을 지원합니다.

오디오 및 비디오: 타사 플러그인을 사용하지 않고도 웹페이지에 오디오 또는 비디오를 삽입할 수 있습니다.

지리적 위치: 사용자는 자신의 지리적 위치를 웹페이지와 공유하도록 선택할 수 있습니다.

마이크로데이터: HTML5 외부에서 사용자 정의 어휘를 생성하고 사용자 정의 의미론으로 웹페이지를 확장할 수 있습니다.

드래그 앤 드롭: 동일한 웹페이지의 항목을 한 위치에서 다른 위치로 드래그 앤 드롭합니다.

하위 호환성
HTML5는 가능한 한 기존 브라우저와 하위 호환되도록 설계되었습니다. 새로운 기능은 기존 기능을 기반으로 구축되었으며 이를 통해 이전 브라우저에 대한 대체 콘텐츠를 제공할 수 있습니다.

개별 HTML5 기능에 대한 지원을 감지하려면 소량의 JavaScript 코드를 사용하는 것이 좋습니다.

HTML5 구문

HTML5에는 이미 웹에 게시된 HTML 4 및 XHTML1 문서와 호환되지만 HTML 4의 더 복잡한 SGML 기능과 호환되지 않는 "자체" HTML 구문이 있습니다.

HTML5에는 소문자 태그 이름, 인용 속성, 속성에 값이 있어야 하며 모든 빈 요소를 닫아야 하는 XHTML의 구문 규칙이 없습니다.

그러나 HTML5는 더 유연하며 다음 형식을 지원합니다.

태그 이름은 대문자로 표기하세요.
속성에 대한 큰따옴표는 선택 사항입니다.
속성 값은 선택사항입니다.
빈 요소를 닫는 것은 선택사항입니다.
DOCTYPE
이전 버전의 HTML에서는 HTML 언어가 SGML을 기반으로 하고 DTD를 참조해야 하기 때문에 DOCTYPE이 매우 깁니다.

HTML5 작성자는 간단한 구문을 사용하여 다음 형식의 DOCTYPE을 지정할 수 있습니다.

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

위 구문은 대소문자를 구분하지 않습니다.

문자 인코딩
HTML5 작성자는 다음과 같은 간단한 구문을 사용하여 문자 인코딩을 지정할 수 있습니다.

XML/HTML 코드클립보드에 콘텐츠 복사
  1. <메타 문자 집합="UTF-8"> 

위 구문은 대소문자를 구분하지 않습니다.