Лекция 7 3 октября 2013 г
Работа добавлена на сайт samzan.net: 2015-07-10
Поможем написать учебную работу
Если у вас возникли сложности с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой - мы готовы помочь.
Предоплата всего
от 25%
Подписываем
договор
Лекция 7
3 октября 2013 г.
4 пара – 14 – 20
Новые структурные элементы в HTML5.
Новые структурные элементы
- Ориентированы на разделение HTML – документа на логические части
- Название каждого структурного элемента описывает тип контента, для хранения которого предназначен этот элемент
Обновлённая декларация DOCTYPE
- Декларация сообщает браузеру, на какой версии языка разметки написана текущая страница
- она делает это с помощью шаблона DTD (Document Type Definition)
- DTD специфицирует правила, используемые языком разметки, благодаря чему браузера корректно отображают контент
- Вне зависимости от возможностей целевого браузера надо сообщать браузеру, какая спецификация использовалась при написании веб – страницы
- Без указания декларации браузер начинает анализ страницы, чтобы определить, на какой версии языка HTML/XHTML написана страница, а потом начинает строить дерево DOM
HTML5
<DOCTYPE html>
Декларация должна находиться в самом начале документа, перед элементом <html>
Новые структурные теги
- Предпосылка создания новых структурных тегов – желание разделять веб – страницы на логические части с помощью элементов, описательные названия которых соответствуют контенту, который они содержат
- С концептуальной точки зрения веб – страницу можно рассматривать как документ. Документ содержит заголовки, нижние колонтитулы, главы и другие условные обозначения, разделяющие документ на логические части
Подход HTML4
В примере демонстрируется использование элемента div для создании простой страницы с заголовком, областью контента и нижним колонтитулом
<!DOCTYPE html PUBLIC…>
<html>
<head>
<title>
простая HTML – страница, использующая элементы div
</title>
</head>
<body>
<div id=’header’>Заголовок</div>
<div id=’content’>Содержание</div>
<div id=’footer’>Нижний колонтитул</div>
</body>
</html>
- Этот подход работает прекрасно
- Но без рассмотрения атрибута id у каждого элемента div трудно сказать, какой раздел документа представляет каждый div
- Существует множество разновидностей атрибута id, которые могут рассматриваться как одинаково валидные
- Сам элемент div не содержит указаний на то, какой тип контента ему было поручено представить
Подход HTML5
- HTML5 решает эту проблему посредством предоставления набора элементов, которые точнее определяют основные блоки контента
- К числу новых элементов относятся следующие: header, section, article, aside, footer, nav
Элемент Header
Предназначен для того, чтобы пометить раздел HTML – страницы как заголовок.
<body>
<header>Заголовок</header>
<div id=’content’>Содержание</div>
<div id=’footer’>Нижний колонтитул</div>
</body>
Элемент section
Предназначен для разбиения контента на существенные блоки.
<section>
<p>
Это важный раздел страницы.
</p>
</section>
Элемент article
- Обозначает важный раздел контента внутри страницы
- Например, в блоге каждый отдельный пост представляет собой значительный фрагмент контента
<section>
<article>
<p>
Это важная часть содержимого страницы. Возможно блог.
</p>
</article>
<article>
<p>
Это важная часть содержимого страницы. Возможно блог.
</p>
</article>
</section>
Элемент aside
- Указывает, что контент, содержащийся внутри этого элемента, связан с основным конентом данной страницы, но не является его частью
- В определённом смысле его применение аналогично внедрению комментария в тело текста. Контент в круглых скобках предоставляет дополнительную информацию об элементе, содержащем этот контент
<aside>
<p>
Контент вне первого блога
</p>
</aside>
Элемент footer
Помечает содержащийся в нём контент как нижний колонтитул текущего документа.
<footer>Нижний колонтитул</footer>
Все элементы div из исходного кода заменены структурными элементами HTML5.
Элемент nav
Контент, предназначенный для навигационных целей.
<nav>
<a href=’#’>Некоторая навигационная ссылка</a>
< a href=’#’> Другая навигационная ссылка</a>
< a href=’#’> Третья навигационная ссылка</a>
</nav>
- Новые структурные теги описывают контент, который они содержат, и помогают разделить документы на логические разделы
- Автор документа может сам решать, когда и где использовать эти новые элементы в своём документа