Продолжайте объяснять навыки HTML5:
16. Видео поддержка
Audio Element <Audio> очень похож и поддерживает видео HTML5 в новых браузерах. На самом деле, совсем недавно YouTube объявил о новом видео HTML5. К сожалению, поскольку документация HTML5 не указывает на конкретный энкодер для видео, она в основном зависит от браузера. Хотя Safari и IE9 могут поддерживать видео в форматах H.264, Firefox и Opera по -прежнему придерживаются форматов Theora и Vorbis. Поэтому при отображении видео HTML5 вы должны предоставить два формата.
17. Видео предварительно загружено
Сначала вам нужно решить, нужен ли вам браузер для предварительной загрузки видео. Есть необходимость? Предположим, что посетитель входит в страницу, посвященную отображению видео, очень необходимо предварительно загружать страницу, чтобы сохранить время ожидания. Вы можете предварительно загрузить видео, установив PreLoad = Preload или добавив предварительную загрузку между ними.
<Видео -предварительная нагрузка>
…
</video>
18. Отображение элементов управления
Возможно, вы заметили, что с приведенным выше кодом видео будет отображаться только как изображение без каких -либо контролируемых компонентов. Чтобы получить эти элементы управления воспроизведением, мы должны указать эти свойства управления в видео элементе.
<Видео -предварительное управление>
…
</video>
19. Регулярные выражения
Благодаря свойствам нового шаблона мы можем вставить регулярное выражение непосредственно в код.
<form method = post action =>
<метка для = имя пользователя> Создать имя пользователя: </label>
<input id = username type = text name = username waceholder = 4 <> 10 ″ требуется = требуется AutoFocus = AutoFocus pattern = [a-za-z] {4,10}>
<Кнопка Типа = отправить> go </button>
</form>
Если вы больше знакомы с регулярными выражениями, вы заметите этот новый шаблон: [a-za-z] {4,10} принимает только верхние и нижние буквы. Эта строка должна иметь не менее четырех символов, до десяти символов.
20. Обнаружение поддержки браузеров для атрибутов
Как упоминалось ранее, не все браузеры поддерживают эти свойства, так что есть ли способ сказать, может ли браузер их распознать? Этот вопрос очень хороший. Вот два способа познакомить вас с вами. Первый вариант - использовать Modernizr для обнаружения, или вы также можете создать и проанализировать эти элементы, чтобы увидеть, что имеет браузер. Например, в предыдущем примере, если мы хотим определить, может ли браузер выполнить свойство шаблона, мы можем добавить JavaScript на страницу:
alert ('pattern' в document.createElement ('input')) // boolean;
На самом деле, это очень распространенный способ определения совместимости браузера. Библиотека jQuery использует этот трюк. В приведенном выше коде мы создаем новый элемент ввода и подтверждаем, можно ли распознавать атрибут шаблона. Если это может быть распознано, браузер поддерживает эту функцию, в противном случае она не будет поддерживаться.
<Скрипт>
if (! 'шаблон' в document.createElement ('input')) {
// Проверка на стороне клиента/сервера
}
</script>
Помните, что это должно быть достигнуто, полагаясь на JavaScript!
21. Марк Элементы
Основная функция элемента <card> состоит в том, чтобы выделить текст на странице, который должен визуально подчеркнуть его важность для пользователя. Строка, завернутая в этот тег, должна быть связана с текущим поведением пользователя. Например, если я ищу открыть ваш разум в некоторых блогах, я могу использовать JavaScript в теге <Chark> для завершения каждого действия.
<h3> Результаты поиска </h3>
<h6> они были прерваны, сразу после того, как Куато сказал, <Марк> Откройте свой разум </mark>. </h6>
22. Когда использовать <div>
Вам все еще нужно использовать тег <div>? Конечно это необходимо. Например, если вы хотите обернуть кусок кода в элемент, особенно для позиционирования контента, <div> будет очень идеальным выбором. Однако, если это не приведенная выше ситуация, а для того, чтобы обернуть пост в блоге или список ссылок на нижний колонтитул, рекомендуется использовать элементы <CARTION> и <AV> соответственно.