Структурирование XHTML之一: Использование XHTML для перепроектирования веб-сайта

Одна из причин, по которой мы назвали этот раздел: «XHTML: простые правила, легкие рекомендации», заключается в том, что правила и рекомендации, обсуждаемые в этом разделе, просты и легки. Другая причина заключается в том, что книга, написанная просто и легко, как бесплатные товары в супермаркете, может эффективно привлечь внимание и стимулировать интерес, а также поощрять людей к экспериментам.

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

С другой стороны, реорганизация - это истинное значение XHTML.

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

Обзор правил XHTML

Преобразование традиционного HTML в XHTML 1.0 быстро и безболезненно, если вы следуете некоторым простым правилам и рекомендациям. Неважно, использовали ли вы когда-либо HTML, это не помешает вам использовать XHTML.

  • Используйте правильное объявление типа документа и пространство имен.
  • Используйте элемент meta для объявления типа вашего содержимого.
  • Пишите все элементы и свойства строчными буквами.
  • Оставьте все значения свойств в кавычках.
  • Присвойте значение всем свойствам.
  • Закройте все теги.
  • Используйте пробелы и косую черту для закрытия пустых тегов.
  • Не пишите двойные подчеркивания в комментариях.
  • Убедитесь, что символы < и & правильно используются в формуле.

Unicode и другие наборы символов

Default字符集 для документов XML, XHTML и HTML 4.0 - Unicode, стандарт, определенный Unicode联盟. Unicode - это全集字符, который предоставляет каждому символу уникальный цифровой идентификатор, независимо от платформы, программы и языка. Unicode также является наиболее близким к универсальному алфавиту, хотя он не является алфавитом, а набором числовых схем.

Хотя Unicode является-default字符集 для веб-документов, разработчики могут свободно выбирать другие字符ные наборы, более подходящие для них. Например, веб-сайты США и Западной Европы часто используют кодировку ISO-8859-1 (Latin-1), а национальный стандарт Китая - gb2312.

Маркируйте документ для семантики, а не для стиля

Запомните: используйте CSS для макета в максимальной степени. В мире веб-стандартов, XHTML-маркеры не связаны с представлением, они связаны только с структурой документа.

Структурированные документы могут передавать браузерам как можно больше семантики, независимо от того, находится ли браузер на мобильном компьютере или стильном настольном графическом браузере. Структурированные документы могут передавать пользователям визуальную семантику, даже в старых браузерах или в современных браузерах, в которых пользователи отключили CSS.

Не каждый сайт может сразу же отказаться от таблицового макета HTML. Создатель CSS, W3C, только в ноябре 2002 года перевел свой официальный веб-сайт на макет CSS. Однако, даже приверженцы стандартизации не всегда полностью отделяют представление от структуры, по крайней мере, в XHTML 1 это было невозможно. Но теперь мы можем сделать значительный шаг к этой идеале, отделяя представление от структуры (или данные от дизайна), даже в традиционных макетах.

Ниже приведены некоторые советы, которые помогут вам думать более структурированно:

Цвета в аннотациях

В грамматической школе большинство из нас были вынуждены использовать стандартные форматы аннотирования для написания статей. Теперь, став дизайнерами, мы можем с такой свободой摆脱 ограничения аннотирования, чтобы смело投身于独特的 области личного самовыражения (может быть, наши брошюры и коммерческие веб-сайты еще не так уникальны и индивидуальны). Но по крайней мере, мы больше не страдаем от ограничений аннотирования.

На самом деле, согласно HTML,我们应该将内容结构化为有组织的层级。В периоды, когда браузеры не поддерживали CSS, мы не могли выполнять это, предоставляя готовые к продаже макеты. Но сегодня, реализуя наш дизайн без компромиссов, мы можем предоставить документы с внутренней структурой.

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

<h1>Моя тема</h1>
<p>Введение</p>
<h2>Дополнительное мнение</h2>
<p>Связанные тексты</p>

Кроме того, избегайте использования废弃的 HTML-элементов, таких как <font>, или несемантических элементов, таких как <br>, для имитации несуществующих логических структур.

Например, не делайте так:

<font size="7">Моя тема</font><br />
Введение<br /><br />
<font size="6">Дополнительное мнение</font><br />
Связанные тексты<br />

Используйте элементы в зависимости от их значения, а не от их внешнего вида

