Я начал изучать веб-стандарты в начале прошлого года и за последние два года приобрел некоторый опыт. Недавно я сменил работу и теперь свободен дома, поэтому написал кое-что, чем хочу поделиться со всеми.
1. Понимание веб-стандартов и спецификаций W3C XHTML.
Согласно общепринятому пониманию, эти два понятия, похоже, относятся к одному и тому же (эти «передовые теории» мы обсуждаем в этом выпуске^_^). Но я думаю, что на самом деле с технической точки зрения эти две вещи вообще почти не связаны. Короче говоря, веб-стандарты призваны самостоятельно реализовывать структуру, производительность и поведение страницы. Говоря проще, это популярный в сегодняшней рекрутинге язык «div+css». Однако ни одна версия W3C XHTML не налагает ограничений на концепцию веб-стандартов. Очевидно, мы можем использовать xhtml 1.1 для написания веб-страницы с размещением в таблице. В этот момент вы можете подумать, что я говорю много ерунды. Но любую технологию правильно использовать можно только тогда, когда у вас есть достаточно четкое представление об основных понятиях. Позвольте мне рассказать о двух ошибочных путях текущего применения веб-стандартов со следующих двух аспектов:
Первый случай прост. Я думаю, что пока используется XHTML+CSS, это веб-стандарт. Страница полна классов и идентификаторов. Не стесняйтесь определять отдельные классы для каждой детали. Отличие такой страницы от традиционного HTML заключается в том, что в теге img есть дополнительный символ «/». На самом деле, лучше вернуться к традиционному HTML. По крайней мере, я могу легко использовать шрифты, не просматривая таблицу стилей, как словарь. Еще об одном, более тонком и случайном использовании CSS, о котором я расскажу позже.
Я думаю, что вторую ситуацию сложнее понять, то есть пытаться использовать различные сложные вложенные элементы div и операторы CSS для достижения желаемой производительности. Очень простой пример - это только что просмотренный пост «Углы страницы закруглены без обрезки изображения». Прежде всего, я хочу убедиться, что эта идея действительно хороша, используя функцию CSS для «рисования» закругленных углов. Для этого дизайнер должен добавить в соответствующее место большой участок кода следующим образом:
| Ниже приводится цитируемое содержание: Пример исходного кода [www.52css.com] <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b> <b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b> |
Однако это серьезно нарушает основную концепцию веб-стандартов — разделение структуры и представления. Потому что он помещает код, используемый для управления производительностью веб-страницы, в структурный документ. Возможно, вы скажете, что на самом деле код реальной производительности помещается в CSS. Но я думаю, что это украденная концепция. Поскольку приведенные выше теги b не имеют ничего общего со структурой веб-страницы, все они являются пустыми тегами. То есть не существует возможности поместить что-то туда, где того требует структура документа. Так что это просто мусорный код для структуры документа.
Другой пример может быть более тонким. Раньше я видел статью на alistapart.com о том, как реализовать трехсторонние столбцы на веб-странице. Принцип, вероятно, заключается в использовании трех или четырех элементов div для вложения друг в друга. Я считаю, что это тоже нарушение веб-стандартов. Потому что порядок, в котором эти теги div размещаются в коде, нужен не просто для структурных нужд, а для производительности веб-страницы.
Я, конечно, признаю, что приведенная выше точка зрения в определенной степени является излишеством (но с другой стороны, если приходится реализовывать некартинные закругленные углы, не является ли это тоже излишним, хаха). Иногда структуру и производительность не так-то просто разделить. Чтобы добиться высокой производительности, нам нужно позволить структуре адаптироваться (подумайте об использовании <div style="clear:both" />). Но важно знать, что правильно, а что нет. Даже если иногда нам приходится делать что-то не так.
Наконец, я хочу заявить, что я не говорю, что «закругленные углы без изображения» бессмысленны или неправильны. Я также восхищаюсь умом и вдохновением автора. Я думаю, что такого рода технические исследования аналогичны использованию CSS для рисования национального флага раньше, и они очень полезны для освоения технологии CSS. Однако его использование должно быть столь же ограниченным, как и флаг CSS, и не должно использоваться в практических приложениях. Потому что это нарушает основные принципы веб-стандартов.
2. Семантика HTML-тегов
Сегодняшние веб-стандарты в просторечии называются «div+css» или «макет слоя». Я не возражаю против такой целесообразности. Но это приведет к недоразумению: использованию большого количества тегов div в качестве структурных элементов. На самом деле это более продвинутая форма злоупотребления div (упомянутая Джеффри Зельдманом в книге «Рефакторинг веб-сайта»).
HTML предоставляет нам довольно много тегов, каждый из которых имеет свое собственное значение. Я думаю, что при проектировании, помимо соблюдения синтаксиса HTML, мы должны в полной мере использовать и соблюдать «семантику» каждого тега. Например, текст заголовка должен быть включен в h1-h6, большие абзацы текстового контента должны быть сегментированы с помощью <p> вместо <br />, элементы списка должны быть помещены в ul, ol или dl, а данные в табличной форме. все равно должен быть макет таблицы.
Зачем это делать? Очень убедительная причина — гарантировать, что когда пользователь уберет отображение CSS, веб-страница сможет отображать структурную иерархию контента максимально эффективно. Если используются все элементы div, то при удалении CSS вся веб-страница потеряет свою иерархию, оставив только несколько беспорядочных текстовых фрагментов. Это не соответствует требованиям веб-стандарта по совместимости с низкими конфигурациями.
Позвольте мне подробно изложить мое понимание семантики некоторых тегов:
п бр
Сначала поговорим о самом простом. Используйте теги p вместо br (даже два последовательных <br />) для абзацев. Кажется, это само собой разумеется. Но иногда нам приходится отказаться от этого принципа. Типичным примером является сообщение на форуме: если я хочу его сегментировать, я нажимаю Enter. То, что передается на задний план и отображается таким образом, очевидно, сегментируется с помощью <br />.
стол
Из-за энергичного продвижения div+css создается впечатление, что тот, кто использует табличную компоновку, является нецивилизованным аборигеном. Но я считаю, что эта точка зрения неверна. Значение слова table — это таблица, поэтому любые данные, которые должны отображаться в табличной форме, все равно должны быть представлены в таблице. Простым примером является список одноклассников, включая имена, студенческие билеты, пол и т. д. Очевидно, что это данные в табличной форме, поэтому следует использовать табличный формат. Еще один пример, который стоит изучить, — это навигация по календарю в блоге. Однажды я видел программу-блог, в которой все даты в календарной навигации заключены в элементы div от 1-го до 30-го, а затем используется стиль float:left для расположения календаря текущего месяца в ряд из 7. Когда я отключаю отображение CSS в браузере, часть календаря располагается вертикально от №1 до №30. Я думаю, что это неправильно. Поскольку данные календаря должны представлять собой таблицу, ее по-прежнему следует использовать. После отмены CSS они все равно должны быть сгруппированы в таблицу по 7 строк.
это еще один тег, который будет игнорироваться. Благодаря всемогуществу CSS все ячейки таблицы могут быть созданы с использованием td и атрибута класса. Но семантически некоторые ячейки таблицы должны быть помечены th. Например, в упомянутой выше календарной таблице в единицах измерения недели «ПОН ВТ СР... ВС», определяющих неделю, следует использовать th вместо td.
h1-h6
Теги h1-h6 семантически должны работать для всего текста заголовка. Поэтому некоторые методы записи, такие как <div class="diary-title>, являются избыточными. Запишите их напрямую как <h1>, а затем напрямую определите CSS для h1 вместо .diary-title. Разве это не будет иметь тот же эффект? Конечно, это правило не может быть слишком жестким, потому что иногда структурные элементы заглавной части не могут быть решены простым использованием h1, но в лучшем случае я использую метод типа <h1><span></ span></h1> для изменения заголовка. Структура имеет более сложную вложенность для удовлетворения потребностей в производительности.
Но здесь возникает смысловое разногласие. Следует ли понимать h1 как заголовок первого уровня или как заголовок с размером шрифта 1? Обычно я понимаю это как заголовок первого уровня, и если под заголовком первого уровня есть субтитры, используйте h2. Но на самом деле, оглядываясь назад на начало HTML-дизайна, цифры после h1-h6 больше понимаются как управление размером текста заголовка. h3 может использоваться только для использования шрифта третьего размера, а не для заголовка третьего уровня. В противном случае все заголовки первого уровня используют h1, и все они очень большие шрифты, и вам придется использовать CSS для управления размером шрифта, что кажется очень громоздким. Итак, это вопрос для обсуждения.
ул ол
Всякий раз, когда вам нужно перечислить термины, вы должны использовать ul или ol вместо p. Например, требования к должности в объявлениях о приеме на работу, такие как меры предосторожности, такие как инструкции по выполнению действий. Кроме того, популярно использование ulli для отображения меню навигации веб-страницы, а затем использование CSS для управления его расположением.
Следует добавить, что не забывайте, что ul или ol можно использовать в li для формирования списка второго уровня.
дл дт дд
Это почти забытый набор тегов, но Джеффри Зельдман активно пропагандирует их использование при «рефакторинге веб-сайтов». dl должно быть полным именем «списка определений (или списка определений? Если кто-нибудь знает, пожалуйста, сообщите мне)». Типичное использование — это словарная статья. Название слова помещается в dt, а объяснение слова — в dd. Веб-сайт alistapart.com еще умнее: весь правый столбец определяется как dl, используя dt для названия каждого блока и dd для содержания блока.
изображение
Сам тег img мало что может сказать. Я просто хочу поговорить о банальном, то есть использовать img только тогда, когда этот элемент действительно является необходимым изображением в контенте. В противном случае его следует определить как стиль с помощью CSS. Например, иллюстрации, аватары, смайлы — это картинки, которые должны присутствовать в контенте, используйте img. Другие элементы, такие как фоновое изображение заголовка и маленький значок перед элементом списка, не должны использовать тег img.
охватывать
span сейчас так же популярен, как и div. Но на самом деле я думаю, что нам следует придерживаться его первоначального использования. Насколько я понимаю, изначально интервал использовался для хранения атрибутов класса или стиля. Само по себе оно не имеет четкой семантики. Поэтому в текстовом потоке, если нам нужно внести изменения в стиль какого-либо текста, мы используем диапазон, чтобы заключить его. Например, если некоторые слова нужно добавить красным, я использую <span class="red">.
Однако стоит отметить, что это может вызвать проблемы, упомянутые ранее в разделе h1. Поскольку некоторые текстовые стили на самом деле имеют готовые теги, такие как <strong>, <sub> и т. д., нам также следует соответствующим образом предоставить им некоторые возможности.
а
a — метка, управляющая гиперсвязью. Но есть особые случаи, когда нам может не понравиться его использовать. Например, должно появиться небольшое окно. Я не обратил особого внимания, но думаю, что некоторые дизайнеры определят onclick непосредственно в теге <img> значка воспроизведения. Лично я считаю, что нам следует добавить a вне img, затем определить onclick внутри a и не забыть написать return false в конце функции js. Если возможно, атрибут href тега a также должен быть записан вместе с URL-адресом всплывающего окна, чтобы пользователи могли эффективно открывать страницу, даже если JS отключен.
Это все, что я пока перечислю.
Наконец, давайте подведем итог важности соблюдения семантики HTML-тегов. Одним из требований веб-стандартов является низкопрофильная совместимость: когда пользователь отключает изображения, CSS или JS, мы все равно можем позволить ему эффективно просматривать веб-контент. Как мы все знаем, обязательный атрибут alt предназначен для обеспечения совместимости при отключении изображений. Правильное следование семантике HTML-тегов обеспечивает совместимость при отключенном CSS. Только если HTML-теги используются правильно и наша веб-страница имеет «полосы CSS», люди все равно смогут видеть, где находится меню навигации, где находится заголовок статьи, и таблица календаря не развалится.