Полная инструкция по работе с HTML в Emmet

Ты когда-нибудь вообще использовал Emmet? Мне просто интересно знаком ли ты с ним. Я уверен, что даже если не знаком через 10 минут станешь. Это насколько легкая и полезная тема, что просто нужно пересмотреть как пользоваться ним и просто пользоваться.

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

Да, мои запросы с самого начала были максимально короткие, чаще всего это был один два тега в запрос. Но позже я поставил себе цель уместить как можно больше в запрос, чтобы процесс разработки казался максимально быстрым.

В прошлой статье я рассказал как настроить Sublime text 3 и упомянул об установке Emmet. Грех было не создать инструкцию по работе с Emmet.

Входная информация по работе с Emmet

Как я и говорил, работать с этой штукой реально просто. Для того, чтобы конвертировать строку Emmet в html нужно написать строку и нажать Tab.

Emmet имеет только 12 операторов. Все они простые и логичные, без особых наворотов. Так же что очень хорошо, Emmet можно использовать не только для HTML. Его точно также можно использовать при работе с css.

  1. > —переход на уровень ниже
  2. *— умножает элементы
  3. .  — создает class атрибут
  4. #  — создает id атрибут
  5. []  — можно задавать свои атрибуты
  6. +  — создает соседние элементы на том же уровне
  7. ^  —переход на уровень вверх
  8. $  — заменяется числом увеличивающимся на единицу
  9. $$  — заменяется на двухзначное число
  10. {}  — Можно добавить свой текст в содержание
  11. ()  — группирует элементы
  12. :  — используется для таких элементов как <input>, <a>, <link> и др. Задает для них атрибуты

В теории все выглядит, так, а теперь давайте перейдем к практике, чтобы все стало понятнее.

Использование Emmet: практическая часть

Я долго думал в каком формате подать так, чтобы было понятнее, но в итоге, я решил сделать по этапам. А после составить один большой запрос, в котором мы используем все базовые операторы Emmet.

Делаем переход на нижний уровень в Emmet (>)

<!--html>body>div>ul>li>a-->

<html>
<body>
  <div>
    <ul>
      <li><a href=""></a></li>
    </ul>
  </div>
</body>
</html>

Как видно, мы создаем с корня html, внутри которого body и внутри которого div и т.д. Вполне удобно, к тому же этот оператор используется больше всего.

Используем умножение элементов в Emmet правильно (*)

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

<!-- html>body>div>ul>li*5>a -->

<html>
<body>
  <div>
    <ul>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
    </ul>
  </div>
</body>
</html>

В итоге получилась достаточно красивая ситуация. Чтобы дополнить предудыщий пример достаточно было добавить *5 – тоесть умножить на 5. Так мы получили 5 элементов.

Добавляем классы тегам с помощью Emmet (.)

Пока можем двигаться с предыдущим примером, и добавим нашему div после body класс wrapper, а ну а для основного тега списков дадим класс list.

<!--html>body>.wrapper>ul.list>li*5>a-->
<html>
<body>
  <div class="wrapper">
    <ul class="list">
      <li><a href=""></a></li>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
    </ul>
  </div>
</body>
</html>

Стоит обратить внимание, что из нашей строки я полностью удалил div и вместо этого записал .wrapper, а все потому, что div всегда создается по умолчанию. Допустим, если ты хочешь создать span с классом line, тебе достаточно будет записать span.line, как это было в примере с ul. Но вдруг если ты забудешь уточнить какой тег тебе нужно, то всегда получишь div.

