Новые функции HTML5, необходимые для интервью с фронталом

Что такое HTML5: HTML5 - это следующее поколение HTML, которое станет новыми стандартами для HTML, XHTML и HTML DOM. Сегодня давайте поговорим о вопросе, который мне будут задавать каждый раз, когда есть интервью с фронтом, что является новой особенностью HTML5. Это основные знания, которые должны быть освоены в передней части обучения.

HTML5 добавляет некоторые лучшие семантические элементы метки.

1. Элемент статьи представляет собой независимый контент, который не связан с контекстом, таким как статья в блоге.
2. Помимо элемента представляет контент, отличный от контента статьи, вспомогательной информации.
3. Элемент заголовка представляет блок содержимого или заголовок всей страницы на странице.
4. Элемент hGroup используется для объединения заголовка блока или всей страницы на странице.
5. Количество нижнего колонтитула указывает блок содержимого или полную страницу на странице.
6. Figure Element представляет группировку медиа -контента и их название.
7. Элемент раздела представляет собой блок контента на странице, например, главы.
8. Элементы NAV указывают на навигационную ссылку на странице.

1. Видео элемент используется для определения видео.
2. Аудио элемент используется для определения аудио.
3. Элемент Canvas используется для отображения графики, которая сама не имеет поведения и только одного куска холста.
4. Встроенные элементы используются для вставки различных мультимедиа.
5. Mark Element используется, чтобы показать основные моменты.
6. Элемент прогресса используется, чтобы показать прогресс любого типа задачи.
7. Элементы счетчика указывают меры и определяют измерение в рамках предварительно определенного диапазона.
8. Элемент времени используется для отображения даты или времени.
9. Элемент команды, указывающий на кнопку команды.
10. Детали элементы используются для показа информации о деталях, которую требуется пользователю и может быть получена.
11. Сводка элемента используется для определения видимых названий для деталей элементов.
12. Даталистский элемент используется для отображения дополнительных списков данных.
13. Элемент DataGrid также используется для отображения дополнительного списка данных, который отображается в форме списка дерева.
14. Элемент Keygen указывает ключ для генерации.
15. Выходные элементы указывают различные типы вывода.
16. Элементы источника определяют медиа -ресурсы для элементов медиа.
17. Элемент меню указывает список меню.
18. Рубиновый элемент представляет комментарии Ruby, элементы RT представляют интерпретацию или произношение символов. Элемент RP используется в Ruby Notes для определения содержимого, отображаемого браузером, который не поддерживает элементы Ruby.
19. Элементы WBR указывают на мягкое переключение. Разница от элемента BR состоит в том, что элемент BR означает, что элемент WBR означает ширину окна браузера или элемента родительского уровня. Не меняйте линию, и когда ширина недостаточно, возьмите инициативу, чтобы изменить банк.
20. Элементы BDI определяют направление текста текста, так что оно отображается с направления текста вокруг него.
21. Диалоговый элемент указывает диалоговое окно или окно.

Некоторые чисто экспрессирующие элементы отменены в HTML5.

Элементы чистого выражения - это те элементы, которые могут быть заменены CSS. BaseFont, Big, Center, Font, S, Strike, TT, U, их функции отображаются чисто для отображения страницы.

Для элементов кадров, элементов кадров и элементов Noframes, поскольку структура кадры оказывает негативное влияние на доступность в Интернете, структура кадров больше не поддерживается в HTML5 и поддерживает только фреймворки IFRAME.

Для апплета, BGSound, Blink, Marquee и других элементов, потому что только некоторые поддержки браузера, особенно элементы BGSound и элементы шатер, поддерживаются только IE, они отменены в HTML5. Элементы апплета могут быть заменены элементами встраивания или элементами объектов, элементы BGSOUND могут быть заменены аудиоэлементом, а марки может быть заменен программированием JavaScript.

Упомянутый выше элемент Canvas может предоставить холст для отображения графики. В сочетании с API Canvas вы можете динамически генерировать и отображать различную графику, диаграммы, изображения и анимации на этом холсте. Canvas по существу графический. Нет необходимости использовать каждую диаграмму в качестве хранилища объектов, и производительность очень хорошая.

Используйте API Canvas, чтобы сначала нарисовать контекст элемента Canvas, а затем используйте различные функции чертежа, инкапсулированные в контексте для рисования.

 <canvas id = canvas> Альтернативное содержание < /canvas> <cript> var canvas = document.getelementbyid ('canvas'); / Практика показывает, что заполнение по умолчанию является черным контекстом

SVG - это еще одна графическая функция 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. теги.

