Всякий раз, когда я посещаю красивый веб-сайт, я не могу не взглянуть на исходный код. Это как иметь рентгеновские очки и видеть кого угодно, даже через фиговый листок. Это просто само собой разумеющееся! Мне не терпится узнать, написан ли этот прекрасный веб-сайт с таким же красивым кодом или это просто красота в красоте. Код? Красота? конечно! В конце концов, код похож на поэзию. (Примечание для перевода: «Код — это поэзия» — это слоган знаменитой системы блогов WordPress.) Это всего лишь самый простой HTML. Он, естественно, не так сложен и элегантен, как другие динамические языки, но все же сохраняет очарование, придаваемое его языком. творец. Художественные штрихи.
Это заставило меня задуматься, как сделать код красивым? В HTML это вся ручная работа. Давайте посмотрим, как языки разметки могут достичь состояния красоты.
Изображение достаточно большое (2000x2000), чтобы вы могли его распечатать, повесить в свой личный шкафчик и произвести впечатление на друзей. Однако это действительно сбивающий с толку размер. Я выложу исходное PSD-изображение, чтобы каждый мог его изменить.
HTML5. HTML5 и его новые элементы привносят беспрецедентную красоту.
DOCTYPE — HTML5 имеет лучший тип документа .
Отступы. Табуляция и пробелы используются для отступов кода, чтобы правильно показать отношения «родитель-потомок» между тегами и подчеркнуть иерархическую структуру.
Кодировка — объявление кодировки должно быть сделано в заголовке перед всем содержимым.
Название. Название сайта простое и понятное. Начните с описания функции страницы после разделителя и закончите названием сайта.
CSS — использует только простую таблицу стилей (типы мультимедиа объявлены в таблице стилей) и ориентирован только на хорошие браузеры. IE6 и более ранние версии получат общую таблицу стилей.
Тело. Присвоив телу идентификатор, вы можете уникально стилизовать его для разных страниц без необходимости дополнительной разметки.
JavaScript — называется jQuery (самая красивая библиотека сценариев JavaScript ) от Google. Загружается только один файл JavaScript. Ссылка на каждый скрипт указана внизу страницы.
Путь к файлу. Для повышения эффективности используйте относительные пути к ресурсам сайта. С точки зрения адаптации к перепечатке файлы содержимого (например, изображения) используют абсолютные пути.
Атрибуты изображения. Изображение содержит альтернативный текст, в основном на тот случай, если изображение отсутствует, но его также можно использовать для проверки. Чтобы повысить эффективность рендеринга, лучше всего указать ширину и высоту изображения.
Сначала основное содержимое. Основное содержимое страницы должно располагаться после базовой разметки и навигации и перед любым вспомогательным содержимым (например, боковыми панелями).
Соответствующие описательные элементы блочного уровня — HEADER, NAV, SECTION, ARTICLE, ASIDE — эти новые « разделы описания » будут описывать контент лучше, чем предыдущий DIV.
Иерархия. Использование заглавных букв в тегах заголовков будет эффективным и будет следовать четкой « иерархии ».
Соответствующие описательные теги. Списки помечаются в соответствии с различными потребностями: несортированные, отсортированные и настраиваемые списки, которые обычно не используются.
Включенный общий контент – один и тот же контент, который отображается на разных страницах, лучше всего включать в страницу со стороны сервера. (Любым методом, языком, CMS, любым удобным для вас способом.)
Семантические классы – необходимо не только задать правильные имена элементов, но и обеспечить семантичность имен классов и идентификаторов : они могут играть описательную роль даже без специальных инструкций. (Например, «col» лучше, чем «left»).
Классы – если нескольким элементам необходимо использовать одинаковые стили, попробуйте определить для них один и тот же класс. (Многократное использование)
Идентификаторы – если элемент появляется на странице только один раз, попробуйте определить для него идентификаторы , а не задавать один и тот же идентификатор для разных элементов.
Динамические элементы. Динамические эффекты добавляются только тогда, когда это действительно необходимо.
Закодированные символы – при появлении специальных символов обратите внимание на кодировку символов .
Свободно от стилизации — все на странице не имеет ничего общего со стилизацией , и вам даже не нужно указывать, какой стиль вы хотите. Все на странице ограничивается следующими тремя пунктами: необходимые ресурсы сайта, контент, описание.
Комментарии — при просмотре кода в комментарии будет включаться контент, не требующий особого выделения или не особенно очевидный.
Действителен: разметка всего сайта соответствует валидации W3C. Обратите внимание на закрытие тегов, обеспечьте наличие необходимых атрибутов, избегайте устаревших методов и т. д.