it-gundan.com

HTML5 / CSS3의 새로운 기능

이 사이트이 사이트 를 보았지만 요약해야 할 것이 많습니다. HTML5가 일반적인 이전 (X) HTML/CSS와 다른 점/더 나은 점은 무엇입니까?

23
Jason

HTML5는 거대한 이지만 awesome 입니다.

필자의 견해로는 거의 상호 운용성 입니다. 사양은 Edge 사례를 지정하여 모든 브라우저가 동일한 방식으로 마크 업을 읽도록합니다 .

두 번째로 HTML5에는 비디오와 오디오가 있는데 이름에서하는 것과 정확히 일치합니다. 비디오 또는 오디오를 포함하려면 HTML5에서 플러그인 요구를 줄여야합니다.

세 번째로 HTML5에는 많은 접근성과 의미 적 도움말이 포함되어 있습니다. 예를 들어, <section><article>와 같은 요소는 머신이 어떤 컨텐츠가 있어야하는지 파악하도록 도와줍니다. <input type=email>와 같은 새로운 입력 유형도 같은 이유로 유용 할 수 있지만 새로운 입력 유형에는 "일반적인"인간 독자에게도 유용한 사용자 정의 UI가 포함되어 있습니다.

새로운 Forms 기능은 새로운 입력 유형 이상의 기능입니다. 또한 자리 표시 자 텍스트 및 기타 여러 특성에 대한 지원도 포함합니다.

HTML5에는 <canvas>가 포함되어있어 차트 나 렌더링 게임과 같은 2D (및 WebGL, 3D) 모양을 그릴 수 있습니다.

Internet Explorer의 고대 contentEditable과 같은 이전 동작이 표준화되었습니다.

DOCTYPE은 마침내 괜찮습니다! 이제 실제로 암기 할 수 있습니다! <!DOCTYPE html>

<meta charset=utf-8>를 사용하면 인코딩을 쉽게 지정할 수 있습니다.

클라이언트로 데이터를 전송하고 요소와 연관 시키려면 이제 사용자 정의 속성으로 수행 할 수 있습니다. 예를 들어, <div data-status=open>Open</div>이 (가) 마침내 허용됩니다. 사용자 정의 속성 이름은 data-로 시작해야합니다.

이제 HTML 문서에 SVG 및 MathML을 포함 할 수 있습니다. 이전에는 XHTML 문서로만 할 수있었습니다.

HTML5에서 정의한 여러 가지 새로운 기능과 필드 중에서 가장 인상적인 것 중 하나는 classList로, 클래스 속성을보다 쉽게 ​​조작 할 수 있습니다. classAttribute는 getAttribute/setAttribute를 사용하지 않고 복잡한 해킹을 사용하여 요소가 가진 클래스를 파악하고 해당 요소에서 특정 클래스를 제거하는 대신 어려운 상황을 매우 간단하게 만듭니다.

Web Workers, Web Sockets 및 IndexedDB와 같은 여러 관련 사양도 있습니다.이 사양은 실제로 HTML5의 일부는 아니지만 모든 사람들이 마치 마치 마치 그것에 대해 이야기합니다. 멀티 코어 컴퓨터를 활용하고 서버와 통신하고 로컬로 데이터를 저장하는 데 매우 유용합니다.

CSS3의 경우 애니메이션 , 전환 , 둥근 테두리 에 대한 지원을 포함합니다. 유연한 박스 모델 .

CSS3에는 새로운 선택기가 추가되어 페이지의 특정 요소 (예 : 테이블의 홀수 또는 짝수 행)를보다 쉽게 ​​일치시킬 수 있습니다.

불투명도, 새로운 단위, Marquee 및 Ruby도 CSS3의 일부입니다.

나는 모든 중요한 부분을 거의 다룰 것이라고 생각합니다.

33
luiscubal

기능 및 사양 지원을 추적하려면 언제 사용할 수있는 를 확인할 수 있습니다. 여기에는 HTML5 및 CSS3 기능과 SVG, PNG, CSS2.1 및 CSS2와 같은 것들이 포함됩니다. 또한 승인 상태 (권장, 제안 권장 사항, 후보 추천, 실무 초안, IETF 표준)도 추적합니다. FindMeByIP 브라우저에서 지원되는 CSS3 기능의 행렬 만 유지 관리합니다.