1. В качестве функции нативной поддержки браузера, новые элементы аудио и видео не должны быть установлены.
2. СМИ Элементы хотят, чтобы веб -страница предоставила API, которые являются универсальными, интегрированными и сценариальными.

 <video src = video.webm Controls> <Object Data = VideoPlayer.swf type = application /x-shockwave-flash> <param name = value = video.swf /> < /object> Ваш браузер не поддерживает видео HTML5. </Video>

Независимо от того, поддерживает ли обнаружение браузера звуковые элементы или видео -элементы, является самым простым способом создания его динамически с помощью сценариев, а затем определить, существуют ли конкретные функции.

 var hasVideo = !!

HTML5 Geolocation API (API географического позиционирования) может попросить пользователей поделиться своей позицией. Метод использования очень прост. Полем Информация о местоположении состоит из широты, координат долготы и некоторых других метаданных.

Geolocation API не указывает, какую базовую технологию для использования пользователя для поиска приложения приложения. Вместо этого он используется только для извлечения API информации о местоположении, а данные, полученные через API, имеют только определенную степень точности, и он не может гарантировать, что местонахождение возврата устройства является точным. Устройство может использовать следующий источник данных:

1. IP -адрес

   Три -мерные координаты

   GPS

   MAC -адреса от RFID, Wi -Fi и Bluetooth до Wi -Fi

2. Идентификатор телефона GSM или CDMA
3. Пользовательские настраиваемые данные

 // Обновление Navigator.geolocation.getCurrentPosition (UpdateLocation, Handlelocationer); // Точность var timeStamp = position.coords.timestamp; Обновление местоположения navigator.geolocation.clearwatch (WatchId);

Для соображений безопасности связь между кадром, вкладками и окнами в одном и том же браузере всегда была строго ограничена. Однако на самом деле существует некоторый разумный спрос на содержание различных сайтов для взаимодействия в браузере. В этом случае, если браузер может обеспечить прямую механизм связи, эти приложения могут быть лучше организованы.

