1. Новый Doctype
Итак, используя Doctype, вы наверняка забываете эти 2 строчки?\
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Но в HTML5 всё это гораздо проще:
И вправду, но вы знаете что этот Doctype даже не требуется в html5?Тем не менее, он используется для текущей и предыдущих версиях браузеров, которые требуют doctype.<!DOCTYPE html>
2. Элемент 'The figure'
Рассмотрим следующие надписи для изображений:
Здесь , к сожалению, нет простого способа связать подпись в теге <p></p> к самому изображению.HTML5 исправляет это с введением<img src="path/to/image" alt="About image" />
<p>Image of Mars. </p>
<figure>
элемента. В сочетании с <figcaption>
элемент, мы можем ассоциировать подписи с изображениями:)<figure>
<img src="path/to/image" alt="о картинке" />
<figcaption>
<p>Данная картина очень красива </p>
</figcaption>
</figure>
3.Изменение <small>
Теперь в html5 small рассматривается как мелкий шрифт.
Представим себе надпись о авторских правах в футере страницы и , учитывая способность html5,с тегом <small> эта надпись будет выглядеть идеально.
4.Никаких типов в тегах ссылок и скриптов!
Возможно, вы до сих пор добавляете атрибут type в для ваших ссылок и скриптов:
<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" />
<script type="text/javascript" src="path/to/script.js"></script>
Но теперь, это не является необходимым, так как сам тег указывает на тип данного объекта.(скрипт или ссылка ).Тоесть, можем просто удалить ненужный код.
<link rel="stylesheet" href="path/to/stylesheet.css" />
<script src="path/to/script.js"></script>
5.Создавать кавычки или нет
Создавать или нет?Теперь, это дело вкуса, пользуйтесь как вам нравится.
<p class=myClass id=someId>Запускаем коллайдер.
6.Делаем контент редактируемым
Новые браузеры имеют отличный новый атрибут, который может быть применен к элементам, называемых contenteditable
. Он позволяет пользователю редактировать любой текст, содержащийся в элементе.
Или, как мы написали ранее, теперь мы можем написать так:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>untitled</title>
</head>
<body>
<h2> To-Do List </h2>
<ul contenteditable="true">
<li> Break mechanical cab driver. </li>
<li> Drive to abandoned factory
<li> Watch video of self </li>
</ul>
</body>
</html>
<ul contenteditable=true>
7.Input форма для e-mail
Если мы будем применять type
для полей e-mail'ов , то вводится будут только текст ввида электронной почты.Тоесть проверка данных уже реализована в самом html5Но мы не можем 100% полагаться на этот раз пока, по понятным причинам. In older browsers that do not understand this “email” type, they'll simply fall back to a regular textbox. В более старых браузеров, которые не понимают этого "email" типа, они просто будут читать это поле как обычно.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>untitled</title>
</head>
<body>
<form action="" method="get">
<label for="email">Email:</label>
<input id="email" name="email" type="email" />
<button type="submit"> Submit Form </button>
</form>
</body>
</html>
8.Маркеры(placeholders)
Раньше мы должны были использовать js для создания маркеров.Тоесть если в input forme пользователей удаляет этот текст, то после пару щелчков мыши вне это формы текст опять появится.Теперь можем сделать так
<input name="email" type="email" placeholder="doug@givethesepeopleair.com" />
8.Локальное хранение данных
10. Семантический Header
и Footer
Эти времена уже прошли...:
В HTML5 всё вышенаписанный код можно заменить на :
<div id="header">
...
</div>
<div id="footer">
...
</div>
<header>11.Особенности форм в html5
...
</header>
<footer>
...
</footer>
11.Internet explorer и html5
К сожалению, этот Internet Explorer требует немного пререканий, чтобы понять новые элементы HTML5.
Для того, чтобы убедиться , что новые элементы HTML5 корректно отображаются, необходимо добавить сделать стили для них:
header, footer, article, section, nav, menu, hgroup {Для IE также нужно писать:
display: block;
}
document.createElement("article");Кстате, Remy Sharp создали скрипт , которые исправляет некоторые проблемы с выводом.
document.createElement("footer");
document.createElement("header");
document.createElement("hgroup");
document.createElement("nav");
document.createElement("menu");
<!--[if IE]>13.hgform
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
С помощью hgroup элемента, можно сгруппировать заголовки(h1,h2 и др) вместе.
14.Атрибут Required(обязательный)
<header>
<hgroup>
<h1> Recall Fan Page </h1>
<h2> Only for people who want the memory of a lifetime. </h2>
</hgroup>
</header>
В формах теперь появился новый атрибут required,который обозначает, что данный элемент является обязательным.
<input type="text" name="someInput" required>А можно и так:
<input type="text" name="someInput" required="required">
Любой метод годится вообщем.В следующем примере данные не отправятся, пока элемент someInput не будет заполнен:
<form method="post" action="">15.Атрибут Autofocus.
<label for="someInput"> Your Name: </label>
<input type="text" id="someInput" name="someInput" placeholder="Douglas Quaid" required>
<button type="submit">Go</button>
</form>
Если какая-то часть input формы должна быть выделена, просто используем автофокус:
<input type="text" name="someInput" placeholder="Douglas Quaid" required autofocus>16.Поддержка аудио.
В настоящее время, только самые последние браузеры предлагают поддержку HTML5 аудио.
<audio autoplay="autoplay" controls="controls">Заметим, что Firefox потребует Ogg тип, а вот Webkit-у достаточно и общего типа.Поэтому придётся создавать 2 типа аудиозаписей.
<source src="file.ogg" />
<source src="file.mp3" />
<a href="file.mp3">Download this file.</a>
</audio>
Обратите внимание, что IE не поддерживает данную фитчу, а опера медленно работает с .wav форматом.
17.Поддержка видео.
Аналогично аудио, в html5 поддерживается видео!Так как не все браузеры поддерживают формат H.264, нужно добавить соответствующий код:
<video controls preload>18.Preload видео.
<source src="cohagenPhoneCall.ogv" type="video/ogg; codecs='vorbis, theora'" />
<source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" />
<p> Your browser is old. <a href="cohagenPhoneCall.mp4">Download this video instead.</a> </p>
</video>
Этот атрибут необходим, чтобы знать, действительно ли пользователь хочет загружать видео, или ему это вовсе необходимо.
<video preload>19.Display controls.
Если вы заметили, то при просмотре видео, не отображается контроль управления.Для включения,добавьте атрибут controls в элемент видео.
<video preload controls>20.Регулярные выражения.
Ну чтож, теперь регулярные выражения уже есть встроенные в html5!Для этого есть атрибут pattern.
<form action="" method="post">
<label for="username">Create a Username: </label>
<input type="text"
name="username"
id="username"
placeholder="4 <> 10"
pattern="[A-Za-z]{4,10}"
autofocus
required>
<button type="submit">Go </button>
</form>
Если вы знакомые с регулярными выражениями, то вы знаете, что запись
[A-Za-z]{4,10}
принимает только верхние и строчные буквы. Эта строка должна иметь как минимум 4 символов и не более 10.21.Проверяем работу атрибута.
Какая польза от этих атрибутов, если у нас нет способа узнать, поддерживает ли их браузер?Есть несколько способов выяснить это. Мы обсудим два. Первый вариант заключается в использовании Modernizr библиотеки.Например, в нашем предыдущем примере, если мы хотим определить, можно ли в браузере реализовать
pattern
атрибут?Добавим немного JavaScript на нашем сайте:alert( 'pattern' in document.createElement('input') ) // boolean;Выше мы создаем новый
input
элемент, для определения того, работает ли pattern
атрибутв браузере. Если это так, браузер поддерживает эту функцию.<script>22.Элемент 'Mark'
if (!'pattern' in document.createElement('input') ) {
// do client/server side validation
}
</script>
Если вам нужна подсветка текста, то используйте теги <mark></mark>
<h3> Search Results </h3>23. Когда нужно использовать <div> ?
<p> They were interrupted, just after Quato said, <mark>"Open your Mind"</mark>.</p>
Некоторые из нас задают вопросы, когда мы должны использовать тег div.. Благодаря нему мы имеем доступ к
header
, article
, section
, footer.
.24. Что действительно надо использовать ?
25. Html 5 - это не....
Многие люди считают, что большинство javascript кода есть в html5.Пожалуй, даже Apple не сможет это реализовать.Если вкратце,то это простой способ для обозначения современных веб-стандартов.Важно понятно, чем html5 не является.
- SVG - не html5, ну как минимум ещё лет 5.
- CSS3 - ну здесь всё понятно
- Данные юзера(Client storage).
- Web соккеты
P.S Ссылка на более полный англоязычный источник.
Спасибо за внимание:)
Комментариев нет:
Отправить комментарий