HTML является преобладающим языком разметки для веб-страниц. Мы можем передать сообщение о макете веб-страницы, содержании, эффектах и т. Д. Через HTML. HTML5 как последняя версия этой серии революционизирует Интернет. Хотя HTML5 еще не был установлен в качестве стандарта, его новые возможности уже затронули наши сердца.
Здесь, в этой статье, я хотел бы представить вам пять вещей, которые меня волнуют в HTML5, которые, безусловно, принесут вам совершенно новый веб-опыт.
1. Новые теги макета
Мы можем видеть, что теги макета HTML4 одинаковы в семантическом значении — div id= Однако в спецификации HTML5 добавлено немало полезных тегов для структурирования разметки. Он определяет разделы вашей веб-страницы как области макета без использования тега div То есть ваш заголовок окружен тегом <header><nav>
Эти теги макета в HTML5 не зависят друг от друга. Они чище, аккуратнее и организованнее, что позволяет поисковым системам и статистическому программному обеспечению распознавать каждую часть. Такой определенный контент позволяет системам и гибридным веб-сайтам легко анализировать, ссылаться и ссылаться на ваши статьи.
2. Лучшая система форм
HTML5 приносит большие улучшения, которые приносят пользу как создателям форм, так и пользователям, заполняющим формы. Например, одним из наиболее распространенных аспектов проверки формы является применение обязательных полей — предотвращение отправки формы до тех пор, пока не будут введены определенные данные. Теперь это можно просто сделать, добавив requiredinputselecttextarea
<input type = "text"… требуется />
Кроме того, как вы можете видеть на рисунке выше, вы можете указать типы записей, такие как формат адреса электронной почты, который вы ожидаете от полей формы, а затем браузеры могут проверить, соответствуют ли данные, введенные в определенном поле, ожидаемой структуре.
Таким образом, новые типы form Это ускорит время загрузки, улучшит взаимодействие с пользователем, облегчит написание веб-форм и сделает их более согласованными в Интернете.
3. Аудио и видео API
HTML5 предоставляет встроенную поддержку мультимедиа с помощью элементов <audio><video> Он предоставляет набор функциональных API для управления отображением мультимедиа. Например, есть ряд полезных атрибутов для <video>poster Те элементы, которые управляют отображением мультимедиа, доступны для редактирования.
Таким образом, HTML5, очевидно, дает нам гораздо лучший опыт видео и аудио, позволяет нам воспроизводить видео или аудио, а также настраивать сложные взаимодействия с пользователем с помощью событий мыши и клавиатуры.
4. Canvas API
Рисование картинок на веб-странице было проблемой долгое время. Ранее нам приходилось просить помощи у таких плагинов, как Flash, Silverlight и других. Однако в эпоху Flash до HTML5 проблема решена. Тег HTML5 canvas
Элемент canvas Он состоит из области рисования, определенной в HTML-коде, с атрибутами heightwidth Затем код JavaScript может получить доступ к области через полный набор функций рисования, аналогичных другим обычным 2D API.
Таким образом, canvas Некоторые предполагаемые варианты использования canvas Приведенный выше снимок экрана представляет собой canvas
5. Геолокационный API
Чтобы обнаружить местоположение клиентского устройства в прошлом, вам, как правило, необходимо проверить IP-адрес клиента. Но определение местоположения пользователя по IP может быть неэффективным. Итак, теперь HTML5 предоставляет Geolocation API для географической информации, которая может идентифицировать местоположение пользователя при доступе к веб-сайту через GPS. Поскольку многие современные телефоны теперь оснащены функциями GPS, с этих устройств проще получать информацию о местоположении. API Geolocation предоставляет интерфейсу Geolocation функцию getCurrentPosition() Сигнатура функции:
void getCurrentPosition (в PositionCallback successCallback);
В таких случаях знание того, откуда пользователь обращается к определенному сайту, и настройка содержимого сайта в зависимости от местоположения, окажет большое влияние на поведение пользователя. Например, представьте, что вы ищете в Интернете некоторые обзоры продукта, который вы планируете купить. Если сайт обзора и поисковые системы могут получить информацию о вашем местоположении и выполнить небольшую обработку в фоновом режиме, они могут показывать рекламу, связанную с этим продуктом. Это, безусловно, побудит вас нажать на эту рекламу и купить эти продукты.
Вывод
Помимо пяти аспектов, которые я упомянул выше, в HTML5 есть много других замечательных новых функций. Я надеюсь, что все больше людей найдут их полезными и в полной мере воспользуются HTML5 в будущем.