Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

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

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

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

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

5 <blockquote>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{Заказать}

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

7 <ol><li>В самом конце набора строкиVisual Studio Codeсам вам предложит ее преобразовать. Вам нужно только нажатьEnter, когда на экране есть всплывающая подсказка.</li>

8 <li>Выделить всю строку и нажать комбинацию клавиш Ctrl + Shift + P. Во всплывающем окне начать набирать>Emmet: Expand Abbreviationи выбрать этот пункт.</li>

9 </ol>189 символов против 877. Серьезный результат. И это различие будет только расти по мере того, насколько большую верстку вы хотите сделать. Вполне нормально, если полтысячи символов, с помощьюEmmet, создадут вам структуру целой страницы.Emmet- мощный инструмент, который позволяет ускорить разметку HTML-кода. Плагин позволяет снять бóльшую часть рутинных действий, от которых хочется спать. Пройдемся с самого начала строки и разберем все, что здесь происходит:

10 <ul><li>section.cards - очень похоже на CSS-селектор, и именно так и стоит на него смотреть. Мы хотим создать элемент <section> с классом cards.</li>

11 <li>> - символ, как и в CSS, указывает на вложенность. В текущем значении запись section.cards> означает, что все, что указано далее, будет располагаться внутри секции с классом cards.</li>

12 <li>article.card - создаем элемент <article> с классом card.</li>

13 <li>div.card-title - создаем блочный элемент с классом card-title. Здесь есть хитрость: чтобы создать элемент <div>, не обязательно его указывать напрямую. Если не указан тег перед классом, тоEmmetпо умолчанию создаст элемент <div>. То есть вместо div.card-title можно было указать .card-title.</li>

14 <li>{Название товара} - в фигурных скобках указывается простой текст, который будет помещен внутрь блока.</li>

15 <li>+ - символ сложения означает, что правую часть необходимо расположитьрядомс левой, а не внутри нее, как в случае с символом >. Мы хотим расположить картинку рядом с блоком card-title, а не внутри.</li>

16 <li>img[src="/images/card-item-1.png"][alt="Товар-1"] - создаем элемент <img>. В квадратных скобках указываются атрибуты, которые мы хотим добавить. В данном случае это атрибут src, значением которого является путь до изображения, а второй атрибут alt отвечает за мета-информацию о нашей картинке. Атрибуты можно записывать как по отдельности, так и вместе. Если мы укажем вот такую запись img[src="/images/card-item-1.png" alt="Товар-1"], то результат останется тем же.</li>

17 <li>() - скобки позволяют группировать информацию. В данном случае мы хотим, чтобы все, что внутри скобок, располагалось рядом с картинкой, созданной в прошлом пункте.</li>

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

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

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

21 table>tr*3>td*3

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

23 header+main+footer

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

25 div.item-$*3

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

27 <ul><li>Если использовать несколько идущих подряд символов $, то столько разрядов в счетчике и будет. Например, div.item-$$$*3 начнет счетчик не просто с нуля, а с двух нулей. Первым элементом в таком случае станет <div class="item-001"></div>.</li>

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

29 </ul>Счетчик можно использовать внутри конструкции {}:

30 div.item{Работа номер $}*3

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