Комментарий: из -за отсутствия структуры даже с хорошими HTML -страницами трудно справиться. Уровень заголовка должен быть проанализирован, чтобы увидеть, как разделена каждая часть. Боковая панель, нижний колонтитул, заголовок, навигационная планка, основная область содержания и статьи представлены общими элементами. HTML 5 добавил новые элементы для определения этих общих структур: · Секция
Из -за отсутствия структуры даже с хорошими HTML -страницами трудно справиться. Уровень заголовка должен быть проанализирован, чтобы увидеть, как разделена каждая часть. Боковая панель, нижний колонтитул, заголовок, навигационная планка, основная область содержания и статьи представлены общими элементами. HTML 5 добавляет новые элементы для определения этих общих структур:
· Раздел: Это может быть глава или раздел в книге, и на самом деле это может быть что угодно с собственным названием в HTML 4
· Заголовок: заголовок отображается на странице; он отличается от элемента головы
нижний колонтитул: нижний колонтитул; может отображать подписи в электронных письмах
NAV: набор ссылок на другие страницы
Статья: статья в блоге, журнале, компиляции статьи и т. Д.
Давайте рассмотрим типичную домашнюю страницу в блоге, на которой есть заголовок наверху и нижний колонтитул внизу, а также несколько статей, область навигации и боковую панель, см. Код 1 Типичная страница блога
<html>
<голова>
<title> Mokka Mit Schlag </title>
</head>
<тело>
<div id = page>
<div id = заголовок>
<h1> <a href => mokka mit schlag </a> </h1>
</div>
<div id = контейнер>
<div id = center class = column>
<div class = post id = post-1000572>
<h2> <a href =
/blog/Birding/2007/04/23/Spring-Comes и Goes-In-Sussex-County/>
Весна наступает (и идет) в округе Сассекс </a> </h2>
<div class = intry>
<p> вчера я присоединился к Brooklyn Bird Club для нашего
Ежегодная поездка в Западный Нью -Джерси, в частности, гипер
Гумус, относительно недавно обнаруженная горячая точка. Это
начался как хорошее зимнее утро, когда мы приехали
на сайте в 7:30 утра прогрессировал до
10:00 утра и достиг начала лета до 10:15. </p>
</div>
</div>
<div class = post id = post-1000571>
<h2> <a href =
/blog/birding/2007/04/23/но-does-it spend-for-your-life-list/>
Но это имеет значение для вашего списка жизни? </a> </h2>
<div class = intry>
<p> кажется, что теперь ты можешь пойти <
href =
2007/04/cone_sf> наблюдение за птицами через Интернет </a>. я
еще не смог протестировать его (20 пользователей
Определенно предел), но это, безусловно, круто.
Лично я не могу представить, что это заменит
На самом деле в поле на поле на любую небольшую сумму.
С другой стороны, я всегда находил это довольно
грустно встречаться с старшими птицами, которые больше не могут
Держите бинокль устойчиво или попадайте в парк. Я могу
Представьте, что это может быть для них интересно. В
По крайней мере, одна пожилая птица сделала большой год по телевизору после
Он больше не мог выйти так много. Это конечно
Верх это. </p>
</div>
</div>
</div>
<div class = навигация>
<div class = alignleft>
<a href =/blog/page/2/> «_fcksavedurl =/blog/page/2/>« Предыдущие записи </a>
</div>
<div class = alignright> </div>
</div>
</div>
<div id = right class = column>
<ul id = боковая панель>
<li> <h2> info </h2>
<ul>
<li> <a href =/blog/comment-policy/> политика комментариев </a> </li>
<li> <a href =/blog/todo-list/> todo list </a> </li>
</ul> </li>
<li> <h2> Архив </h2>
<ul>
<li> <a href = '/blog/2007/04/'> апрель 2007 г. </a> </li>
<li> <a href = '/blog/2007/03/'> март 2007 г. </a> </li>
<li> <a href = '/blog/2007/02/'> февраль 2007 г. </a> </li>
<li> <a href = '/blog/2007/01/'> январь 2007 г. </a> </li>
</ul>
</li>
</ul>
</div>
<div id = нижний колонтитул>
<p> Copyright 2007 Эллиотт Расти Гарольд </p>
</div>
</div>
</body>
</html>
Даже с правильным отступом эти вложенные DOV все еще чувствуют себя очень запутанными. В HTML 5 эти элементы могут быть заменены семантическими элементами, см. Код 2 Типичные страницы блога, написанные на HTML5
<html>
<голова>
<title> Mokka Mit Schlag </title>
</head>
<тело>
<заголовок>
<h1> <a href => mokka mit schlag </a> </h1>
</header>
<раздел>
<статья>
<h2> <a href =
/blog/Birding/2007/04/23/Spring-Comes и Goes-In-Sussex-County/>
Весна наступает (и идет) в округе Сассекс </a> </h2>
<p> вчера я присоединился к Brooklyn Bird Club для нашего
Ежегодная поездка в Западный Нью -Джерси, в частности, гипер
Гумус, относительно недавно обнаруженная горячая точка. Это
начался как хорошее зимнее утро, когда мы прибыли в
Сайт в 7:30 утра, прогрессировал до весны около 10:00
AM и достиг начала лета до 10:15. </p>
</article>
<статья>
<h2> <a href =
/blog/birding/2007/04/23/но-does-it spend-for-your-life-list/>
Но это имеет значение для вашего списка жизни? </a> </h2>
<p> кажется, что теперь ты можешь пойти <
href =
2007/04/cone_sf> наблюдение за птицами через Интернет </a>. я
еще не смог протестировать его (20 пользователей
Определенно предел), но это, безусловно, круто.
Лично я не могу представить, что это заменит
На самом деле в поле на поле на любую небольшую сумму.
С другой стороны, я всегда находил это довольно
грустно встречаться с старшими птицами, которые больше не могут
Держите бинокль устойчиво или попадайте в парк. Я могу
Представьте, что это может быть для них интересно. В
По крайней мере, одна пожилая птица сделала большой год по телевизору после
Он больше не мог выйти так много. Это конечно
Верх это. </p>
</article>
<av>
<a href =/blog/page/2/> «_fcksavedurl =/blog/page/2/>« Предыдущие записи </a>
</nav>
</section>
<av>
<ul>
<li> <h2> info </h2>
<ul>
<li> <a href =/blog/comment-policy/> политика комментариев </a> </li>
<li> <a href =/blog/todo-list/> todo list </a> </li>
</ul> </li>
<li> <h2> Архив </h2>
<ul>
<li> <a href = '/blog/2007/04/'> апрель 2007 г. </a> </li>
<li> <a href = '/blog/2007/03/'> март 2007 г. </a> </li>
<li> <a href = '/blog/2007/02/'> февраль 2007 г. </a> </li>
<li> <a href = '/blog/2007/01/'> январь 2007 г. </a> </li>
</ul>
</li>
</ul>
</nav>
<нижний колонтитул>
<p> Copyright 2007 Эллиотт Расти Гарольд </p>
</cooler>
</body>
</html>
Теперь не нужно. Вам больше не нужно устанавливать атрибут класса самостоятельно, и вы можете сделать вывод значения каждой части из стандартного имени элемента. Это особенно важно для аудио-браузеров, мобильных браузеров и других нестандартных браузеров.
(продолжение следует)