Структурирование XHTML之二: анализ случая: структурированные теги W3school

В любом случае, не пропустите этот раздел. Чтение этой главы улучшит ваши навыки, поможет похудеть вашему веб-сайту и предоставит более четкое понимание различий между маркерами и дизайном. Идеи, изложенные в этой главе, легко обучаемы, но они могут значительно улучшить производительность веб-сайта, а также удобство дизайна, создания и обновления веб-сайта.

В этом разделе вы узнаете, как撰写 логически четкие и компактные маркеры, которые позволят вам уменьшить трафик带宽 на около 50%, уменьшить нагрузку и давление на серверы, а также сократить время загрузки веб-сайта. Удалив те элементы, которые не приносят никакой пользы, и изменив плохие привычки, мы можем достичь указанных целей.

这些坏习惯折磨着网络中的许多站点，特别是那些将 CSS 代码与主要基于表格的布局混合在一起的站点。这种做法笨拙且不经济，即使是对于那些在其他领域很有经验的设计师来说。同时，出现这个问题的几率是均等的，不论是那些手写代码的站点，还是利用可见编辑工具，比如 Dreamweaver 和 GoLive，来创建的站点。

本节会提出这些常见的错误，这样你就可以识别和防范它们，并且学会如何改正错误。我们详细阐述唯一标识符属性 (id) - ，并展示它如何使你可以编写极其紧凑的 XHTML 代码，不论你创建的是混合布局还是纯粹的 CSS 布局。

每个元素都必须结构化吗？

正如上一节中我们讲到的那样，每个元素都可以被结构化，CSS 可使得一个有序或无序的列表显示为彻头彻尾的导航栏，其中还拥有反转按钮效果。文档的内容可以通过普通的元素进行标记，这些元素通过特定的结构化属性标志来指示出它们在网站设计中所扮演的语义角色。

我们在公元 2006 年创建了 CodeW3C.com 的第一个中文测试版，我们在一开始就使用了 CSS 进行布局，并使用 XHTML 来结构化文档。每一个其中的元素都是结构化的，从标题到列表，乃至段落。你可以在 CodeW3C 的每个页面看到具有反转效果的首页按钮和二级菜单按钮。下面是这两个组件的 XHTML 代码：


<div id="navfirst">
<ul id="menu">
<li id="h"><a href="/h.asp" title="Учебник по html">Учебник по html</a></li>
<li id="x"><a href="/x.asp" title="Учебник по XML">Учебник по XML</a></li>
<li id="b"><a href="/b.asp" title="Браузерные скрипты">Браузерные скрипты</a></li>
<li id="s"><a href="/s.asp" title="Серверные скрипты">Серверные скрипты</a></li>
<li id="d"><a href="/d.asp" title="Туториалы по dot net">Туториалы по dot net</a></li>
<li id="m"><a href="/m.asp" title="Туториалы по multimediа">Туториалы по multimediа</a></li>
<li id="w"><a href="/w.asp" title="Руководство по созданию сайтов">Руководство по созданию сайтов</a></li>
</ul>
</div>

div、id 和其他帮手

如果被正确地使用，div 可以成为结构化标记的好帮手，而 id 则是一种令人惊讶的小工具，它使你有能力编写极其紧凑的 XHTML，以及巧妙地利用 CSS，并通过标准文档对象模型 (DOM) 向站点添加复杂精巧的行为。

W3C 在其最新的 XHTML2 草案的 XHTML 结构模型中这样定义 div：

div 元素，通过与 id、class 及 role 属性配合，提供向文档添加额外结构的通用机制。这个元素不会将表现的风格定义于内容。所以，创作者可以通过将这个元素与样式表、xml:lang、属性等配合使用，使 XHTML 适应他们自身的需求和口味。

div является аббревиатурой от division. Division означает разделение, зону, группу. Например, когда вы объединяете一系列 ссылок, вы создаете division документа.

Универсальный механизм определения структуры

Все пишущие HTML знакомы с такими общими элементами, как абзацы и заголовки, но некоторые могут быть не так знакомы с div. В описании W3C мы можем найти ключ к пониманию элемента div, "универсальный механизм добавления структуры."

На главной странице нашего сайта мы заключаем список разделов уроков в div, так как список разделов не является частью正文ных элементов. В нем элементы h2 помечают заголовки каждого урока, а элементы ul помечают детализированные списки каждого урока. Однако в более общем и конкретном смысле этот список разделов играет роль структурированного компонента, то есть компонента вторичного навигатора. Чтобы выделить эту роль, мы используем id navsecond для пометки этого div.

