1. Разработка структуры страницы - HTML: этот процесс должен использовать различные элементы HTML для создания структуры веб -страницы.
2. Разработка внешнего вида страницы - CSS: этот процесс должен использовать CSS для улучшения внешнего вида веб -страницы.
3. Поведение страницы дизайна - JavaScript: этот процесс должен придать определенное поведение элементам веб -страницы.
В дополнение к CSS, HTML5 был расширен в разной степени в двух других аспектах. Эта серия сосредоточена на первом аспекте. В предыдущем разделе мы выучили комплексные элементы Canvas и SVG, и в следующих главах будут суммироваться другие добавленные элементы HTML5.
Структурные элементы HTML5 добавил новые структурные элементы, такие как заголовок, нижний колонтитул, навигационная навигация, контент, раздел главы и т. Д. Значение показано на рисунке ниже:В дополнение к структурным элементам всей страницы, HTML5 также добавляет семантические элементы на уровне блоков, такие как вспомогательные элементы, фигуры изображений, подробные детали элементов описания и т. Д. В дополнение к лучшему отображению значения макета страницы, эти элементы не отличаются от обычных DEAP, и они все еще должны зависеть от CSS для отображения этих элементов. Вот краткий пример:
<html>
<голова>
<название> блог dxy </title>
</head>
<тело>
<заголовок>
<h1> <a href = "http://www.vevb.com/dxy1982/%22%3Edxy1982 блог </a> </h1>
</header>
<раздел>
<статья>
<h2> <a href = "http://www.vevb.com/dxy1982/"> статья 1 </a> </h2>
<p> Введение </p>
</article>
<статья>
<h2> <a href = "http://www.vevb.com/dxy1982/"> статья 2 </a> </h2>
<p> Введение </p>
</article>
<av>
<a href = "http://www.vevb.com/dxy1982/"> блог </a>
</nav>
</section>
<av>
<ul>
<li> <h2> Информация </h2>
<ul>
<li> <a href = "http://www.vevb.com/dxy1982/"> политика </a> </li>
<li> <a href = "http://www.vevb.com/dxy1982/"> list </a> </li>
</ul> </li>
<li> <h2> Статья </h2>
<ul>
<li> <a href = '/blog/2007/04/'> январь </a> </li>
<li> <a href = '/blog/2007/03/'> февраль </a> </li>
</ul>
</li>
</ul>
</nav>
<нижний колонтитул>
<p> Copyright 2012 DXY1982 </p>
</cooler>
</body>
</html>
Хотя эти элементы относительно просты в использовании, есть еще несколько моментов, чтобы отметить :1. Не используйте раздел в качестве замены Div
Раздел не является контейнером в стиле. Элемент раздела представляет семантическую часть контента, используемого для создания резюме документа. Он должен содержать заголовок. Обычно он существует как самая статья (конечно, это также возможно для статьи в своей части). Если вы хотите найти элемент, который используется в качестве контейнера страницы или нужен дополнительный контейнер в стиле, продолжайте использовать Div.
2. Используйте только заголовок и hgroup, когда это необходимо
Бессмысленно писать ярлыки, которые не нужно писать. Сценарии использования заголовка и hgroup обычно следующие:
• Элемент заголовка представляет собой набор ввода или навигационного вспомогательного текста, часто используемого в качестве заголовка раздела.
• Когда голова имеет многослойную структуру, такую как подзаголовка, субтитры, различные тексты логотипа и т. Д., Используйте hgroup, чтобы объединить элементы H1-H6 в качестве головы секции.
Здесь, если заголовок или hgroup имеют только несколько элементов головы, лучше удалить эти две бесполезные теги, например:
<статья>
<заголовок>
<h1> мой лучший пост в блоге </h1>
</header>
<!-Содержание статьи->
</article>
Изменить напрямую на:
<статья>
<h1> мой лучший пост в блоге </h1>
<!-Содержание статьи->
</article>
То же самое касается:
<заголовок>
<hgroup>
<h1> мой лучший пост в блоге </h1>
</hgroup>
<p> Рич Кларк </p>
</header>
Изменить его напрямую на:
<заголовок>
<h1> мой лучший пост в блоге </h1>
<p> Рич Кларк </p>
</header>
3. Не злоупотребляйте овей
Элемент NAV представляет блок на странице, который ссылается на другие страницы или другие части этой страницы; Блок, содержащий навигационные ссылки.
Но не все ссылки на странице должны быть размещены в элементе NAV - этот элемент предназначен для использования в качестве основного навигационного блока. Чтобы привести конкретный пример, в нижнем колонтитуле часто бывает много ссылок, таких как условия обслуживания, домашняя страница, страница уведомления об авторском праве и т. Д. Самого элемента нижнего колонтитула достаточно, чтобы справиться с этими ситуациями. Хотя элемент NAV также можно использовать здесь, он обычно считается ненужным.
4. Не злоупотребляйте фигурой
Рисунок должен быть некоторым содержанием жидкости, и иногда в нем будет содержатся описание заголовка. Как правило, это будет упоминаться как независимая единица в потоке документов. Это лучший сценарий для рисунка - он может быть перемещен с основной страницы контента на боковую панель, не влияя на поток документа. На рисунке следует ссылаться только в документе или окружены элементами раздела.
Если вы занимаетесь исключением визуализации изображения (например, логотипа), не цитируемые в другом месте в документе, и нет необходимости перемещать местоположение, то не используйте рисунок.
5. Не используйте ненужные атрибуты типа
В HTML5 элементы скрипта и стиля больше не требуют атрибутов типа. Конечно, нет проблем с написанием, но с точки зрения наилучшей практики нет необходимости писать.
Аудиоэлементы Аудио элементы используются для идентификации звукового контента, такого как музыка или любой другой аудиотех. Форматы, поддерживаемые этим элементом, показаны в следующей таблице:| Т.е. 9 | Firefox 3.5 | Опера 10.5 | Хром 3.0 | Сафари 3.0 | |
|---|---|---|---|---|---|
| Огг Ворбис | √ | √ | √ | ||
| Mp3 | √ | √ | √ | ||
| Вал | √ | √ | √ |
Аудио тег имеет некоторые атрибуты, используемые для управления контентом, когда и как воспроизводится звук и т. Д. Эти атрибуты: src (имя файла), предварительная загрузка (загрузка при загрузке страницы), элементы управления (дисплей дисплей), петля (петля) и Autoplay (Autoplay). В следующем примере страница будет играть, как только звук загружен, и она будет продолжать играть. Предоставленные элементы управления могут позволить пользователю остановить или перезагрузить воспроизведение аудио:
<audio src = "myfirstmusic.ogg" controls = "controls" autoplay = "autoplay" loop = "loop">
Ваш браузер не поддерживает аудио -элементы.
</audio>
Если браузер не поддерживает элемент, отображается текстовая информация элемента.
Если элемент автоматического разъема установлен, свойство предварительного нагрузки автоматически игнорируется. Если установлен PreLoad = Auto, аудио будет загружено после загрузки страницы.
Аудиоэлемент позволяет определять множество элементов исходных элементов, чтобы быть совместимыми с браузером. Исходный элемент может связать различные аудиофайлы. Браузер будет использовать первый узнаваемый формат:
<Audio>
<source src = "song.ogg" type = "audio/ogg">
<Source src = "song.wma" type = "audio/x-ms-wma">
<Source src = "song.mp3" type = "audio/mpeg">
Ваш браузер не поддерживает аудио -элементы.
</audio>
Видео элементы Видеоэлемент позволяет воспроизводить видеоклипы или потоковых визуальных носителей. Форматы, поддерживаемые этим элементом, показаны в следующей таблице:| Формат | Т.е. | Firefox | Опера | Хром | Сафари |
|---|---|---|---|---|---|
| Огг | Нет | 3,5+ | 10,5+ | 5,0+ | Нет |
| MPEG 4 | 9,0+ | Нет | Нет | 5,0+ | 3.0+ |
| Webm | Нет | 4,0+ | 10,6+ | 6,0+ | Нет |
Он имеет все атрибуты аудиоэлемента, плюс: приглушенный, плакат (ожидающий изображения), ширина и высота. Излишне говорить, что последние два значения. Когда видео загружается или видео находится в состоянии без загрузки, атрибут плаката (определяющий абсолютный или относительный URL) позволяет вам найти изображение, чтобы сначала справиться с ним; приглушенные средства приглушены.
Видео также поддерживает использование элементов источника для решения проблем совместимости. Смотрите небольшой пример:
<Видео Controls = "Controls" Poster = "/images/screen.gif">
<source src = "movie.mp4" type = "video /mp4" />
<source src = "movie.ogg" type = "video /ogg" />
Ваш браузер не поддерживает видео -элементы.
</video>
Если вы не хотите воспроизводить видео звук, установите притильный = притильный.
Кроме того, видео элемент также предоставляет некоторые методы, свойства и события для поддержки процесса управления воспроизведением в операциях DOM. Например, вызов элементов для игры, паузы, нагрузки и других методов. Существуют также свойства, такие как объем и время воспроизведения, которые можно прямо прочитать или установить. Кроме того, есть события, которые начинают воспроизведение, паузу, конец и т. Д., Которые можно использовать. См. Следующий пример:
<! Doctype html>
<html>
<тело>
<div style = "text-align: center">
<button onclick = "playpause ()"> Play/pause </button>
<button onclick = "makebig ()"> Big </button>
<button onclick = "makemall ()"> small </button>
<button onclick = "makenormal ()"> Нормальный </button>
<видео ID = "Video1">
<Source src = "mov_bbb.mp4" type = "video /mp4" />
<Source src = "mov_bb.ogg" type = "video /ogg" />
Ваш браузер не поддерживает видео -элементы.
</video>
</div>
<script type = "text/javascript">
var myVideo = document.getElementById ("video1");
функция PlayPause ()
{
if (myvideo.paused)
myvideo.play ();
еще
myvideo.pause ();
}
Функция makebig ()
{
myvideo.width = 560;
}
функция MakeMall ()
{
myvideo.width = 320;
}
функция makenormal ()
{
myvideo.width = 420;
}
</script>
</body>
</html>
На самом деле, нам нужно обратить внимание на новый способ письма: в приведенном выше примере мы пишем подобные элементы звука:
<audio src = "myfirstmusic.ogg" controls = "controls" autoplay = "autoplay" loop = "loop">
Ваш браузер не поддерживает аудио -элементы.
</audio>
Фактически, в HTML5 представлены многие элементы управления, автоматические и петли. Эти свойства хороши для вас, чтобы написать их как выше, но рекомендуемый способ написать их следующим образом:
<audio src = "myfirstmusic.ogg" контролирует Autoplay Loop>
Ваш браузер не поддерживает аудио -элементы.
</audio>
Поскольку браузер сталкивается с этими свойствами, это означает, что эти свойства включены. То есть, если вы напишете эти свойства и насильственно устанавливаем FALSE, эффект все еще эквивалентен TRUE, поэтому обычно рекомендуется написать только имя атрибута.
Эта проблема письма также существует в форме. Многие новые свойства формы и ввода являются логическими свойствами, и следует использовать рекомендуемый метод написания.
Элементы, указывающие метрику Не каждый браузер поддерживает следующие элементы, но в основном вы можете увидеть влияние на Chrome. Элемент бара прогресса Используйте этот элемент, чтобы отобразить загруженную панель прогресса, только с двумя атрибутами: значение и макс, что очень просто. Хром и Firefox поддерживаются.<p> Скачать Прогресс:
<Значение прогресса = "1534602" max = "4603807"> 33%</progress>
</p>
Метрические элементы Используйте этот элемент для отображения заданного значения в классе стандартного диапазона, указывающего диаграмму индикации, а значения в разных диапазонах будут показывать разные цвета. Некоторые веб -сайты используют эту вещь, чтобы отобразить текущее значение пользователя. Когда браузер не поддерживает этот элемент, текст в середине элемента будет отображаться напрямую. Chrome в настоящее время поддерживается.<p> Ваш счет:
<meter value = "88,7" min = "0" max = "100" low = "65" высокая = "96" Optimum = "100"> B+</метр>.
</p>
Запустите его, и вы увидите желтую вещь, похожую на прокрутку; Если вы измените значение на 50, вы обнаружите, что цвет индикаторной полосы запрограммирован красным.
Есть так много новых элементов. Для получения дополнительных описаний элементов, пожалуйста, обратитесь к полному списку тегов в W3C.
Практическая ссылка: Учебник W3C: http://www.w3schools.com/html5/default.aspОфициальное руководство HTML5: http://dev.w3.org/html5/html-author/
Довольно хороший гид -сайт: http://html5doctor.com/
HTML5 Китайский учебник: http://www.html5china.com/
Хороший фронт-блог: http://www.pjhome.net/default.asp?cateid=1