Комментарий: HTML5 имеет много новых функций. Новый код. Очень хороший. Давайте обобщу это сейчас. Только для справки
1. Новый документДаже если браузер не понимает этого предложения, он будет отображаться в соответствии со стандартным режимом.
2. Цифровые элементы
Используйте <Igrand> и <FigCation> для семантически представлять изображения с помощью названий
<Рисунок>
<img src = path/to/image alt = about image/>
<FigCaption>
<p> Это изображение чего -то интересного. </p>
</figcaption>
</Рисунок>
3. Переосмысленный <mall>
<mall> был переопределен и теперь используется для представления небольших наборов, таких как уведомление об авторском праве внизу веб -сайта
4. Удалите атрибуты типа в ссылке и тегах скрипта
5. Добавить/нет кронштейнов
HTML5 не требует, чтобы атрибуты были цитированы и закрыты или нет, но рекомендуется добавлять кавычки и закрытые теги.
6. Сделайте свой контент редактируемым, просто добавьте довольную собственность
7. Входы электронной почты
Если мы установим тип ввода в электронную почту, браузер проверит, является ли ввод типа электронной почты. Конечно, мы не можем полагаться исключительно на проверку фронта, и задняя часть также должна иметь соответствующую проверку.
8. Заполнители
Значение этого входного атрибута заключается в том, что нет необходимости использовать JavaScript для создания эффекта заполнителя
9. местное хранение
Используйте локальное хранилище, чтобы постоянно хранить большие фрагменты данных на клиенте (если не удалось активно). В настоящее время большинство браузеров уже поддерживали их. Вы можете проверить, существует ли Window.LocalStorage перед использованием их.
10. Семантический заголовок и нижний колонтитул
11. Больше функций формы HTML5
12. IE и HTML5
По умолчанию новые элементы HTML5 становятся встроенными, но можно использовать следующий метод
Он отображается в режиме блока
заголовок, нижний колонтитул, статья, раздел, навигация, меню, hgroup {
дисплей: блок;
}
К сожалению, т.е. игнорирует эти стили и может так исправить:
document.createElement (статья);
Document.createElement (нижний колонтитул);
document.createElement (заголовок);
document.createElement (hgroup);
Document.createElement (NAV);
Document.createElement (меню);
13. Hgroup
Обычно используется для сочетания набора заголовков в заголовке, таких как
<заголовок>
<hgroup>
<h1> Напомним фан -страницу </h1>
<h2> только для людей, которые хотят воспоминания о жизни. </h2>
</hgroup>
</header>
14. Требуемый атрибут
Требуемое свойство определяет, требуется ли вход, вы можете объявить его ниже.
<input type = text name = someinput требуется>
или
<input type = text name = someinput требуется = требуется>
15. Свойства автофокусировки
Как и его значение, он должен сосредоточиться на ящике ввода
<input type = text name = someinput Placeholder = douglas Quaid требуется автофокус>
16. Аудио поддержка
HTML5 предоставляет теги <audio>, вам больше не нужно рендеринг звука в соответствии со сторонними плагинами. Большинство современных браузеров обеспечивают поддержку аудио HTML5, но он все еще должен обеспечить некоторую обработку совместимости, например, как
<Audio Autoplay = Autoplay Controls = Controls>
<source src = file.ogg /> <! - ff–>
<Source src = file.mp3 ″ /> <! - webkit–>
<a href = file.mp3 ″> Загрузите этот файл. </a>
</audio>
17. Video Support
Так же, как Audio, тег <video> обеспечивает поддержку видео. Поскольку в документе HTML5 не указано конкретное кодирование для видео, браузер решает, какие кодировки поддержать, что приводит к множеству несоответствий. Safari и IE поддерживают форматы кодирования H.264, Firefox и Opera поддерживают форматы кодирования Theora и Vorbis. При использовании видео HTML5 вы должны предоставить:
<Видео управляет предварительной нагрузкой>
<source src = cohagenphonecall.ogv type = video/ogg; Codecs = 'vorbis, Theora' />
<source src = cohagenphonecall.mp4 ″ type = video/mp4; 'Codecs =' avc1.42e01e, mp4a.40.2 ' />
<p> Ваш браузер старый. <a href = cohagenphonecall.mp4 ″> Загрузите это видео вместо этого. </a> </p>
</video>
18. Предварительная загрузка видео
Свойство для предварительной нагрузки настолько просты, как это означает буквально, и вам нужно решить, нужно ли вам предварительно загружать видео при загрузке страницы
<Видео -предварительная нагрузка>
19. Показать управление видео
<Видео -предварительное управление>
20. Регулярные выражения
Из -за атрибута шаблона мы можем напрямую использовать регулярные выражения в вашей разметке
<form action = method = post>
<метка для = имя пользователя> Создать имя пользователя: </label>
<input type = text name = username id = username waceholder = 4 <> 10 ″ pattern = [a-za-z] {4,10} AutoFocus требуется>
<Кнопка Типа = отправить> go </button>
</form>
21. Поддержка атрибута обнаружения
В дополнение к Modernizr, мы также можем использовать JavaScript, чтобы просто обнаружить, поддерживаются ли некоторые свойства, такие как:
<Скрипт>
if (! 'шаблон' в document.createElement ('input')) {
// Проверка на стороне клиента/сервера
}
</script>
22. Марк Элементы
Рассмотрим элемент <cark> как выделение. Когда я выбираю абзац текста, эффект разметки JavaScript на HTML должен быть следующим образом:
<h3> Результаты поиска </h3>
<p> Они были прерваны, сразу после того, как Квато сказал, <Марк> Откройте свой разум </mark>. </p>
23. Когда использовать <div>
HTML5 представил так много элементов, поэтому нам все еще нужно использовать Div? Вы можете использовать Div, когда нет лучших элементов.
24. Хотите использовать HTML5 сейчас?
Не ждите 2022 года, теперь он готов к использованию, просто сделайте это.
25. Что не HTML5
1) SVG
2) CSS3
3) Геолокация
4) Клиентское хранилище
5) Веб -розетки
26. Свойства данных
<div id = mydiv Data-custom-attr = my value> bla bla </div>
Используется в CSS:
<style>
H1: Hover: после {
Контент: ATTR (HOVER-HOVER-HOVER);
Цвет: черный;
позиция: абсолютно;
слева: 0;
}
</style>
<h1-hover-response = я сказал, что не трогай меня!> Не трогай меня </h1>
27. Выходной элемент
Элемент <sutput> используется для отображения результатов расчета, а также имеет метку для атрибута.
28. Используйте вход диапазона для создания ползунков
Тип диапазона, на который ссылаются HTML5, может создать слайдер, который принимает мин, максимум, шаг и значения свойства
Вы можете использовать CSS ': до и: после отображения значений min и max
<Вход Тип = Имя диапазона = диапазон min = 0 ″ max = 10 ″ step = 1 ″ value =>
input [type = range]: до {content: attr (min); Право накладки: 5px;
}
input [type = range]: после {content: attr (max); Заполнение-лето: 5px;}