<div id="navsecond">
<h2>Уроки HTML</h2>
<ul>
<li><a href="/html/index.asp" title="Уроки HTML">HTML</a></li>
<li><a href="/xhtml/index.asp" title="Уроки XHTML">XHTML</a></li>
<li><a href="/css/index.asp" title="Уроки CSS">CSS</a></li>
<li><a href="/tcpip/index.asp" title="Уроки TCP/IP">TCP/IP</a></li>
</ul>
<h2>Уроки XML</h2>
<ul>
<li><a href="/xml/index.asp" title="Уроки XML">XML</a></li>
<li><a href="/xsl/xsl_languages.asp" title="XSLlanguage">XSL</a></li>
... ...
... ...
</div>

Вы можете использовать любое имя. "Gladys" и "orangebox" полностью соответствуют правилам именования XHTML. Однако наилучшим вариантом являются семантические или мета-структурные имена (т.е. имена, которые объясняют функцию элементов).

Когда клиент решает использовать синий цвет, вам может показаться, что назвать часть сайта orangebox (оранжевая рамка) будет очень глупо. В следующей ситуации вы можете чувствовать себя еще глупее, когда, например, остается всего шесть месяцев до последней поставки, вы начинаете корректировать таблицы стилей, но никак не можете вспомнить, что "Gladys" (имя женщины) означает навигационную область,侧栏 или поле поиска.

Таким образом, маркировка id как "menu", "content" или "searchform" поможет вам запомнить. Furthermore, маркировка не эквивалентна дизайну, хорошо структурированная страница может быть форматирована так, как вы хотите. Таким образом, независимо от того, используете ли вы чистый CSS-дизайн или гибридный дизайн, вы полностью измените привычку думать и работать с маркерами presentations.

id против class