너트와 볼트에서 구문의 일부 재조정과 단순화가 발생했습니다.

  • 단순화 된 doctype 문자열 : _<!DOCTYPE html>_
  • _<html>_ 태그의 단순화 된 language 속성 : _<html lang="en">_
    (XML 준수를 원하는 경우 xmlns 및 _xml:lang_를 계속 포함 할 수 있음)
  • charset 전용 _<meta>_ 태그 : _<meta charset="utf-8" />_
  • script은 (는) 더 이상 type 속성을 허용하지 않으며 원격 스크립트에는 charset이 (가) 필요합니다.
    _<script src="/media/js/jquery.js" charset="utf-8"></script>_ (인라인 스크립트는 추가 속성이 필요하지 않습니다)

HTML5는 마크 업이 훨씬 더 의미가 있고 의미 가 가능하며 전반적으로 읽기/쓰기가 훨씬 쉽고 파일 크기가 더 작습니다. _<div id="nav">_ 대신 _<nav>_ 만 있습니다. 별로 보이지 않지만 합산됩니다.

XHTML1 및 HTML4의 많은 요소가 더 이상 사용되지 않습니다. HTML5에서는 다음 요소가 지원되지 않습니다. _<acronym>_, _<applet>_, _<basefont>_, _<big>_, _<center>_, _<dir>_, _<font>_ , _<frame>_, _<frameset>_, _<noframes>_, _<s>_, _<strike>_, _<tt>_, _<u>_ 및 _<xmp>_.

HTML5의 몇 가지 새로운 요소는 의미 적 마크 업 만 더 추가하기위한 것이며 _<div>_에 대한보다 의미있는 대안을 제공하는 것 외에는 아무 것도하지 않습니다. 이러한 새로운 요소는 다음과 같습니다. _<article>_, _<section>_, _<aside>_, _<hgroup>_, _<header>_, _<footer>_, _<nav>_, _<time>_, _<mark>_, _<figure>_ 및 _<figcaption>_.

HTML5 양식이 대폭 향상되었습니다 .

새로운 입력 유형

새로운 속성 :

새로운 요소

우리는 하루 종일 양식에 들어갈 수 있지만 여기에이 새로운 것들을 더 잘 설명 할 수있는 자료가 있습니다.

CSS3는 멋진 Media Queries 를 제공합니다. 미디어 쿼리도 그러하므로 so 훌륭합니다. IE8 이하에서는 사용할 수 없지만 IE9에서 지원됩니다.

CSS3에는 증가 카운터 가 있습니다. 정렬 된 목록 또는 번호 매기기가 의미 상 올바르지 않은 경우 _:before_ 의사 선택기 및 content 스타일을 사용하여 정렬 된 목록없이 요소의 번호를 자동으로 지정할 수 있습니다. 예를 들어 양식 필드를 채우는 단계의 번호를 지정합니다.

CSS 재설정의 팬이라면 HTML5 Doctor에서 HTML5 CSS Reset 을 사용할 수 있습니다. 개인 페이지에 대해이 재설정에 세 가지를 추가했습니다.

  • _text-rendering: optimizeLegibility;_에 대한 정의의 스타일에 _<body>_가 추가되었습니다 __
  • label에 _vertical-align: middle;_이 (가) 필요하므로 inputselect 정의에 포함됨
  • ins 및 _:focus_의 스타일 Eric Meyer의 CSS 재설정

reset5 이라는 경쟁 재설정을 사용할 수 있지만 아직 개인적으로 평가하지는 않았습니다. Eric Meyer 및 HTML5 Doctor 재설정 을 기반으로합니다.

HTML5 Security Cheatsheet 는 다양한 브라우저에서 구현 된 HTML5 기능의 버그를 추적하며 추적하기에 좋은 기존 기능의 버그도 포함합니다.

그러나 HTML5 요소를 사용한다고해서 코드 의미가 자동으로 만들어지는 것은 아닙니다. WHATWG는 <section>이라는 기사를 단순히 컨테이너 요소가 아니라고 설명하는 "의미 적 <div>" 가 아닙니다.

HTML 5에는 문서의 개요보기를 구성하는 알고리즘이 있습니다. 예를 들어, AT와 같이 사용자가 문서를 쉽게 탐색 할 수 있습니다. <섹션>과 친구는이 알고리즘의 중요한 부분입니다. <섹션>을 중첩 할 때마다 아웃 라인 깊이가 1 씩 증가합니다 (이 모델의 장점이 기존 <h1>-<h6> 모델과 비교되는 것이 궁금하다면 웹 기반 피드 리더를 고려하십시오. 신디케이트 된 컨텐츠의 문서 구조를 주변 사이트의 문서 구조와 통합합니다. HTML 4에서는 모든 컨텐츠를 구문 분석하고 모든 표제의 번호를 다시 매 깁니다. HTML5에서는 표제가 오른쪽 깊이에서 무료로 제공됩니다).

...

