HTML5와 CSS3 이해하기

인터넷의 발전은 언제나 새로운 기술의 출현을 낳고 있으며, HTML5와 CSS3는 최근 화두가 되는 주제로, 모든 인터넷 개발자, 특히 프론트엔드 개발자에게는 호기심과 열망이 가득합니다. 그렇다면 우리를 빛나게 만드는 HTML5와 CSS3의 특징은 무엇일까요? WebRebuild 베이징 교환 컨퍼런스와 Pearl Milk Tea Gang에서 " HTML5 및 CSS3 의 비밀 공개"를 공유했습니다. PPT는 다음과 같습니다.
http://docs.google.com/present/view?id=dhpdbrp_51hf88z8g8

HTML5

HTML 5 초안의 전신은 웹 애플리케이션 1.0이라고 불렸습니다. 이는 2004년 WHATWG에서 제안되었고 2007년 W3C에서 승인되었으며 새로운 HTML 작업 팀이 구성되었습니다. 2008년 1월 22일에 첫 번째 공식 초안이 공개되었습니다. HTML 5는 지난 10년 동안 웹 개발 표준에서 가장 큰 도약을 이루었습니다. 이전 버전과 달리 HTML 5는 웹 콘텐츠를 표현하는 데에만 사용되지 않습니다. HTML 5 플랫폼에서는 비디오, 오디오, 이미지, 컴퓨터 기반 상호 작용이 표준화됩니다. . 이제 HTML5의 기술 개요를 살펴보겠습니다.

HTML5 신규 및 제거된 요소

HTML5에는 비디오 및 오디오와 같은 새로운 멀티미디어 및 대화형 요소가 많이 추가되었습니다. HTML4에서는 비디오나 오디오를 삽입하려면 많은 양의 코드를 도입해야 하며 다양한 브라우저와 호환됩니다. img 태그만큼 편리합니다. 페이지 레이아웃 및 콘텐츠 구현 측면에서 HTML5에는 블록 수준 및 의미 요소뿐만 아니라 새로운 구조화된 태그 요소가 많이 추가되었습니다. HTML을 사용하여 파일의 업로드 진행률 표시줄을 표시하려면 HTML5에서 진행률을 사용할 수 있습니다. 이를 나타내는 요소에는 완료된 작업 수를 설명하는 value 속성이 있고, 총 필요한 작업 수를 설명하는 max 속성이 있습니다. DOM을 통해 이 진행률 표시줄의 위치 속성(읽기 전용)을 얻을 수도 있습니다. 인터페이스는 작업 완료율을 나타냅니다. Youtube는 이미 HTML5 기술을 시도했습니다. http://www.youtube.com/html5 ( 방화벽 우회 필요)는 HTML5를 사용하여 만든 데모입니다. 전체 페이지 소스 코드로 판단하면 매우 간단합니다. 물론 HTML5는 입력 상자의 입력 프롬프트와 동일한 입력 및 텍스트 영역의 자리 표시자 속성과 같은 일부 요소에 몇 가지 새로운 속성을 추가합니다. 스크립트에는 로딩 및 실행에 영향을 미치는 비동기 속성이 있습니다. 스크립트. HTML에 공통된 모든 속성을 일반적으로 class, id, tabindex, title과 같은 "전역 속성"이라고 부릅니다. HTML5는 또한 contenteditable, contextmenu, hide 및 기타 속성과 같은 몇 가지 새로운 전역 속성을 추가합니다. HTML5는 또한 item, itempro 및 subject와 같은 HTML5의 새로운 속성과 같은 마이크로데이터에 대한 지원을 추가합니다.

물론 HTML5는 글꼴, 중앙, 스트라이크 등과 같은 페이지 표시를 나타내는 일부 요소도 제거합니다. 이러한 작업은 CSS에서 수행되어야 하기 때문에 여전히 이해하기 쉽습니다. 프레임, 프레임셋, noframe 및 두문자어와 같은 일부 일반적이지 않은 요소는 abbr을 사용하여 약어를 나타냅니다. HTML5는 또한 link의 rev 속성 및 td의 범위 속성과 같이 클라이언트 호환성에 영향을 미치는 일부 HTML 친숙성을 제거합니다. 또한 HTML5는 일부 요소의 align 및 bgcolor 속성과 같은 페이지 표시를 나타내는 일부 속성을 제거합니다.

양식에 대한 HTML5 지원

HTML5는 URL, 이메일, 날짜, 전화 등과 같은 강력한 제어 유형, 필수 표시에 필요한 강력한 제약 속성, 파일 업로드에 대한 속성 허용 및 일부 양식 반복 요소 모델에 대한 지원을 제공합니다. 양식 제출 방법을 XML 제출로 설정할 수 있으며, HTML5 양식은 "Web Forms 2.0"으로 정의됩니다. 현재 Opera9.5+는 Web Forms를 완벽하게 지원합니다. 2.0.

Web Forms 2.0 데모를 보려면 여기를 클릭하십시오. Opera9.5 이상이 필요합니다.

HTML5 DOM 변경

