Відповіді:
HTML5 є величезним , але також приголомшливим .
На мою думку, мова йде переважно про сумісність . Специфікація йде і вказує навіть крайові регістри, щоб спробувати переконатися, що всі браузери читають розмітку однаково .
По-друге, у HTML5 є відео та аудіо, які роблять саме те, що говорить назва. Якщо ви хочете включити відео чи аудіо, HTML5 повинен зменшити ваші потреби в плагіні.
По-третє, HTML5 включає багато доступності та семантичної допомоги. Наприклад, такі елементи, як <section>і <article>допомагають машинам з'ясувати, який саме вміст має бути. Нові типи введення, подібні до цього, <input type=email>також можуть бути корисними з тих же причин, хоча нові типи введення включають користувацькі інтерфейси, які роблять їх корисними навіть для "звичайних" людських читачів.
Зауважте, що нових функцій форм набагато більше, ніж нових типів введення. Вона також включає підтримку тексту-заповнювача та декількох інших атрибутів.
HTML5 включає <canvas>, що дозволяє малювати 2D (і, з WebGL, 3D) фігури, як графіки або навіть візуалізувати ігри.
Стару поведінку тепер стандартизовано, як, наприклад, стародавній Internet Explorer contentEditable.
ДОКЕТИП нарешті пристойний! Тепер ви можете насправді запам'ятати його!<!DOCTYPE html>
Вказати кодування також простіше, за допомогою <meta charset=utf-8>.
Якщо ви хочете надіслати дані клієнтові і пов’язати їх з елементами, тепер це можна зробити за допомогою спеціальних атрибутів. Наприклад, <div data-status=open>Open</div>тепер остаточно дозволено. Зауважте, що власні імена атрибутів мають бути встановлені префіксом data-.
Тепер ви можете включати SVG та MathML в документи HTML. Раніше ви могли це робити лише з документами XHTML.
Серед безлічі нових функцій і полів HTML5 визначає, одним з найбільш вражаючих є classList, який дозволяє легше керувати атрибутом класу. Замість того, щоб отримати getAttribute / setAttribute та використовувати складні хаки, щоб з'ясувати, які класи має елемент та видалити певний клас із цього елемента, classList робить ці важкі ситуації дуже простими.
Існує також декілька пов'язаних специфікацій, таких як Web Workers, Web Sockets та IndexedDB, які насправді не є частиною HTML5, але всі говорять про них так, ніби вони є. Вони дуже корисні для використання багатоядерних комп'ютерів, спілкування з серверами та зберігання даних на локальному рівні.
Що стосується CSS3, він включає підтримку анімації , переходи , округлі рамки та гнучку модель коробки .
Також у CSS3 є нові селектори, які спрощують зіставлення конкретних елементів на сторінці (наприклад, лише непарні чи парні рядки в таблиці).
Непрозорість, нові одиниці, штрих та рубін також є частиною CSS3.
Я думаю, що в значній мірі охоплює всі важливі частини.
Щоб відслідковувати підтримку функцій та технічних характеристик, ви можете перевірити коли я можу використовувати . Він включає функції HTML5 та CSS3 та такі речі, як SVG, PNG, CSS2.1 та CSS2. Він також відстежує їх статус затвердження (Рекомендація, Пропонована рекомендація, Рекомендація кандидата, Робочий проект, стандарт IETF). FindMeByIP підтримує матриці підтримуваних функцій CSS3 лише за допомогою браузера.
У гайках та болтах відбулося деяке перенаправлення та спрощення синтаксису:
<!DOCTYPE html>languageатрибут для <html>тегу:<html lang="en">xmlnsі xml:langякщо ви хочете відповідати XML)<meta>тег дляcharset :<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 приносить чудові медіа-запити . Медіа-запити такі великі , настільки великі. Не доступний в IE8 і нижче, але він буде підтримуватися IE9.
CSS3 має нарощування лічильників . Ви можете використовувати їх для автоматичного числення елементів без упорядкованого списку, використовуючи :beforeпсевдоселектор та contentстиль, коли упорядкований список чи нумерація були б семантично неправильними. (Наприклад, нумерація етапів заповнення полів форми.)
Якщо ви любитель CSS Resets, у програмі HTML5 Doctor доступний HTML5 CSS Reset . Я вніс три доповнення до цього скидання для своїх особистих сторінок:
text-rendering: optimizeLegibility; додано до стилів у визначенні для <body>label включений у визначення с input і selectоскільки воно потребуєvertical-align: middle;insта :focusз СРС Еріка Мейєра Скидання додано ще вНаявний конкурентний скидання під назвою reset5 доступний, але я його ще не оцінював особисто. Він заснований на обох Еріка Мейєра та HTML5 Doctor.
HTML5 безпеки Cheatsheet відстежує помилки в функції HTML5 , як це реалізовано в різних браузерах, а також помилки в існуючі функції, які добре відстежувати , як добре.
Однак використання елементів HTML5 автоматично не робить ваш код семантичним. WHATWG написав статтю під назвою <секція> - це не просто "семантичний <div>" пояснюючи, що це не просто елемент контейнера.
У HTML 5 є алгоритм побудови контурного перегляду документів. Це може бути використано, наприклад, AT, щоб допомогти користувачеві пересуватися по документу. І <section>, і друзі - важлива частина цього алгоритму. Кожен раз, коли ви вкладаєте <section>, ви збільшуєте глибину контуру на 1 (якщо вам цікаво, які переваги цієї моделі порівнюють із традиційною моделлю <h1> - <h6>), розгляньте веб-фрідер, який хоче інтегруйте структуру документа синдикованого контенту із структурою навколишнього сайту. У HTML 4 це означає аналіз всього вмісту та перенумерування всіх заголовків. У HTML5 заголовки закінчуються на потрібній глибині безкоштовно).
...
Якщо ви просто сліпо перетворите всі <div> s на своїх сторінках у <секції>, навряд чи ваша сторінка матиме обриси, які ви очікували. І, крім того, що це семантичний факс-пас, це збентежить пекло людей, які покладаються на рубрики навігації.
Як і все в цьому світі, існує рамка для веб-додатків HTML5 під назвою SproutCore , побудована колишнім інженером Apple ім'я Чарльз Джоллі.
Окрім html5rocks.com, ви можете бути в курсі html5doctor.com та html5gallery.com .
Є основні елементи компонування, такі як радіус межі, тіні (поле / текст), підтримка rgba тощо; Саме це найвідоміше для CSS3. Більш цікавими є тег канви, відеотег, локальне зберігання, веб-розетки тощо, що створить набагато багатший досвід користувачів у простому HTML / JS / CSS. Ці функції можуть стати чудовою альтернативою Flash в Інтернеті без необхідності додаткових плагінів.
Я вважаю нові елементи HTML досить цікавими ... деякі з них обіцяють семантичну заміну для generic divs. Багатообіцяючий нові елементи включають в себе article, section, aside, figure, nav, header, іfooter , серед інших. Мені дуже подобається ідея семантичних елементів, що замінюють безглузді контейнери.
О так, пов'язаний предмет: значно спрощене doctype- нарешті щось, що я можу набрати з пам'яті!
( Це моя відповідь на подібне запитання на веб-сайті webapps.stackexchange.com )
У Canvas і Web Worker Теми є найбільш цікавими аспектами HTML5 мені. Я написав кілька веб-додатків, які використовують ці функції:
GioAUTHor [sic] широко використовує полотно, щоб дозволити вам накреслити шляхи на карті, а потім знайти найкоротший шлях від початку до кінця (через алгоритм Dijkstra в JavaScript).
Demo Thread Demo використовує полотно, але показує використання Worker Threads у комплекті з демо-кодом. Він також використовує повзунок для введення типу HTML5 = "діапазон" .
Підтримка браузера HTML5 така ж різноманітна, як і самі браузери. Є приємний сайт (в HTML5, natch) про готовність HTML5, який показує, хто готовий до чого.
Що стосується CSS3 - погляньте на сторінку http://css3please.com/ щоб побачити, що ви можете зробити.
Чим пізніше ваш браузер, тим більше шансів ви зможете побачити ефекти.
Аудіо- та відеотеги дозволяють представляти медіа без необхідності використання плагіна, як Flash або Silverlight, а головне працює в браузерах iPhone та iPad. Є деякі проблеми, які потребують розробки щодо кодеків та управління цифровими правами.
Джеремі Кіт щойно випустив справді хорошу книгу на тему "HTML5 для веб-дизайнерів". ви можете перевірити це.
Це перша книга з книги A Book Apart. Дуже рекомендую його проміжним розробникам. A ++
ПРИМІТКА . Можливо, вам доведеться почекати, щоб отримати паперову копію
Це не пропонує думки про важливість, але це корисна дельта між HTML 4 та 5.
Мої 2 ¢ про основні вдосконалення:
<section>і новий алгоритм заголовок оконтуривания (я сказав , що це просто моя 2 ¢)<input type=email>data-* атрибути<audio>і<video>Тому що ще ніхто цього не ставив:
HTML5 чудово підходить для того, що всі перераховані, але він також включає стандартну геолокацію, веб-працівників, веб-сокет, полотно та localStorage. Усі ці інструменти є частинами специфікації HTML5, які використовують безліч JavaScript за лаштунками, щоб зробити це.