Устанавливаем id атрибут для тегов через Emmet (#)

Как и с классами, тут все аналогично, допустим если мы поставим вместо . следующий знак # мы получим такой пример:

<!--html>body>#wrapper>ul#list>li*5>a-->
<html>
<body>
  <div id="wrapper">
    <ul id="list">
      <li><a href=""></a></li>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
    </ul>
  </div>
</body>
</html>

По факту, вышел очень похожий пример, в сравнении предыдущим, только вместо classмы поставили id.

Проставляем свои атрибуты в Emmet ([])

Ну допустим мы разобрались, как писать html и выводить себе на страницу, но что если нам нужно проставить ссылкам какие-то свои ссылки, либо классы?

Смотрим на строку и результат:

<!--html>body>.wrapper>ul.list[style="display:flex;flex-direction:row;"]>li*5>a[href="https://allfrontend.online"]-->

<html>
<body>
  <div class="wrapper">
    <ul class="list" style="display:flex;flex-direction:row;">
      <li><a href="https://allfrontend.online"></a></li>
      <li><a href="https://allfrontend.online"></a></li>
      <li><a href="https://allfrontend.online"></a></li>
      <li><a href="https://allfrontend.online"></a></li>
      <li><a href="https://allfrontend.online"></a></li>
    </ul>
  </div>
</body>
</html>

Для списков я прописал следующую настройку: [style="display:flex;flex-direction:row;"], а для ссылок такую: [href="https://allfrontend.online"].

К сожалению, если мы используем умножение, мы не можем поставить свое уникальное значение для ссылок в таком случае, который мы сейчас получили. Но никто не мешает нам все это подправить позже после конвертации строки.

Кроме того, в таком случае можно тогда использовать следующий оператор.

Создаем соседние теги в Emmet (+)

Если допустим я хочу прописать каждой ссылке свою уникальную ссылку, а также довить какой-то свой тег, я должен переписать текст следующим образом:

<!--html>(head>title)+(body>.wrapper>ul.list[style="display:flex;flex-direction:row;"]>(li>a[href="/one"])+(li>span+a[href="/two"])+(li>a[href="/three"])+(li>p+a[href="/four"])+(li>p+a[href="/five"]))-->

<html>
<head>
  <title></title>
</head>
<body>
  <div class="wrapper">
    <ul class="list" style="display:flex;flex-direction:row;">
      <li><a href="/one"></a></li>
      <li><span></span><a href="/two"></a></li>
      <li><a href="/three"></a></li>
      <li>
        <p></p>
        <a href="/four"></a>
      </li>
      <li>
        <p></p>
        <a href="/five"></a>
      </li>
    </ul>
  </div>
</body>
</html>

Если ты внимательный, я использовал еще один оператор () помимо добавления соседнего оператора +.

Таким образом мне получилось группировать элементы. Можно добиться точно такой же результат и без () с помощью ^, но это только усложнит все. Кроме того я вижу что строка с каждым примером только растет, что может усложнить для некоторых процесс учебы.

Но я все-таки создам точно такой же пример, с использованием ^ вместо ().

Переход на верхний уровень в Emmet (^)

Как я и говорил, убираем все () и заменяем его на ^, в итоге должен получиться точно такой же код как и в верхнем примере:

<!--html>head>title^+body>.wrapper>ul.list[style="display:flex;flex-direction:row;"]>li>a[href="/one"]^+li>span+a[href="/two"]^+li>a[href="/three"]^+li>p+a[href="/four"]^+li>p+a[href="/five"]-->

<html>
<head>
  <title></title>
</head>
<body>
  <div class="wrapper">
    <ul class="list" style="display:flex;flex-direction:row;">
      <li><a href="/one"></a></li>
      <li><span></span><a href="/two"></a></li>
      <li><a href="/three"></a></li>
      <li>
        <p></p>
        <a href="/four"></a>
      </li>
      <li>
        <p></p>
        <a href="/five"></a>
      </li>
    </ul>
  </div>
</body>
</html>

Как по мне сама строка получилась на несколько знаков легче, но мне кажется ее сложнее понимать, чем предыдущий пример где мы использовали (), но результат такой же.

Создаем нумерованный список в Emmet с помощью ($) и ($$)

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

<!--div>p{ $. point $$}*10-->

<div>
  <p> 1. point 01</p>
  <p> 2. point 02</p>
  <p> 3. point 03</p>
  <p> 4. point 04</p>
  <p> 5. point 05</p>
  <p> 6. point 06</p>
  <p> 7. point 07</p>
  <p> 8. point 08</p>
  <p> 9. point 09</p>
  <p> 10. point 10</p>
</div>

С помощью такой маленькой строчки мне получилось получить вполне себе такой осмысленный список из десяти строк. Кроме того, если заметно, я использовал дополнительный оператор {}.

Создание атрибутов через двоеточие в Emmet (:)

<!--html:5-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  
</body>
</html>


<!--a:link-->
<a href="http://"></a>

<!--a:mail-->
<a href="mailto:"></a>

<!--link:css-->
<link rel="stylesheet" href="style.css" />

<!--link:favicon-->
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

<!--link:rss-->
<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml" />

<!--meta:utf-->
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

<!--meta:win-->
<meta http-equiv="Content-Type" content="text/html;charset=windows-1251" />

<!--meta:vp-->
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />

<!--meta:compat -->
<meta http-equiv="X-UA-Compatible" content="IE=7" />

<!--script:src-->
<script src=""></script>

<!--img:srcset, img:s-->
<img srcset="" src="" alt="" />

<!--img:sizes, img:z-->
<img sizes="" srcset="" src="" alt="" />

<!--input:text, input:t-->
<input type="text" name="" id="" />

<!--input:search-->
<input type="search" name="" id="" />

<!--input:email-->
<input type="email" name="" id="" />

<!--input:url-->
<input type="url" name="" id="" />

<!--input:password, input:p-->
<input type="password" name="" id="" /> 

<!--input:datetime-->
<input type="datetime" name="" id="" />

<!--input:date-->
<input type="date" name="" id="" />

<!--input:time-->
<input type="time" name="" id="" />

<!--input:tel-->
<input type="tel" name="" id="" />

<!--input:number-->
<input type="number" name="" id="" />

<!--input:color-->
<input type="color" name="" id="" />

<!--input:checkbox, input:c-->
<input type="checkbox" name="" id="" />

<!--input:radio, input:r-->
<input type="radio" name="" id="" />

<!--input:range-->
<input type="range" name="" id="" />

<!--input:file, input:f-->
<input type="file" name="" id="" /> 

<!--input:submit, input:s-->
<input type="submit" value="" />

<!--input:image, input:i-->
<input type="image" src="" alt="" />

<!--input:button, input:b-->
 <input type="button" value="" />

<!--input:reset-->
<input type="reset" value="" />

<!--select:disabled, select:d-->
<select name="" id="" disabled="disabled"></select>

<!--menu:context, menu:c-->
<menu type="context"></menu>

<!--menu:toolbar, menu:t-->
<menu type="toolbar"></menu>

<!--html:xml-->
<html xmlns="http://www.w3.org/1999/xhtml"></html>

<!--button:submit, button:s, btn:s-->
<button type="submit"></button>

<!--button:reset, button:r, btn:r-->
<button type="reset"></button>

<!--button:disabled, button:d, btn:d-->
<button disabled="disabled"></button>

Интересно правда? Столько всего, но это не все сокращения – я привел их в пример чтобы стало понятно, как это использовать. Но так как мы можем использовать такие вещи не так часто, как примеры выше – можешь просто скопировать и использовать.

Кстати, это еще не все – есть еще дополнительные сокращения, способные дополнительно ускорить процесс разработки.

Дополнительные сокращения в Emmet

Большая часть этих тегов работает следующим образом – если у тегов должны быть дочерние элементы, то создать в полной мере их можно знаком + на конце строки.

Это не совсем тоже самое, как тот знак + с которым мы создавали соседние элементы, но логика проглядывается.

<!-- ol+ -->
<ol>
  <li></li>
</ol>

<!-- ul+ -->
<ul>
  <li></li>
</ul>

<!-- dl+ -->
<dl>
  <dt></dt>
  <dd></dd>
</dl>

<!-- map+ -->
<map name="">
  <area shape="" coords="" href="" alt="">
</map>

<!-- table+ -->
<table>
  <tr>
    <td></td>
  </tr>
</table>

<!-- tr+ -->
<tr>
  <td></td>
</tr>

<!-- select+ -->
<select name="" id="">
  <option value=""></option>
</select>

<!-- colgroup+, colg+ -->
<colgroup>
  <col>
</colgroup>

<!-- optgroup+, optg+ -->
<optgroup>
  <option value=""></option>
</optgroup>

<!-- pic+ -->
<picture>
  <source srcset="">
  <img src="" alt="">
</picture>

Как вставлять текст в Emmet для примера?

Я вверху показывал несколько способов, но я четко понимаю, что уделил этому недостаточно внимания.

<!--.wrapper>h1{My sweet header}+p*3>lorem5-->

<div class="wrapper">
  <h1>My sweet header</h1>
  <p>Lorem ipsum dolor sit amet.</p>
  <p>Est reiciendis, temporibus nam nesciunt?</p>
  <p>Cupiditate assumenda aspernatur culpa quas!</p>
</div>

Как по мне, очень удобно, что рыба текст дублируется, как бы продолжается с новой строки, для того чтобы было заметно разницу.

Подведу итог по Emmet

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

Лично я соглашусь с тем, что таких инструкций как моя в интернете много, но структуру я создавал по себе. Все потому, что мне бы так было учить намного проще, в сравнении с тем, что я видел в интернете.

Тебе понравилась эта инструкция по работе с html в Emmet? Не забудь сохранить себе ее в закладки и поставить лайк.

Оставьте комментарий