HTML5에는 DOM LEVEL 2 HTML의 HTMLDocument에서 상속된 많은 인터페이스가 있습니다. 물론 HTML5에는 클래스 이름을 기반으로 요소를 선택할 수 있는 getElementsByClassName 지원과 같은 주목할 만한 새 멤버도 있습니다. 선택기에는 querySelector 및 querySelectorAll 두 가지 메소드가 있으며, 이는 CSS 선택기를 기반으로 쿼리할 요소를 얻을 수 있으며 이는 YUI3의 Y.one 및 Y.all과 동일합니다.

HTML5 자바스크립트 API

HTML5는 Javascript에 어떤 새로운 API를 추가합니까?

• 비디오/오디오: HTML5는 개발자가 미디어 콘텐츠 재생 또는 일시 중지와 같은 자신의 사용자 인터페이스를 제어할 수 있도록 비디오 및 오디오용 API를 제공합니다.
• 캔버스: 캔버스는 스크립트 언어(일반적으로 JavaScript)를 사용하여 그래픽을 그리는 데 사용할 수 있는 새로운 HTML 요소입니다. 예를 들어, 그림을 그리거나 이미지를 합성하거나 간단한(그리 단순하지는 않은) 애니메이션을 만드는 데 사용할 수 있습니다. Canvas는 마법 같은 것입니다. 처음에는 Photoshop을 사용하는 것과 같습니다. 모든 방법이 Photoshop과 매우 유사합니다. canvas.getContext('2d')를 통해 캔버스 API를 얻을 수 있으며, 채우기 색상을 설정할 수 있습니다. fillStyle을 사용하거나 스트로크 스타일을 통해 획 색상을 설정합니다. 그리기 경로 작업도 Photoshop의 펜 작업과 일치합니다. Canvas는 Firefox의 실시간 다운로드 상태 통계 등 많은 웹사이트에서 사용되었으며 웹 게임을 작성하는 데에도 사용할 수 있습니다.
• Drag&Drop: 포인팅 장치의 시각 매체에서 "Drag" 동작은 마우스 움직임(mousemove)을 동반한 마우스 다운(mousedown) 이벤트이고, "Drop" 동작은 마우스를 놓을 때 트리거되는 이벤트입니다. DataEvent 및 DataTransfer 인터페이스는 Drag&Drop에서 정의됩니다. 동시에 드래그 작업이 발생하면 dragstart, dragenter, dragleave, drop 및 dragend와 같은 이벤트가 트리거됩니다.
• 웹 작업자: Javascript를 다중 스레드로 만들고 현재 브라우저 작업을 차단하지 않고 백그라운드에서 많은 작업을 수행할 수 있습니다.
• Geolocation: Geolocation.navigator.geolocation.getCurrentPosition(success, error) 메소드를 실행하면 브라우저에서 지리적 위치를 공유할지 여부를 묻는 메시지가 표시됩니다. 성공 함수는 position 객체입니다. 이 position 객체에는 coords 객체가 있습니다. coords 객체에는 위도(치수), 경도(경도) 등 많은 지리적 위치 정보가 포함되어 있어 사용자의 구체적인 위치를 알 수 있습니다. 이미 아이폰 등 일부 휴대폰에서는 널리 사용되고 있습니다.
• 애플리케이션 캐시: 이는 HTML5의 오프라인 애플리케이션 지원입니다. html 요소에 속성 매니페스트를 추가하면 브라우저는 클라이언트에 데이터를 캐시할지 여부를 묻는 메시지를 표시합니다. 매니페스트 파일 목록. 네트워크를 사용할 수 없을 때에도 앱을 사용할 수 있도록 필요한 파일을 캐시하세요. 오프라인 애플리케이션의 경우 Google은 Google Gears 브라우저 확장 프로그램도 개발했지만 결국 Google은 HTML5로 전환하여 HTML5 저장 및 오프라인 애플리케이션의 장점을 본 것 같습니다.
• 저장소: Webkit은 데이터베이스 저장소를 구현했으며 백엔드 데이터베이스 작업과 마찬가지로 데이터를 쿼리하고 일부 작업을 수행할 수 있습니다. 또 다른 유형의 저장소로는 sessionStorage, localStorage와 같은 키-값 저장소가 있는데, 이는 setItem 및 getItem을 통해 값을 저장하고 얻을 수 있으며 쿠키 저장소에 비해 저장 용량이 훨씬 더 큽니다.
• X-Document Messaging: 브라우저는 보안 및 개인 정보 보호를 위해 서로 다른 도메인 간의 문서 통신을 방지합니다. 이는 보안 제한이지만 해롭지 않은 다른 도메인의 문서 통신에 많은 문제를 가져옵니다. 그러나 HTML5 이 교차 문서 통신이 가능하므로 소스 도메인의 출처를 무시하고 스크립트 공격을 방지할 수 있습니다.

HTML5가 당신을 흥분시키나요? 그렇다면 HTML5는 언제 표준이 될까요? 2022년까지 기다려야 한다고 합니다. HTML5가 실제로 도착할 때까지 며칠이 걸리는지 알려주는 흥미로운 웹사이트 http://ishtml5readyyet.com/ 이 있습니다.