атрибут id для XHTML не нов; атрибут class или элемент div также не нов. Все они могут быть отведены к эре HTML. Атрибут id назначает уникальное имя элементу. Каждое имя может использоваться только на странице, к которой оно было присвоено. (Например, если ваша страница содержит div с id content, то другой div или другой элемент не могут использовать это имя. Напротив, атрибут class может использоваться множество раз на странице (например, пять абзацев на странице могут использовать имена class "small" или "footnote"). Следующие теги помогут прояснить различия между id и class:

<div id="searchform">Компоненты формы поиска должны размещаться здесь. Это
отдел страницы уникален.</div>
<div class="blogentry">
   <h2>今天的博客文章</h2>
   <p>Здесь размещается контент блога.</p>
   <p>Вот еще один абзац контента блога.</p>
   <p>Так же, как на странице может быть много абзацев, так же
   в блоге может быть множество записей. Страница блога может использовать
   множественные экземпляры класса "blogentry" (или любого другого
   class).</p>
</div>
<div class="blogentry">
   <h2>Вчерашняя запись в блоге</h2>
   На самом деле, здесь мы находимся внутри другого div с классом
   "blogentry."
   Они размножаются, как кролики.
   Если на этой странице есть десять статей в блоге, то возможно
   быть десятью div с классом "blogentry".
</div>

В этом примере div с именем searchform используется для обертывания области страницы, содержащей форму поиска, а div с классом "blogentry" используется для обертывания каждого входа статьи в блоге. На странице есть только одна форма поиска, поэтому мы выбрали для нее атрибут id, чтобы отметить этот уникальный компонент. Однако блог содержит множество статей, поэтому в этом случае используется атрибут class. Таким же образом, новостные сайты обычно имеют множество div, и их классы могут называться "newsitem" или чем-то другим.

Не все сайты требуют использования div. Blog-сайты могут ограничиться использованием заголовков h1, H2 и H2 и абзацев <p>. Это также верно и для новостных сайтов. Мы показываем div с классом blogentry, не поощряя вас заваливать сайт div, а просто чтобы продемонстрировать принцип: в одном и том же HTML-документе можно использовать несколько классов, но только один id.

Теория липкой ленты

Представьте себе, что атрибут id подобен липкой ленте. Я наклеиваю ленту на холодильник, чтобы напомнить себе купить молоко, на телефон, чтобы напомнить позвонить клиенту, который опаздывает с оплатой, и еще одну на обложку книги учета, чтобы напомнить, что я должен оплатить счета до 15-го числа этого месяца.

id также будет помечать особые области документа, чтобы напомнить вам,哪个 область требует особого обращения. В этом смысле атрибут id похож на липкую ленту. Чтобы реализовать так называемую особую обработку, вам нужно использовать этот особый id для написания нескольких правил в таблице стилей или добавить несколько строк кода в файл JavaScript. Например, в вашем файле CSS есть некоторые правила, которые применяются только к элементам, находящимся внутри div с именем searchform.

Когда атрибут id используется как магнит (магнит) в сочетании с рядом специфических CSS правил, он называется CSS селектором. Есть многоСоздание селекторовМетод, но id легко использовать и имеет множество применений.

Сила id

Атрибут id невероятно силен. Он обладает следующими возможностями:

  • Как селектор таблицы стилей, позволяющий создавать компактные минимизированные XHTML.
  • Как целевая анкера гипертекста, заменившая устаревший атрибут name.
  • Как метод для определения конкретного элемента из скрипта, основанного на DOM.
  • Как имя объекта элемента.
  • Как инструмент для всеобщего использования (общего назначения обработки) (в примерах W3C, "используется в случаях, когда данные извлекаются из HTML-страницы в базу данных, или когда HTML-документ преобразуется в другой формат и т.д., в качестве инструмента для идентификации области").

Правила id

Значение id должно начинаться с буквы или подчеркивания; не может начинаться с цифры. Хотя проверка W3C не捕获 эту ошибку, но XML анализатор это сделает. В то же время, если вы используете id в сочетании с JavaScript в формах, имена и значения должны быть законными переменными JavaScript. Пробелы и дефисы, особенно дефисы, не допускаются. Более того, использование подчеркивания в именах class или id не рекомендуется, это связано с ограничениями в CSS2.0 (и在一些 браузерах).

Семантические маркеры и доступность

Теперь我们已经讨论了用途广泛的 XHTML элементы (в частности, div и id), давайте рассмотрим примеры на главной странице нашего сайта. Сначала давайте вспомним меню, расположенное в заголовке страницы:

<div id="navfirst">
<ul id="menu">
<li id="h"><a href="/h.asp" title="Учебник по html">Учебник по html</a></li>
<li id="x"><a href="/x.asp" title="Учебник по XML">Учебник по XML</a></li>
<li id="b"><a href="/b.asp" title="Браузерные скрипты">Браузерные скрипты</a></li>
<li id="s"><a href="/s.asp" title="Серверные скрипты">Серверные скрипты</a></li>
<li id="d"><a href="/d.asp" title="Туториалы по dot net">Туториалы по dot net</a></li>
<li id="m"><a href="/m.asp" title="Туториалы по multimediа">Туториалы по multimediа</a></li>
<li id="w"><a href="/w.asp" title="Руководство по созданию сайтов">Руководство по созданию сайтов</a></li>
</ul>
</div>

У нас есть семь ссылок, каждая из которых分配ена идентификатор id для соответствующего контента: например, id h соответствует курсу HTML, и так далее. Эти ссылки также заключены в элемент списка с именем menu, который указывает на функцию этого списка - список меню, а более внешний div с именем navfirst используется для обозначения этого раздела (section) на странице, отличая его от таких элементов, как主要内容 (maincontent), боковая панель (sidebar) и нижний колонтитул (footer).

Элементы div и ul предоставляют реальную структуру, то есть указывают на функцию содержимого (панель навигации) и его положение в документе (положение заголовка страницы). Напротив, традиционное таблицное разложение не предоставляет никакой семантической информации о данных и легко съедает в три раза больше带宽.

Обратите внимание, что эти метки не содержат тега img, поэтому не связаны с свойствами width, height, background или border и т.д. Также они не используют ячейки таблицы и не затрагивают связанные с ними свойства. Они очень чистые и компактные, предоставляя все необходимое для их понимания.

Используя CSS, эти метки предоставляют посетителям сайта надежную и быстро загружаемую компоновку. Также они предлагают возможность создания более гибкого и разнообразного внешнего вида. В отсутствие CSS наши хорошо структурированные метки по-прежнему могут безошибочно предоставлять все содержимое.

Чувствительные к деталям читатели, возможно, уже заметили, что текст, содержащийся в элементе a, не отображается браузером. Это также благодаря идеальному сочетанию структурированных меток и CSS, которое позволяет нам с помощью нескольких строк CSS-правил определить триггер, при котором пользователи, использующие графический браузер, видят красивые кнопки навигации, а пользователи, использующие текстовые читатели, также получают полный текст. Таким образом, для всех пользователей контент одинаковый.

Кроме того, поскольку метки не включают изображения и ячейки таблиц, этот компонент навигации может быть использован на любой странице в网站上, не изменяя структуру, и придает ему разные визуальные эффекты. Кратко говоря, модулируя код, мы提高了 его повторное использование.