Всякий раз, когда я посещаю красивый веб-сайт, я не могу не взглянуть на исходный код. Это как иметь рентгеновские очки и видеть кого угодно, даже через фиговый листок. Это просто само собой разумеющееся! Мне не терпится узнать, написан ли этот красивый веб-сайт с таким же красивым кодом или это просто красота в красоте. Код? Красота? конечно! В конце концов, код похож на поэзию. (Перевод: «Код — это поэзия» — это слоган знаменитой системы блогов WordPress .) Это всего лишь самый простой HTML. Он, естественно, не такой сложный и элегантный, как другие динамические языки, но он по-прежнему сохраняет искусство, заложенное его создателем. . мазки кисти.
Это заставило меня задуматься, как сделать код красивым? В HTML это вся ручная работа. Давайте посмотрим, как языки разметки могут достичь состояния красоты.
Изображение достаточно большое (2000x2000), чтобы вы могли его распечатать, повесить в свой личный шкафчик и произвести впечатление на друзей. Однако это действительно сбивающий с толку размер. Я выложу исходное PSD-изображение, чтобы каждый мог его изменить.
HTML5. HTML5 и его новые элементы привносят беспрецедентную красоту.
DOCTYPE — HTML5 имеет лучший тип документа .
Отступы. Табуляция и пробелы используются для отступов кода, чтобы правильно показать отношения «родитель-потомок» между тегами и подчеркнуть иерархическую структуру.
Кодировка — объявление кодировки должно быть сделано в заголовке перед всем содержимым.
Название. Название сайта простое и понятное. Начните с описания функции страницы после разделителя и закончите названием сайта.
CSS — использует только простую таблицу стилей (типы мультимедиа объявлены в таблице стилей) и ориентирован только на хорошие браузеры. IE6 и более ранние версии получат общую таблицу стилей.
Тело. Присвоив телу идентификатор, вы можете стилизовать его уникальным образом для разных страниц без необходимости дополнительной разметки.
JavaScript — jQuery (самая красивая библиотека сценариев JavaScript ) вызывается из Google. Загружается только один файл JavaScript. Ссылка на каждый сценарий указана внизу страницы.
Путь к файлу. Для повышения эффективности используйте относительные пути к ресурсам сайта. С точки зрения адаптации к перепечатке файлы содержимого (например, изображения) используют абсолютные пути.
Атрибуты изображения. Изображение содержит альтернативный текст, в основном на тот случай, если изображение отсутствует, но его также можно использовать для проверки. Чтобы повысить эффективность рендеринга, лучше всего указать ширину и высоту изображения.
Сначала основной контент. Основной контент страницы должен идти после базовой разметки и навигации и перед любым вспомогательным контентом (например, боковыми панелями).
Соответствующие описательные элементы блочного уровня — ЗАГОЛОВОК, НАВИГАЦИЯ, РАЗДЕЛ, СТАТЬЯ, СТОРОНА... Эти новые « разделы описания » будут описывать контент лучше, чем предыдущий DIV.
Иерархия. Использование заглавных букв в тегах заголовков поможет и будет следовать четкой « иерархии ».
Соответствующие описательные теги. В зависимости от потребностей список помечается как: несортированный, отсортированный и пользовательские списки, которые обычно не используются.
Включенный общий контент. Один и тот же контент, который появляется на разных страницах, лучше всего включать в страницу со стороны сервера. (Любым методом, языком, CMS, любым удобным для вас способом.)
Семантические классы. Вам необходимо не только настроить правильные имена элементов, но также необходимо семантически именовать классы и идентификаторы: они могут служить описанием даже без конкретных инструкций. (например, «col» лучше, чем «left»)
Классы. Если нескольким элементам необходимо использовать одинаковые стили, попробуйте определить для них один и тот же класс. (Многоразовое использование)
Идентификаторы. Если элемент появляется на странице только один раз, попробуйте определить для него идентификаторы и не задавайте один и тот же идентификатор для разных элементов.
Динамические элементы. Динамические эффекты добавляются только тогда, когда это действительно необходимо.
Закодированные символы. При появлении специальных символов обратите внимание на кодировку символов .
Свободно от стилизации — все на странице не имеет ничего общего со стилизацией , и вам даже не нужно указывать, какой стиль вы хотите. Все на странице ограничивается следующими тремя пунктами: необходимые ресурсы сайта, контент, описание.
Комментарии — при просмотре кода в комментарии будет включаться контент, не требующий особого выделения или не особенно очевидный.
Действителен: разметка всего сайта соответствует валидации W3C. Обратите внимание на закрытие тегов, обеспечьте наличие необходимых атрибутов, избегайте устаревших методов и т. д.
Исходный текст: http://css-tricks.com/what-beautiful-html-code-looks-like/
Перевод: http://horans.cn/what-beautiful-html-code-looks-like/