페이지의 모든 <div>을 <섹션>으로 맹목적으로 변환하면 페이지에 예상 한 개요가 표시 될 가능성이 거의 없습니다. 그리고 시맨틱 한 가짜 파가 아닌, 이것은 네비게이션을 향한 사람들의 혼란을 혼란스럽게 할 것입니다.

이 세상의 다른 모든 것들과 마찬가지로 SproutCore 라는 HTML5 웹 응용 프로그램을위한 프레임 워크가 있으며 ex-Apple engineer 졸리.

html5rocks.com 외에도 html5doctor.comhtml5gallery.com .

18
Bryson

경계 반경, 그림자 (상자/텍스트), rgba 지원 등과 같은 기본 레이아웃이 있습니다. 이것이 CSS3가 가장 잘 알려진 것입니다. 일반 HTML/JS/CSS에서 훨씬 풍부한 사용자 경험을 제공하는 캔버스 태그, 비디오 태그, 로컬 스토리지, 웹 소켓 등이 더 흥미 롭습니다. 이러한 기능은 추가 플러그인없이 웹에서 Flash를 대체 할 수있는 가능성이 있습니다.

4
D4V360

새로운 HTML 요소가 다소 흥미 롭다는 것을 알았습니다. 그 중 일부는 일반 divs에 대한 유망한 의미 대체입니다. 유망한 새로운 요소로는 article, section, aside, figure, nav, headerfooter 등이 있습니다. . 의미없는 컨테이너를 대체하는 의미 적 요소라는 아이디어가 정말 마음에 듭니다.

예, 관련 항목 : 단순화 된 doctype-마지막으로 메모리에서 입력 할 수있는 것!

4
Grant Palin

( 이것은 my answer webapps.stackexchange.com 에서 비슷한 질문에 대한 것입니다)

Canvas Web Worker Threads 는 HTML5의 가장 흥미로운 측면입니다. 나를. 이러한 기능을 사용하는 웹 응용 프로그램을 작성했습니다.

GioAUTHor [sic]는 캔버스를 광범위하게 사용하여 맵에 경로를 그린 다음 시작부터 끝까지 가장 짧은 경로를 찾습니다 (JavaScript의 Dijkstra 알고리즘을 통해).

JavaScript Thread Demo 캔버스를 제한적으로 사용하지만 데모 코드로 완성 된 Worker Threads 사용을 보여줍니다. 또한 HTML5 입력 유형 = "범위" 슬라이더 컨트롤을 사용합니다.


HTML5 브라우저 지원은 브라우저 자체만큼 다양합니다. 누가 무엇을 준비했는지를 보여주는 HTML5 준비 에 대한 Nice site (HTML5, natch)가 있습니다.

4
Alan

CSS3과 관련하여 http://css3please.com/ 에서 수행 할 수있는 작업을 확인하십시오.

브라우저가 늦을수록 효과를 볼 수 있습니다.

2
Sniffer

이것은 중요도에 대한 의견을 제시하지는 않지만 HTML 4와 5 사이의 유용한 델타입니다.

주요 개선 사항에 대한 나의 2 ¢ :

  • <section> 및 새로운 헤더 개요 알고리즘 (단지 my 2 ¢)
  • 새로운 양식 요소 (예 : <input type=email>
  • data-* 속성
  • 클라이언트 측 스토리지
  • 기본 <audio><video>
1
Paul D. Waite

오디오 및 비디오 태그를 사용하면 Flash 또는 Silverlight와 같은 플러그인이 없어도 미디어를 표시 할 수 있으며, 가장 중요한 것은 iPhone 및 iPad 브라우저에서 작동합니다. 코덱 및 디지털 권한 관리와 관련하여 해결해야 할 몇 가지 문제가 있습니다.

1
Steve Tranby

Jeremy Kieth는 방금 "웹 디자이너를위한 HTML5"라는 주제에 대한 훌륭한 책을 발표했습니다. 당신은 그것을 확인하고 싶을 수도 있습니다.

A Book Apart의 첫 번째 책입니다. 중급에서 고급 설계자에게 권장합니다. A ++

http://books.alistapart.com/

NOTE : 하드 카피를 얻기 위해 기다려야 할 수도 있습니다

1
Kevin

아직 아무도 이것을 넣지 않았기 때문에 :

HTML5는 모든 사람이 나열한 내용에 적합하지만 표준 지리적 위치, 웹 워커, 웹 소켓, 캔버스 및 localStorage도 포함합니다. 이러한 모든 도구는 HTML5 사양의 일부이며, 많은 자바 스크립트를 사용하여이를 구현합니다.

0
Ilan Biala