Некоторые из нас уже попали в плохую привычку использовать h1, когда нам просто нужно крупный текст, или использовать li, когда нам нужно добавить точку перед текстом. Как мы обсуждали в предыдущей главе, браузеры всегда привыкли навязывать элементы дизайна HTML. Мы все привыкли думать, что h1 означает крупный шрифт, а li означает точку, или blockquote означает отступ текста. Большинство из нас все еще используют структурированные элементы для имитации визуальных эффектов при написании HTML.

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

Это основной заголовок, когда я организую текст по纲目.
Это не основной заголовок, но я хочу, чтобы он использовал одинаковые шрифты, как и上面的标题, но я не знаю, как использовать CSS.
Это根本不是一个标题。Но я очень хочу, чтобы текст на странице использовал одинаковые шрифты, чтобы достичь того, что я хочу.
Если я懂CSS, я могу достичь этого дизайна, не разрушая структуру документа.

Мы должны отложить наши маленькие хитрости и начать использовать их на основе семантики элементов, а не на основе их внешнего вида. На самом деле, h1 может стать тем, чем вы хотите. Через CSS, h1 может стать тонким курсивом, а текст p может стать жирным и крупным, li также могут не иметь точек (вы можете использовать PNG, GIF или JPEG изображения с изображениями маленьких котят и щенков или логотипа компании вместо них) и т.д.

С сегодняшнего дня мы будем использовать CSS для определения внешнего вида элементов. Мы можем даже изменить их вид в зависимости от их местоположения на странице или в сайте. CSS может полностью отделить представление от структуры и позволяет вам форматировать любые элементы по своему усмотрению.

h1, h2, h3, h4, h5, h6 {
	font-family: georgia, palatino, "New Century Schoolbook",
	times, serif;
	font-weight: normal;
	font-size: 2em;
	margin-top: 1em;
	margin-bottom: 0;
	}

Зачем вам это нужно? Цель этого - получить брендовый вид и Gefühl в графических браузерах, в то же время сохраняя структуру документа в текстовых браузерах, на беспроводных устройствах, в HTML-форматированных письмах.

Мы не хотим рассказывать о CSS больше, чем это необходимо в разделе о XHTML. Мы просто хотим показать, что структура документа и его визуальное выражение - это два совершенно разных вещи, и структурированные элементы должны использоваться для преобразования текста, а не для наложения визуальных эффектов.

Используйте структурированные элементы, а не бессмысленный мусор

Из-за того, что мы забыли или вовсе не знаем的目的 использования HTML и XHTML для передачи структурированного смысла, многие спорщики по HTML используют теги для вставки списков:

Элемент один<br />
Элемент два<br />
Элемент три<br />

Рассмотрите возможность использования упорядоченного или неупорядоченного списка вместо этого:

<ul>
<li>Элемент один</li>
<li>Элемент два</li>
<li>Элемент три</li>
</ul>

"Но li даёт мне точку, а мне не нужна точка!" вы, возможно, скажете. В соответствии с предыдущим разделом, CSS не делает никаких предположений о ожидаемом внешнем виде элементов. Он ждет, чтобы вы сказали ему, какой внешний вид вы ожидаете от элементов. Закрытие точки - это最基本的能力 CSS. Он может сделать список看起来 так же, как и обычный текст, или сделать его看起来 как графический навигационный панель, с полным обратным эффектом.

Таким образом, пожалуйста, используйте элементы списка для маркировки списков. Аналогично, используйте strong вместо b, em вместо i и т.д. В большинстве браузеров по умолчанию отображение strong такое же, как и b, а em и i такие же, и вы также можете создавать ожидаемый визуальный эффект, не разрушая структуру документа.

Несмотря на то, что CSS не делает никаких предположений о способе отображения элементов, браузеры делают множество предположений, и мы еще не встретили браузер, который отображает strong не как жирный шрифт (кроме случаев, когда это указано CSS设计师ом по-другому). Если вы беспокоитесь, что某个 незнакомый браузер не будет отображать strong как жирный шрифт, вы можете написать такое правило CSS:

strong {
	font-weight: bold;
	font-style: normal;
	}

Визуальные элементы и структура

Веб-стандарты не только требуют использования определённых технологий, но и соблюдения способов использования этих технологий. Использование XHTML для написания маркеров, а CSS для обработки части или всех макетов, не всегда делает сайт более удобным и лёгким, а также экономит多少带宽. Как и в случае с техниками, которые мы использовали в начале, XHTML и CSS также могут быть использованы неправильно и злоупотреблены. Длинный XHTML и длинный HTML также могут浪费带宽 и время пользователей. Длинный избыточный CSS не может полностью заменить отображаемый код HTML; это всего лишь замена одной плохой вещи другой.