Что такое HTML5: HTML5 - это следующее поколение HTML, которое станет новыми стандартами для HTML, XHTML и HTML DOM. Сегодня давайте поговорим о вопросе, который мне будут задавать каждый раз, когда есть интервью с фронтом, что является новой особенностью HTML5. Это основные знания, которые должны быть освоены в передней части обучения.
Новый элементHTML5 добавляет некоторые лучшие семантические элементы метки.
Структурный элементНекоторые чисто экспрессирующие элементы отменены в HTML5.
Чистый экспрессионный элементЭлементы чистого выражения - это те элементы, которые могут быть заменены CSS. BaseFont, Big, Center, Font, S, Strike, TT, U, их функции отображаются чисто для отображения страницы.
Элементы, которые оказывают негативное влияние на доступностьДля элементов кадров, элементов кадров и элементов Noframes, поскольку структура кадры оказывает негативное влияние на доступность в Интернете, структура кадров больше не поддерживается в HTML5 и поддерживает только фреймворки IFRAME.
Только некоторые браузер поддерживают элементыДля апплета, BGSound, Blink, Marquee и других элементов, потому что только некоторые поддержки браузера, особенно элементы BGSound и элементы шатер, поддерживаются только IE, они отменены в HTML5. Элементы апплета могут быть заменены элементами встраивания или элементами объектов, элементы BGSOUND могут быть заменены аудиоэлементом, а марки может быть заменен программированием JavaScript.
Новый API Холст APIУпомянутый выше элемент Canvas может предоставить холст для отображения графики. В сочетании с API Canvas вы можете динамически генерировать и отображать различную графику, диаграммы, изображения и анимации на этом холсте. Canvas по существу графический. Нет необходимости использовать каждую диаграмму в качестве хранилища объектов, и производительность очень хорошая.
Используйте API Canvas, чтобы сначала нарисовать контекст элемента Canvas, а затем используйте различные функции чертежа, инкапсулированные в контексте для рисования.
<canvas id = canvas> Альтернативное содержание < /canvas> <cript> var canvas = document.getelementbyid ('canvas'); / Практика показывает, что заполнение по умолчанию является черным контекстом SvgSVG - это еще одна графическая функция HTML5. HTML5 представляет внутренний союз SVG, так что элементы SVG могут появляться непосредственно на отмечке HTML.
<svg height = 100 ширина = 100> <circle cx = 50 Cy = 50 r = 50 /svg>Аудио и видео
Появление аудио и видео -элементов сделало HTML5 Media Applications более новыми вариантами. Для этих двух элементов спецификация HTML5 обеспечивает общий, полный и сценарий -контролируемый API.
Перед тем, как спецификация HTML5, типичный способ воспроизведения видео на странице состоит в том, чтобы использовать Flash, QuickTime или Windows Media Plug -В Enced Audio и Video в HTML. теги.
<video src = video.webm Controls> <Object Data = VideoPlayer.swf type = application /x-shockwave-flash> <param name = value = video.swf /> < /object> Ваш браузер не поддерживает видео HTML5. </Video>Обнаружение поддержки браузера
Независимо от того, поддерживает ли обнаружение браузера звуковые элементы или видео -элементы, является самым простым способом создания его динамически с помощью сценариев, а затем определить, существуют ли конкретные функции.
var hasVideo = !!Geolocation API
HTML5 Geolocation API (API географического позиционирования) может попросить пользователей поделиться своей позицией. Метод использования очень прост. Полем Информация о местоположении состоит из широты, координат долготы и некоторых других метаданных.
Откуда получен информация о местоположенииGeolocation API не указывает, какую базовую технологию для использования пользователя для поиска приложения приложения. Вместо этого он используется только для извлечения API информации о местоположении, а данные, полученные через API, имеют только определенную степень точности, и он не может гарантировать, что местонахождение возврата устройства является точным. Устройство может использовать следующий источник данных:
Три -мерные координаты
GPS
MAC -адреса от RFID, Wi -Fi и Bluetooth до Wi -Fi
// Обновление Navigator.geolocation.getCurrentPosition (UpdateLocation, Handlelocationer); // Точность var timeStamp = position.coords.timestamp; Обновление местоположения navigator.geolocation.clearwatch (WatchId);Коммуникационный API Передача передачи сообщений Cross -Document
Для соображений безопасности связь между кадром, вкладками и окнами в одном и том же браузере всегда была строго ограничена. Однако на самом деле существует некоторый разумный спрос на содержание различных сайтов для взаимодействия в браузере. В этом случае, если браузер может обеспечить прямую механизм связи, эти приложения могут быть лучше организованы.
Новая функция вводится в HTML5, Cross -Document Message Message, которая может обеспечить безопасное выполнение IFRAME, Tab Pages и Windows. Postmessage API - это стандартный метод отправки сообщений.
Window.postmessage («Привет, мир», http://www.example.com/ ');
При получении сообщения вам нужно только добавить функцию обработки событий на страницу. Когда появится сообщение, источник сообщения определяется, чтобы решить, иметь ли дело с сообщением.
Window.AddeventListener (MessageHandler, True); t распознавать // сообщение игнорируется}}
Событие сообщения представляет собой событие DOM с атрибутами данных (данные) и происхождения. Атрибут данных - это фактическое сообщение, передаваемое отправителем, а атрибут происхождения является источником отправки.
Xmlhttprequest level2Xmlhttprequest API делает возможной технологией Ajax. Есть два основных аспекта:
В прошлом xmlhttprequest был ограничен гомологичной коммуникацией, а xmlhttprequest level2 реализовал транснациональный Xmlhttprequest через CORS. Cross -Source HTTP -запрос содержит исходную головку, которая предоставляет серверу исходную информацию о HTTP -запросах.
WebSockets APIWebSockets является самой мощной коммуникационной функцией в HTML5.
Рукопожатие веб -билетовЧтобы установить связь с веб -током, клиент и сервер обновил протокол HTTP до протокола WebSocket при встряхивании рук. Как только соединение будет успешно установлено, мы можем передать сообщение WebSocket вперед и назад между клиентом и сервером в полном двойном режиме.
Интерфейс WebsocketsВ дополнение к определению протокола WebSockets, спецификация также определяет интерфейс WebSocket для приложения JavaScript. Использование интерфейса WebSockets очень просто. Чтобы подключить удаленный хост, вам нужно только создать новый экземпляр WebSocket, чтобы предоставить пару URL -адресов, которые надеются подключиться.
Формирует API Новый элемент формыКогда пользователь не имеет входного значения, элемент управления вводом может отображать описательное описание или информацию о предложении пользователю через функцию заполнителя.
<Имя ввода = Имя Планиддер = Имя и Фамилия>автозаполнение
Браузер может знать, следует ли сохранить входное значение с помощью автозаполнения.
АвтофокусЧерез автофокусировку вы можете указать элемент таблицы, чтобы получить входной фокус.
Проверка орфографииУправление вводом с содержимым текста и свойство SpecialCeck Special Control Textarea. После настройки вы спросите браузер, стоит ли вам дать отзыв из результатов проверки орфографии. Атрибут проверки орфографии должен быть назначен.
Список функций и элементов данных датаВ сочетании с характеристиками списка и элементами данных разработчики могут построить список выбора значений для элемента управления входом.
<datalist id = contactlist> <option [email protected]> </option> <option [email protected]> </option> </datalist> <input type = email id = contact = list> list>Мин и макс
Установив функции Min и Max, диапазон ввода значения ввода диапазона может быть ограничен между минимальным и наибольшим значением. Вы можете установить только один или два или два, или вы не можете установить его.
постДля элементов управления входного типа настройка характеристик его шага может указывать гранулярность увеличения или уменьшения входного значения.
НеобходимыйПосле того, как необходимая функция установлена для элемента управления входным типом, этот элемент должен быть заполнен, в противном случае форма не может быть отправлена.
Перетаскивать API Перетаскиваемый атрибутЕсли перетаскиваемый элемент веб -элемента правда, этот элемент может быть перетаскирован.
<Div Draggable = true> Draggable div </div>Перетаскивать
Процесс перетаскивания вызовет множество событий, в основном в следующем:
DraggableElement.AddeventListener ('dragStart', function (e) {console.log ('trang Start!');}); Объект DataTransferВо время перетаскивания параметры события, принятые функцией обратного вызова, имеют атрибут DataTransfer, указывающий на объект, включая различную информацию, связанную с перетаскиванием.
DraggableElement.AddeventListener ('DragStart', function (event) {event.datatransfer.setData ('Text', 'Hello World!');}); Атрибуты объекта Datatransfer:JavaScript - это единственный поток. Следовательно, расчет длительности, обратно для блокировки потока пользовательского интерфейса, что заставляет текст заполнять текст в текстовом поле, нажимать на кнопку и т. Д., И в большинстве браузеров, если элемент управления не возвращен, он не может открыть Новая вкладка Решением этой проблемы является веб -работник, который позволяет веб -приложениям иметь фоновые возможности обработки, а его поддержка многопоточности очень хороша.
Тем не менее, сценарий, выполненный в веб -работниках, не может получить доступ к объекту Window на странице, то есть веб -работники не могут напрямую доступ к веб -странице и DOM API. Хотя веб -работники не заставляют пользовательского интерфейса браузера прекратить реагирование, он все равно будет потреблять цикл ЦП, что приведет к более медленной скорости отклика.
API веб -хранилищаВеб -хранилище - это очень важная функция, введенная HTML5.
SessionStorageSessionStorage сохраняет данные в сеансе, а браузер закрывает данные, чтобы исчезнуть.
LocalStorageLocalStorage всегда сохранял данные на клиенте, если не удаляется вручную, он будет сохранен.
Будь то SessionStorage или LocalStorage, API, который можно использовать, одинаково.
Приведенное выше содержимое этой статьи.