Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос нашим менторам. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете

Emmet

Если вы работаете с редактором Visual Studio Code, то плагин Emmet уже установлен в редакторе. В прошлом уроке вы так же могли увидеть его работу при создании базовой структуры HTML документа. Если вы пользуетесь другим редактором, то можете установить Emmet с помощью любой доступной инструкции. Этот плагин настолько популярен, что при желании, наверное, можно найти инструкцию по его установке на кофемолку.

Что же такое Emmet и зачем он нужен? Попробуем разметить воображаемую карточку товара интернет магазина. Что нам может понадобиться? Обрамляющий блок, название товара, его картинка, блок с ценой, кнопка купить. Вроде не так много. Добавим карточку и расположим её внутри секции с классом cards. Попробуем это преобразовать в HTML. Мы получим примерно следующую структуру:

<section class="cards">
    <article class="card">
        <div class="card-title">Название товара</div>
        <img src="/images/card-item-1.png" alt="Товар-1">
        <div class="card-price"><span class="price-sum">24 000</span><span class="price-cur">руб.</span></div>
        <button>Заказать</button>
    </article>
</section>

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

На самом деле этот пример был свёрcтан всего одной строкой. Изначально она вас может напугать, но к концу урока вы поймёте каждый символ, который был указан. Строка выглядит следующим образом:

section.cards>article.card>div.card-title{Название товара}+img[src="/images/card-item-1.png"][alt="Товар-1"]+(.card-price>span.price-sum{24 000}+span.price-cur{руб.})+button{Заказать}.

Вот здесь и вступает роль плагина Emmet. Он берёт эту строку и преобразует её в HTML, который вы видели выше. Что бы плагин преобразовал строку в HTML можно пойти одним из двух путей:

  1. В самом конце набора строки Visual Studio Code сам вам предложит её преобразовать. Вам нужно только нажать Enter когда на экране есть всплывающая подсказка. Преобразование строки в HTML
  2. Выделить всю строку и нажать комбинацию клавиш Ctrl + Shift + P. В сплывающем окне начать набирать >Emmet: Expand Abbreviation и выбрать этот пункт. Преобразование строки в HTML

Emmet

189 символов против 335. Серьёзный результат. И это различие будет только расти по мере того, насколько большую вёрстку вы хотите сделать. Вполне нормально, если полтысячи символов, с помощью Emmet, создадут вам структуру целой страницы. Emmet — мощный инструмент, который позволяет ускорить разметки HTML кода. Плагин позволяет снять бОльшую часть рутинных действий, от которых хочется спать. Пройдёмся с самого начала строки и разберём всё, что здесь происходит:

  • section.cards — очень похоже на CSS селектор, и именно так и стоит на него смотреть. Мы хотим создать элемент section с классом cards.
  • > — символ, как и в CSS, указывает на вложенность. В текущем значении запись section.cards> означает, что всё, что указано далее будет располагаться внутри секции с классом cards.
  • article.card — Создаём элемент article с классом card.
  • div.card-title — Создаём блочный элемент с классом card-title. Здесь есть хитрость: чтобы создать элемент div не обязательно его указывать напрямую. Если не указан тег перед классом, то Emmet по умолчанию создаст элемент div. То есть вместо div.card-title можно было указать .card-title.
  • {Название товара} — в фигурных скобках указывается простой текст, который будет помещён внутрь блока.
  • + — символ сложения означает, что правую необходимо расположить рядом с левой частью, а не внутри неё, как в случае с символом >. Мы хотим расположить картинку рядом с блоком .card-title, а не внутри.
  • img[src="/images/card-item-1.png"][alt="Товар-1"] — Создаём элемент img. В квадратных скобках указываются атрибуты, которые мы хотим добавить. В данном случае это атрибут src, значением которого является путь до изображения, а второй атрибут alt отвечает за мета-информацию (для роботов) о нашей картинке. Атрибуты можно записывать как по отдельности, так и вместе. Если мы укажем вот такую запись img[src="/images/card-item-1.png" alt="Товар-1"], то результат останется тем же.
  • () — скобки позволяют группировать информацию. В данном случае мы хотим, что бы всё, что внутри скобок располагалось рядом с картинкой, созданной на прошлом пункте.

