Гайд по Emmet
Emmet - довольно классный инструмент, который помогает вам писать HTML очень и очень быстро. Это похоже на волшебство. Emmet - это не что-то новое, он существует уже много лет, и для каждого редактора есть плагин.
Всем, кто только начинает осваиваться в программирование эта статья точно пойдет на пользу!
В VS Code Emmet интегрирован "из коробки", и всякий раз, когда редактор распознает возможную команду Emmet, он покажет вам всплывающую подсказку.
Если то, что вы пишете, не имеет других интерпретаций, и VS Code считает, что это должно быть выражение Emmet, то оно будет показано непосредственно во всплывающей подсказке, достаточно красиво:
Тем не менее, я действительно не знала, как использовать его во всех его тонкостях, пока не начала исследовать и писать об этом)
Я хочу использовать его в своей повседневной работе, поэтому вот что я узнала:
Создайте HTML-файл с нуля
Напечатайте ! и вы получите базовый шаблон HTML для работы:
> и +
Вы можете комбинировать их для выполнения более сложных разметок:
Level up
Используя ^ вы можете повысить уровень обратно с любого момента, когда вы использовали > для создания дочернего:
Вы можете использовать его несколько раз:
Применяем умножение
Любой тег может быть добавлен несколько раз с помощью *:
Группировка выражений
С умножением все начинает становиться немного сложнее. Что делать, если вы хотите умножить 2 элемента? Вы группируете их в круглые скобки ( ):
Атрибуты id и class
id и class, вероятно, являются наиболее часто используемыми атрибутами в HTML.
Вы можете создать фрагмент HTML, который включает их, используя синтаксис, подобный CSS:
Вы можете добавить несколько классов:
Добавление уникального class или id
id должен быть уникальным на вашей странице в любое время.
class может быть повторен, но иногда вам нужен инкрементный класс для ваших элементов.
Вы можете сделать это с помощью $:
Другие атрибуты
Атрибуты, отличные от class и id, должны быть добавлены с помощью скобок []:
Вы можете добавить сразу несколько атрибутов:
Добавление контента
Конечно, вы также можете заполнить HTML-элементы содержимым:
Добавление инкрементного числа в разметку
Число обычно начинается с 1, но вы можете заставить его начинаться с произвольного числа:
Теги для заголовка страницы
Общие теги
Семантические теги
Теги для форм
На этом сегодня все, надеюсь эта статья поможет вам вывести скорость разработки на новый уровень 🔥
Не забывайте подписываться на телеграм канал!