Новая функция вводится в HTML5, Cross -Document Message Message, которая может обеспечить безопасное выполнение IFRAME, Tab Pages и Windows. Postmessage API - это стандартный метод отправки сообщений.

 Window.postmessage («Привет, мир», http://www.example.com/ ');

При получении сообщения вам нужно только добавить функцию обработки событий на страницу. Когда появится сообщение, источник сообщения определяется, чтобы решить, иметь ли дело с сообщением.

 Window.AddeventListener (MessageHandler, True); t распознавать // сообщение игнорируется}}

Событие сообщения представляет собой событие DOM с атрибутами данных (данные) и происхождения. Атрибут данных - это фактическое сообщение, передаваемое отправителем, а атрибут происхождения является источником отправки.

Xmlhttprequest API делает возможной технологией Ajax. Есть два основных аспекта:

1. Cross -source Xmlhttprequest
2. Прогресс

В прошлом xmlhttprequest был ограничен гомологичной коммуникацией, а xmlhttprequest level2 реализовал транснациональный Xmlhttprequest через CORS. Cross -Source HTTP -запрос содержит исходную головку, которая предоставляет серверу исходную информацию о HTTP -запросах.

WebSockets является самой мощной коммуникационной функцией в HTML5.

Чтобы установить связь с веб -током, клиент и сервер обновил протокол HTTP до протокола WebSocket при встряхивании рук. Как только соединение будет успешно установлено, мы можем передать сообщение WebSocket вперед и назад между клиентом и сервером в полном двойном режиме.

В дополнение к определению протокола WebSockets, спецификация также определяет интерфейс WebSocket для приложения JavaScript. Использование интерфейса WebSockets очень просто. Чтобы подключить удаленный хост, вам нужно только создать новый экземпляр WebSocket, чтобы предоставить пару URL -адресов, которые надеются подключиться.

1. Элемент тела, указывающий номер телефона.
2. Элемент электронной почты указывает текстовое поле адреса электронной почты.
3. Элемент URL указывает URL -адрес веб -страницы.
4. Элемент поиска для поисковых систем, таких как поле поиска, отображаемое в верхней части сайта.
5. Элемент диапазона, числовой селектор В определенном диапазоне типичный дисплей - это скользящие стержни.
6. Номер элемент содержит только поля значений.

1. Цветовой элемент, селектор цвета, на основе цветовой палитры или раскраски для выбора.
2. Элемент DateTime показывает полную дату и время, включая часовой пояс.
3. DateTime-Local, дата и время отображения.
4. Элемент времени, селектор времени и индикатор часового пояса.
5. Элемент даты, селектор даты.
6. Недельный элемент, еженедельный отборщик за определенный год.
7. Месяц элемент, ежемесячный селектор за определенный год.

Когда пользователь не имеет входного значения, элемент управления вводом может отображать описательное описание или информацию о предложении пользователю через функцию заполнителя.

 <Имя ввода = Имя Планиддер = Имя и Фамилия>

Браузер может знать, следует ли сохранить входное значение с помощью автозаполнения.

Через автофокусировку вы можете указать элемент таблицы, чтобы получить входной фокус.

Управление вводом с содержимым текста и свойство 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, диапазон ввода значения ввода диапазона может быть ограничен между минимальным и наибольшим значением. Вы можете установить только один или два или два, или вы не можете установить его.

Для элементов управления входного типа настройка характеристик его шага может указывать гранулярность увеличения или уменьшения входного значения.

После того, как необходимая функция установлена ​​для элемента управления входным типом, этот элемент должен быть заполнен, в противном случае форма не может быть отправлена.

Если перетаскиваемый элемент веб -элемента правда, этот элемент может быть перетаскирован.

 <Div Draggable = true> Draggable div </div>

Процесс перетаскивания вызовет множество событий, в основном в следующем:

1. Dragstart: элемент веб -страницы запускается при перетаскивании.
2. Перетаскивание: перетаскиваемый элемент продолжает запускать во время перетаскивания.
3. Dragenter: Когда перетаскиваемый элемент запускается при входе в целевой элемент, событие следует слушать целевой элемент.
4. Draglave: Когда запускается перетащенный элемент, событие следует слушать элемент объекта.
5. Драгвер: непрерывные триггеры, когда элемент перетаскивания остается в целевом элементе, и событие следует слушать целевой элемент.
6. Драп: элемент перетаскивания или файл, выбранные из файловой системы, запускает при перетаскивании и падении.
7. Dragend: элемент веб -страницы запускается в конце.

 DraggableElement.AddeventListener ('dragStart', function (e) {console.log ('trang Start!');});

Во время перетаскивания параметры события, принятые функцией обратного вызова, имеют атрибут DataTransfer, указывающий на объект, включая различную информацию, связанную с перетаскиванием.

 DraggableElement.AddeventListener ('DragStart', function (event) {event.datatransfer.setData ('Text', 'Hello World!');});

1. Dropeffect: Trag and Drop Operation Тип определяет, как браузер отображает форму мыши.
2. EffectAlowed: указание допустимых операций, возможными значениями являются копия, перемещение, ссылка, copylink, sopymove, linkmove, all, none и incinitialized (значение по умолчанию эквивалентно всем, то есть разрешать все операции).
3. Файлы: содержит объект FileList, указывающий на файл, связанный с перетаскиванием, который в основном используется для обработки файлов, перетаскиваемых в браузер из файловой системы.
4. Типы: тип данных, хранящихся в объекте Datatransfer.

1. SetData (Format, Data): хранить данные в объекте DatatRansfer. Первый формат параметров используется для указания типа данных хранения, такого как текст, URL, текст/HTML и т. Д.
2. GetData (формат): возьмите данные из объекта DataTransfer.
3. ClearData (формат): очистить данные, хранящиеся объектом DatatRansfer. Если указан параметр формата, выясняются только данные формата, в противном случае все данные удаляются.
4. SetDragimage (Imagelement, x, y): укажите изображение, отображаемое во время процесса перетаскивания. По умолчанию многие браузеры показывают полупрозрачную версию элемента перетаскивания. Параметр, интерактивным, должен быть элементом изображения, а не путем изображения, а параметр x и y указывают положение изображения для мыши.

JavaScript - это единственный поток. Следовательно, расчет длительности, обратно для блокировки потока пользовательского интерфейса, что заставляет текст заполнять текст в текстовом поле, нажимать на кнопку и т. Д., И в большинстве браузеров, если элемент управления не возвращен, он не может открыть Новая вкладка Решением этой проблемы является веб -работник, который позволяет веб -приложениям иметь фоновые возможности обработки, а его поддержка многопоточности очень хороша.

Тем не менее, сценарий, выполненный в веб -работниках, не может получить доступ к объекту Window на странице, то есть веб -работники не могут напрямую доступ к веб -странице и DOM API. Хотя веб -работники не заставляют пользовательского интерфейса браузера прекратить реагирование, он все равно будет потреблять цикл ЦП, что приведет к более медленной скорости отклика.

Веб -хранилище - это очень важная функция, введенная HTML5.

SessionStorage сохраняет данные в сеансе, а браузер закрывает данные, чтобы исчезнуть.

LocalStorage всегда сохранял данные на клиенте, если не удаляется вручную, он будет сохранен.

Будь то SessionStorage или LocalStorage, API, который можно использовать, одинаково.

1. Сохранить данные: localstorage.setitem (ключ, значение);
2. Читать данные: localstorage.getitem (key);
3. Удалить единые данные: localstorage.removeitem (key);
4. Удалить все данные: localstorage.clear ();
5. Ключ, чтобы получить определенный индекс: localstorage.key (index);

Приведенное выше содержимое этой статьи.