Всё, что происходит дальше вы уже знаете на основе предыдущих пунктов. Как вы видите, Emmet достаточно интересный инструмент. И не настолько сложный, как может показаться с самого начала. Вот ещё несколько примеров разных строк и результатов преобразования с помощью Emmet:


header>.logo+nav>ul>li*3

<header>
  <div class="logo"></div>
  <nav>
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </nav>
</header>

Обратите внимание на конструкцию *3 — это в прямом смысле умножение. Мы хотим взять элемент и разметить его три раза.

Emmet


table>tr*3>td*3

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

Никогда ещё создание таблиц не было таким простым делом :)


header+main+footer

<header></header>
<main></main>
<footer></footer>

А вот и простой способ добавить основные теги в вашу страницу.


div.item-$*3

<div class="item-1"></div>
<div class="item-2"></div>
<div class="item-3"></div>

Символ $ в Emmet является счётчиком. При разворачивании такой строчки все символы $ заменяются на числа от 1 с шагом единица. Есть несколько дополнительных конструкций, которые позволяют расширить данный счётчик:

  • Если использовать несколько подряд идущих символов $, то столько разрядов в счётчике и будет. Например div.item-$$$*3 начнёт счётчик не с просто нуля, а с трёх нулей. Первым элементов в таком случае станет <div class="item-001"></div>.
  • Счётчик можно начать с любого произвольного числа. Для этого используется символ @, после которого идёт начальное число. Например div.item-$@5*3 начнёт счётчик с числа пять. Первым элементом станет <div class="item-5"></div>.

Это базовые вещи, которые помогут вам сократить время написания разметки. Emmet куда более мощный инструмент, но этих возможностей вам хватит надолго. Помимо этого он умеет работать с CSS. Там он больше нужен для выписывания сокращений. Вы можете попробовать создать любой CSS файл и начать набирать свойства. Всё, что предложит вам Visual Studio Code и работает с Emmet.

Дополнительное задание

Попробуйте воспроизвести следующую вёрстку с помощью Emmet. Ваша задача из уже готовой вёрстки сделать строку, как в случае с карточкой товара из этого урока.

<main>
    <h1>Emmet</h1>
    <ul>
        <li>Быстрый</li>
        <li>Удобный</li>
        <li>Нескучные обои</li>
    </ul>
    <p>Emmet помогает мне писать вёрстку быстрее</p>
    <p>Emmet помогает мне писать вёрстку быстрее</p>
    <p>Emmet помогает мне писать вёрстку быстрее</p>
    <p>Emmet помогает мне писать вёрстку быстрее</p>
    <p>Emmet помогает мне писать вёрстку быстрее</p>
    <p>Emmet помогает мне писать вёрстку быстрее</p>
    <p>Emmet помогает мне писать вёрстку быстрее</p>
    <p>Emmet помогает мне писать вёрстку быстрее</p>
    <p>Emmet помогает мне писать вёрстку быстрее</p>
    <p>Emmet помогает мне писать вёрстку быстрее</p>
</main>

<span class="translation_missing" title="translation missing: ru.web.courses.lessons.mentors.mentor_avatars">Mentor Avatars</span>

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят менторы из команды Хекслета или другие студенты.

Зарегистрироваться

или войти в аккаунт

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 115 курсов, 2000+ часов теории
  • 800 практических заданий в браузере
  • 250 000 студентов

Нажимая кнопку «Зарегистрироваться», вы даёте своё согласие на обработку персональных данных в соответствии с «Политикой конфиденциальности» и соглашаетесь с «Условиями оказания услуг».

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Rambler
Логотип компании Bookmate
Логотип компании Botmother

Есть вопрос или хотите участвовать в обсуждении?

Зарегистрируйтесь или войдите в свой аккаунт

Нажимая кнопку «Зарегистрироваться», вы даёте своё согласие на обработку персональных данных в соответствии с «Политикой конфиденциальности» и соглашаетесь с «Условиями оказания услуг».