Пишите HTML-код быстрее

Современные веб-сайты требуют много HTML-кода. Сложные макеты с несколькими различными представлениями и состояниями могут быть трудны для создания с помощью простого текстового редактора. К счастью, существует множество инструментов для генерации HTML, с которыми можно работать. Здесь мы кратко рассмотрим два наиболее популярных инструмента – Emmet и Pug.

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

Генерация HTML на лету

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

    ,
  • а также все теги открываются и закрываются в нужном месте. В противном случае ссылки могут не работать, и весь макет страницы станет совершенно бесполезным.

    - Пишите HTML-код быстрее

    Ускорьте свой рабочий процесс HTML и CSS с Emmet (Изображение предоставлено emmet.io)

    Как использовать Эммет

    Чтобы уменьшить вероятность этого, вы можете использовать таланты Эммет. Это инструмент, который сэкономит вам много текста и значительно улучшит ваш рабочий процесс HTML и CSS. Emmet позволяет создавать элементы, печатая CSS-подобный селектор. Затем он проанализирует и расширит этот элемент в обычный HTML. Ниже представлен оригинальный элемент, созданный в Emmet.

    nav>ul>li*3>a.chapter{Chapter $ of 3}

    Emmet обнаружит этот элемент, проанализирует его и затем преобразует элемент в стандартный HTML, как показано ниже. Беглый взгляд на элемент Emmet показывает, что

  • умножается на (* 3) и каждый
  • Экземпляр будет называться Глава, за которым следует соответствующий номер (до 3).Обратите внимание, сколько символов содержит элемент Emmet и сколько содержит стандартный HTML. Даже этот небольшой фрагмент кода демонстрирует, сколько времени можно сэкономить, используя сокращение Emmet.

    Эммет также знает о контексте. Например, если мы редактируем

    скорее всего, мы захотим(это строки) элементы для его заполнения. Все, что нам нужно сделать, это указать, сколько нам нужно.Это всего лишь быстрый пример того, что может сделать Emmet, но доступно гораздо больше вариантов конфигурации. К ним относятся редактирование CSS, создание класса BEM (Block Element Modifier) ​​и даже есть генератор Lorem Ipsum. Используйте мопса для динамического контентаШаг вперед Мопс. Это шаблонный инструмент для HTML. Вы можете писать страницы в формате «.pug», и Pug будет читать этот файл, вставлять в него динамические данные и возвращать стандартный HTML. В следующем примере показано, как написать код на Pug для создания того же HTML-кода, что и в примере с Emmet (выше).Файл Pug использует только отступ для обозначения вложенности. Он может перебирать значения для генерации большого количества HTML за один проход. Эти файлы «.pug» предназначены для многократного использования в проекте.

 

  • ul each val in (1, 2, 3) li a(href=””, class=”chapter”) Chapter #{val} of 3
  • Хотя Emmet идеально подходит для статического контента, что произойдет, если контент должен быть более динамичным? Например, нам может потребоваться создать персонализированные домашние страницы, сложные таблицы заказов или повторить общие блоки HTML. Это все возможно в JavaScript, но, предварительно выполнив рендеринг этого контента, мы можем получить дополнительное повышение скорости, не полагаясь на браузер пользователя.
  • Стоит также отметить, что большинство редакторов кода либо имеют встроенный Emmet, либо поддерживают его через плагины. Вы можете узнать больше об этом на странице документации Emmet.
Do NOT follow this link or you will be banned from the site!
WeCreativez WhatsApp Support
Наша служба поддержки клиентов готова ответить на ваши вопросы.
Привет, чем я могу помочь?