В приведенной выше главе рассказывается о первых семи навыках HTML5, и теперь давайте изучим новые навыки.
8. Заполнитель
Ранее нам нужно было использовать JavaScript для создания заполнителей для текстовых поле. Первоначально вы можете установить атрибут значения, чтобы увидеть, уместно ли он, но до тех пор, пока пользователь удаляет текст, входное содержимое снова станет пустым. Атрибут заполнителя эффективно компенсирует это.
<name = name = email type = email [email protected] />
9. местное хранение
Благодаря локальному хранилищу HTML5 мы можем позволить передовым браузерам вспомнить, что мы ввели, и даже если браузер закрыт или обновлен позже, это не будет затронуто. Хотя не все браузеры поддерживают его, самый важный интернет -проводник 8, Safari 4, Firefox 3.5.
10. Семантический заголовок и нижний колонтитул
<div id = заголовок>
…
</div>
<div id = нижний колонтитул>
…
</div>
Прошел код выше. Divs не имеет никакой семантической структуры в основном, даже если идентификатор применяется. В HTML5 мы можем использовать элементы <Header> и <Cooler>, и приведенный выше код может быть заменен на:
<заголовок>
…
</header>
<нижний колонтитул>
…
</cooler>
Будьте осторожны, чтобы не путать эти два элемента с головой и ногами веб -сайта. Это просто контейнеры, представляющие их.
11. IE и HTML5
Требуется много денег, чтобы понять новые элементы HTML5. Чтобы гарантировать, что новые элементы HTML5 могут быть отображены в качестве элементов уровня блока, необходимо определить их стиль с помощью следующего кода:
заголовок, нижний колонтитул, статья, раздел, навигация, меню, hgroup {
дисплей: блок;
}
Тем не менее, IE до сих пор не знает, что это за элементы, поэтому он игнорирует эти форматы и необходимо использовать следующий код для решения этой проблемы:
document.createElement (статья);
Document.createElement (нижний колонтитул);
document.createElement (заголовок);
document.createElement (hgroup);
Document.createElement (NAV);
Document.createElement (меню);
12. Название группы (HGROUP)
Предположим, что веб -сайт имеет имени и теги подзаголовок, которые будут отмечены тегами <h1> и <h2> соответственно. В HTML4 нет никакого способа описать отношения между ними с хорошими семантическими отношениями. Кроме того, при использовании H2 для отображения других названий на странице есть больше проблем с точки зрения иерархии. Используя элемент hGroup названия группы, мы можем собрать эти названия вместе, не влияя на весь план документа.
<заголовок>
<hgroup>
<h1> Напомним фан -страницу </h1>
<h2> только для людей, которые хотят воспоминания о жизни. </h2>
</hgroup>
</header>
13. Требуемые атрибуты
Форма обеспечивает новые необходимые свойства, указывая, необходим ли конкретный вход. Вы можете объявить этот атрибут следующими двумя разными способами в соответствии с вашими собственными предпочтениями для написания кода:
<input type = text name = someinput требуется>
Или, более строго:
<input type = text name = someinput требуется = требуется>
Обе строки кода выше работают. После использования этой строки кода и браузера поддерживает необходимый атрибут, пустая форма не будет представлена. Вот простой пример, и мы также добавили атрибут заполнителя:
<form method = post action =>
<Метка для = aephyNput> Ваше имя: </label>
<input type = text id = cheeinput name = someinput Placeholder = Douglas Quaid требуется>
<Кнопка Типа = отправить> go </button>
</form>
Если ввод пуст, форма не будет отправлена, выделяя текстовое поле.
14. Атрибуты автофокуса
Точно так же, с HTML5, решения JavaScript больше не нужны для решения проблемы автофокуса. Если вход должен быть выбран или сфокусирован, теперь мы можем использовать свойство AutoFocus HTML.
<input type = text name = someinput Placeholder = douglas Quaid требуется автофокус>
15. Аудио поддержка
Нам больше не нужно полагаться на сторонние плагины, чтобы обеспечить аудио. HTML5 предоставляет аудиоэлемент <audio>. В настоящее время только последние браузеры поддерживают аудио HTML5. На данный момент лучше обеспечить некоторую обратную совместимость.
<Audio Autoplay = Autoplay Controls = Controls>
<source src = file.ogg />
<source src = file.mp3 ″ />
<a href = file.mp3 ″> Загрузите этот файл. </a>
</audio>
Говоря о аудиоформатах, ни Мозилла, ни Webkit не поддерживали его. Firefox хочет видеть файл .ogg, а браузер Webkit поддерживает только наиболее распространенное расширение .mp3. Это означает, что вы должны создать две версии аудио, по крайней мере, пока. Когда Safari загружает страницу, он не распознает файл формата .ogg и будет пропущен и перенесен на версию MP3. Обратите внимание, что IE не поддерживает его, а Opera 10 или Lower поддерживает только файлы .wav.