Научиться быстро и правильно писать html код и doctype html страницы нам поможет текстовый редактор Notepad++ и плагин Emmet (муравей). С помощью специальных команд и операторов плагин позволяет записать html код в коротенькую строчку, буквально в несколько символов. А затем одним кликом по горячим клавишам позволяет развернуть его в полном обьеме.  

Первое, что нужно иметь в виду, при развертывании сокращенного кода, это перед нажатием горячих клавиш плагина необходимо убедиться в том, что курсор стоит  в конце кода справа. Если он будет стоять  внутри или вначале кода, плагин не поймет, что от него хотят. Если результат Вас не устраивает, не спешите удалять полученный html код. Достаточно нажать сочетание клавиш Ctrl + Z и html код свернется. Его можно исправить и опять нажать горячие клавиши муравья.

Для создания шаблона html документа у Emmet есть четыре команды:

html:4s – эта команда создаст шаблон версии html 4 strict doctype.

! или htm:5 – одна из этих команд создаст шаблон html 5.

html:xt – будет создан шаблон версии xhtml transitional doctype.

Для быстрого написания html кода в Notepad++ плагин Emmet имеет в своем арсенале несколько операторов. Для простого ввода любого тега, достаточно ввести его имя. Например, тег заголовка h3. В результате получим: <h3></h3>.

Если Вы хотите сразу написать и сам заголовок внутри тега, то его достаточно заключить в фигурные скобки h3{Как работает Emmet} результат будет таким: <h3>Как работает Emmet</h3>. Фигурные скобки {} позволяют вставить внутрь тега любую информацию.

Оператор > позволяет вложить один html тег в другой. Например, сокращенный код вида: p{Установить Emmet можно}>a{здесь.} даст такой результат: <p>Установить Emmet можно<a href="">здесь</a></p>. В данном случае, ссылка находится внутри параграфа.

Оператор ^ позволяет поднять значение тега на порядок выше. Например, если написать такой код: html>head>title^body, то это говорит о том, что тег body на порядок выше тега title и равнозначен тегу head. Результат будет таким:

cod1

Оператор + позволяет добавлять в код теги одного уровня вложенности. Например, код вида: html>head+body>p+div+p+ul>li  даст следующий результат:

cod2

Из кода видно что теги head и body равнозначны и имеют одного родителя, тег html. Тег body является родителем для тегов p, div, и ul. Поэтому эти теги и объединяются оператором  (+). Оператор * работает как знак умножения. Он увеличивает количество тегов в n раз. Код вида: p*3 даст следующий результат:

cod3

Или чуть сложнее ul>li*3>a{Событие}. В итоге мы получим следующий результат:

cod4

Мы поучили список из трех пунктов с вложенными ссылками. Если применить еще один оператор $, то ссылки на события можно и пронумеровать. ul>il*3>a{Событие $}. Результат будет таков:

cod5

Два оператора $$ пронумеруют события  01,02,03.  Три $$$ - 001,002,003 и тд.

Следующие операторы добавляют в код соответственно (#) – атрибут id и (.) – атрибут class. Допустим, если мы захоти все три пункта списка раскрасить в разные цвета, а всему списку придать какие то особые свойства, тогда нам придется тегу ul присвоить идентификатор class, а тегам li, идентификатор id. Сокращенный код примет такой вид: ul.>li#*3>a{Событие $}, а итог будет таков:

cod7

Нам останется только подставить значение id и class. Осталось еще два оператора, которые использует Emmet  при работе с html кодом.  Это круглые и квадратные скобки. Круглые скобки применятся для группировки html тегов, к которым применяется, какой то оператор.  Если пред идущий код написать таким образом, ul#>(li.*3)>a{Событие $}, то развернутый код будет таким:

cod8

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

Для удаления тега ставим курсор внутри тега, не важно какого, открывающего или закрывающего. Затем заходим в меню Плагины – Emmet и выбираем команду Remove tag. Кликаем по ней, оба тега будут удалены. Эта команда не имеет горячих клавиш. Если есть необходимость, их можно установить. Как это сделать смотрите здесь.

Часто бывает так, что код уже написан, а нам необходимо какой то участок кода или текста обернуть в другой тег. Например, выделить жирным, курсивом, сделать ссылкой или поместить в контейнер div. Для этого выделяем этот участок кода и опять в меню Плагины –Emmet находим команду Wrap with abbreviation и кликаем по ней левой кнопкой мыши. Появится окно этой команды. В поле ввода вводим тег, или несколько тегов, в которые мы хотим обернуть наш код и кликаем Enter.

По умолчанию у этой команды есть горячие клавиши, но они не работают по той же причине, что и горячие клавиши Emmet. Как это исправить читайте в статье Notepad++ и emmet.

P. S.  Команд и операторов сокращения кода у муравья совсем немного. Запомнить их не составляет никакого труда. А скорость написания html кода Вы сможете увеличить в разы. Если Вы уже знаете html теги, и у вас нет необходимости, в целях их запоминания, писать код вручную, экономьте свое время. Его всегда не хватает.

Удачи Вам.

рассказать друзьям и получить подарок