Emmet html: Справочник EMMET сокращений для ускорения верстки

Содержание

Как писать HTML и CSS быстро: emmet | by Дима Безуглый

Как это работает: пишем комбинацию, жмем Tab и код раскрывается в HTML.

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

Повторим алгоритм: пишем комбинацию, жмем `Tab` и код раскрывается в HTML.

Див или любой другой тег

Пишем тег и раскрываем:

Тег с классом

Чтобы написать класс, поставьте перед названием точку, прям как в CSS. Если написать класс без тега .my-class, то комбинация раскроется в <div class=”my-class”></div>

Вложить тег в тег

Чтобы записать код внутри тега, поставьте знак >

Теги друг за другом

Чтобы расположить теги друг за другом, поставьте знак +

Несколько одинаковых тегов

Поставьте знак *, чтобы размножить теги:

Текст в теге

Оберните текст в фигурные скобки, чтобы он раскрылся внутри тега:

Рыбный текст

Если не хотите придумывать текст, ставьте шаблонный. Комбинация lorem раскрывает абзац текста. Если дописать цифру lorem2, то раскроется то количество слов, которое вы указали:

Этого хватит для большинства случаев, остальное в документации.

Алгоритм такой же: пишем комбинацию, жмем `Tab` и получаем CSS.

Свойства

Просто вводите первые буквы свойств:

fw → font-wegth,
fz → font-size,
fs → font-style,
w → width,
h → height.

Свойства и значения

Можно вводить свойства сразу со значениями:

df → display: flex,
dib → display: inline-block
w15 → width: 15px,
p12 → padding: 12px.

Если не хотите пиксели, дописывайте единицу измерения — fz2em → font-size: 2em.

Множественные значения

Чтобы проставить значения подряд, пишите через дефис: p10–12–15.

Sublime Text 3
Brackets
Atom
В Visual Code эммет встроен по умолчанию
В WebStorm эммет встроен по умолчанию
Остальные редакторы смотрите в списке

Эммет помогает писать быстро, но все комбинации сразу не запомнить. Поначалу пользуйтесь шпаргалкой, постепенно запомните.

Как настроить аббревиатуру Emmet для doc для настраиваемого шаблона html?

Я использую Emmet с Sublime Text 2 и пытаюсь настроить аббревиатуру doc определенным образом. Вот документация Эммета .

Эммет doc может быть инициирован расширением символа ! при запуске новой страницы html5 с нуля. Ниже приведен вывод Эммета по умолчанию при расширении символа ! :

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

</body>
</html>

Я пытаюсь настроить doc так, чтобы его вывод был:

<!DOCTYPE html>
<html lang="en">

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">

<header>

</header>

<footer>

</footer>

<script src="js/"></script>

Мой файл snippets.json пытается получить желаемый результат следующим образом:

{
    "html": {
        "abbreviations": {
            "doc": "(html+meta[charset=UTF-8]+title{${1:Document}}+meta:vp+link:css)>header+footer+script:src"
        }//abbreviations
    }//html
}//root

Но выход ужасен, вот так:

<!doctype html>
<html lang="en"></html>
<meta charset="UTF-8" lang="en">
<title lang="en">Document</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" lang="en">
<link rel="stylesheet" href="style.css" lang="en">
<header lang="en"></header>
<footer lang="en"></footer>
<script src="" lang="en"></script>

Мои вопросы таковы:

как вообще удалить </html> ?
как удалить все атрибуты lang="en" после тега <html> ?
как изменить путь стиля по умолчанию на css/style.css ?
как сохранить пустое пространство, как показано в моем желаемом результате выше?

html

boilerplate

emmet

Поделиться

Источник

Brian Zelip

15 ноября 2013 в 19:54

3 ответа

Игнорируйте команды Emmet в файлах, отличных от html и css
Можно ли настроить пакет Emmet для Sublime Text 3 таким образом, чтобы он игнорировал все ярлыки в файлах, отличных от HTML и CSS ? Я люблю работать с Эмметом, используя tab в файлах HTML и CSS, но я мог бы использовать tab для чего-то другого, например, при работе с python.
Как я могу добавить свою личную аббревиатуру в emmet-mode в Emacs?
Я использую emmet-mode в Emacs24. Я хочу расширить php до <?php ?> , но Эммет не поддерживает аббревиатуру php. Я думал, что если я вставлю строку (puthash php <?php ?>; tbl) между каким-то другим addreviation, но это не сработает. Прежде всего я не хочу писать прямо emmet-mode.el ….

Чтобы получить базовый шаблон HTML5

Убедитесь, что в текстовом редакторе установлены плагины Emmet packages/ (например, Atom или скобки)

Вам нужно знать, каковы ваши ключи ‘expands abbreviation’:

1) Убедитесь, что в вашем текстовом редакторе установлено значение HTML. Редактирование, скажем, в усах hbs не будет работать, поэтому вы можете использовать файл scratchpad html для создания шаблона на первом

2) Сначала введите ! , затем ‘expands abbreviation’ ключ(ы)

3) Если Видовой экран не создан

вставьте «видовой экран» с помощью meta:vp, а затем ‘expands abbreviation’ клавиш(ов)
удалите ‘user-scalable=no’ и минимальный масштаб максимальный масштаб, чтобы выглядеть как Googles <meta name=viewport content="width=device-width, initial-scale=1">

4) Чтобы вставить стиль и другие ссылки с link:css, а затем ‘expands abbreviation’ ключ(ы)

Это немного ‘simple simon’, но это работает для меня.

Примечание: вы всегда можете изменить настройки ключа(ключей) then ‘expands abbreviation’ в настройках плагина Emmet

Поделиться

Tomdom

09 октября 2015 в 10:03

Вы не должны удалять тег </html> , вам нужно написать правильную аббревиатуру. Что-то вроде этого: html>(head>meta[charset=UTF-8]+title{${1:Document}})+body>header+footer+script[src="js/"]
См. выше
Переопределите аббревиатуру link:css или просто используйте link[href="..."]
Используйте {$nl}

Поделиться

Sergey Chikuyonok

16 ноября 2013 в 20:47

Я не тестировал его, но вы пробовали добавлять в разделы escape-коды, такие как tab \t , чтобы исправить форматирование вывода?

Поделиться

knice

10 ноября 2015 в 15:55

Используйте артефакт Emmet для быстрого написания HTML-кода в VsCode

1. Краткое знакомство с Эмметом

Emmet (ранее известный как Zen Coding) — это инструмент, который может значительно повысить эффективность разработки внешнего интерфейса.В процессе разработки внешнего интерфейса большая часть работы заключается в написании кода HTML и CSS. Особенно при написании HTML-кода вручную эффективность будет особенно низкой, потому что вам нужно набирать много угловых скобок, а многие теги должны закрывать теги. Итак, есть Emmet, который может значительно повысить эффективность написания кода, он предоставляет очень краткие правила синтаксиса, а затем сразу генерирует соответствующую структуру HTML или код CSS, и есть множество практических функций, которые могут помочь Front-end разработка.
VsCode имеет встроенный синтаксис Emmet. После ввода сокращения в суффиксе .html / .css и нажатия клавиши Tab соответствующий код будет создан автоматически.

Обратите внимание, что нажатие клавиши Tab в новой версии VsCode больше не включает аббревиатуры расширения Emmet по умолчанию! Вам необходимо установить истинное значение emmet.triggerExpansionOnTab в конфигурации настроек!

Основные правила грамматики следующие:

E обозначает HTML-теги.
 E # id обозначает атрибут id.
 E.class представляет атрибут класса.
 E [attr = foo] представляет определенный атрибут.
 E {foo} означает, что содержимое, содержащееся в теге, является foo.
 E> N представляет, что N является дочерним элементом E. N означает, что N является верхним элементом E.

Эта статья только вводит использование Эммета в HTML,
Если вы хотите использовать синтаксис аббревиатуры Css, пожалуйста, обратитесь сюдаhttps://docs.emmet.io/css-abbreviations/
—

Во-вторых, основное использование

Элементы (элементы)
Вы можете использовать имя элемента, например, div или p, для генерации тегов HTML. У Emmet нет набора имен меток, вы можете написать любое слово и преобразовать его в метку. То есть, если вы знаете аббревиатуру элемента, Emmet автоматически конвертируется в соответствующую метку.
выглядит так:

div => <div> </div>
foo => <foo> </foo>
 html: 5 => сгенерирует стандарт html5, содержащий тело с пустой базовой формой
 html: xt => Создать тип документа перехода XHTML, DOCTYPE - XHTML
 html: 4s => Создать строгий тип документа HTML4, DOCTYPE - HTML 4.01
a:mail          => <a href="mailto:"></a>
a:link          => <a href="http://"></a>
base            => <base href="">
br              => <br>
link            => <link rel="stylesheet" href="">
script:src      => <script src=""></script>
form:get        => <form action="" method="get"></form>
label           => <label for=""></label>
input           => <input type="text">
inp             => <input type="text" name="">
 input: hidden => <input type = "hidden" name = ""> input: h также может
input:email     => <input type="email" name="">
input:password  => <input type="password" name="">
input:checkbox  => <input type="checkbox" name="">
input:radio     => <input type="radio" name="">
select          => <select name=""></select>
option          => <option value=""></option>
bq              => <blockquote></blockquote>
btn             => <button></button>
btn:s           => <button type="submit"></button>
btn:r           => <button type="reset"></button>

Текстовый оператор (Текст)
Если вы хотите добавить текстовое содержимое при создании элементов, вы можете использовать {}

div {это кусок текста}
 <div> Это кусок текста </ div>
 {укажите мне, укажите мне}
 <a href=""> Нажмите меня, нажмите меня </a>

Атрибуты операторов
Оператор атрибута используется для изменения атрибутов выходного элемента.
Идентификатор и класс (elem # id и elem.class)
div.test => <div></div> div#pageId => <div></div>
Неявные теги автоматически генерируют соответствующие элементы, и результаты, полученные в соответствии с различными правилами конфигурации, также различаются.
.class => <div class></div> em>.class => <em><span class></span></em> table>.row>.col => <table> <tr> <td></td> </tr> </table>
Привязать несколько имен классов. Символы могут быть непрерывными
div.test1.test2.test3 => <div></div>
Пользовательские атрибуты используют [attr1 = » attr2 = »]
a[href='#' data-title='customer' target='_blank'] => <a href="#" data-title="customer" target="_blank"></a>
Вложенные операторы
Вложенный оператор используется для размещения сокращенного элемента в сгенерированном дереве, независимо от того, должен ли он быть размещен внутри элемента контекста или рядом с ним.ul.brother>li => <div> <p><span></span></p> <ul> <li></li> </ul> </div>

Группировка оператора (Группировка)
Группировка использует () для разделения аббревиатур. Например, если вы не добавляете круглые скобки, то a будет сгенерирован как дочерний элемент span. Добавьте скобки a к элементам в () Тот же уровень.

div>(ul>li+span)>a
=>
<div>
    <ul>
        <li></li>
        <span></span>
    </ul>
    <a href=""></a>
</div>

Умножение (Умножение)
useN может автоматически генерировать дубликаты. N — положительное целое число. Обратите внимание при использованииМестоположение N отличается, а результаты, полученные в разных местах, различны.

ul>li*3
=>
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

Автоматический подсчет (нумерация)
Эта функция очень удобна для добавления порядкового номера при создании дубликатов, просто добавьте символ $.

ul>li.item${item number:$}*3
<ul>
    <li>item number:1</li>
    <li>item number:2</li>
    <li>item number:3</li>
</ul>

Если генерируются две цифры, используйте две последовательные $$, дополнительные цифры и так далее …
Используя модификатор @, вы можете изменить направление нумерации (в порядке возрастания или убывания) и количество элементов (например, начальное значение). Обратите внимание, что этот оператор добавляется после $
@ — означает убывающий порядок, @ + означает возрастающий порядок, по умолчанию используется восходящий порядок.
@N может изменить начальное значение. Следует отметить, что, если оно используется в возрастающем и убывающем порядке, N ставится после символа +.

ul>[email protected]*3
=>
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
---------------------------
ul>[email protected]*3
=>
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

Вышеуказанные операции можно использовать вместе, чтобы получить крутой эффект. Обратите внимание на проблему пробелов при их использовании. Не используйте пробелы в сокращенном коде, иначе они не будут преобразованы.
Кроме того, если в вашем редакторе уже есть некоторые фрагменты кода смарт-подсказки html, например, мой VsCode также установил подключаемый модуль HTML-фрагментов, это частично противоречит синтаксису Emmet при использовании клавиши Tab Сначала будет использоваться подсказка кода плагина, и рекомендуется его отключить.
Объедините его, чтобы увидеть эффект:

table.table-row[role='table']>(thead>tr>td{item [email protected]}*5)+(tbody>tr>([email protected])lorem10*5)

Цель этого параграфа состоит в том, чтобы сгенерировать метку таблицы с именем класса table-row и пользовательским атрибутом роли, который содержит thead и tbody и генерирует 5 tds.
Содержимое td в thead — это элемент плюс порядковый номер, который увеличивается самостоятельно, а базовый порядковый номер начинается с 120.
td в tbody имеет имя класса с именем item плюс нисходящий самораскрывающийся класс символов, и каждое содержимое td случайно заполняется 10 словами.

<table role="table">
    <thead>
        <tr>
            <td>item 120</td>
            <td>item 121</td>
            <td>item 122</td>
            <td>item 123</td>
            <td>item 124</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, assumenda.</td>
            </td>
            <td>
                <td>Magnam possimus molestias ipsum animi rem placeat, ut obcaecati laudantium.</td>
            </td>
            <td>
                <td>Consequuntur, labore ad optio cupiditate iusto dolores fugit quidem officiis.</td>
            </td>
            <td>
                <td>Veniam, explicabo consequuntur blanditiis at dicta fuga ratione eos beatae.</td>
            </td>
            <td>
                <td>Fuga voluptatum illo quis ducimus ad eveniet non.div#main

Это немного сложно, посмотрите эффект:

<div>
    <nav>
        <ul>
            <li>
                <a href="/xxx/product/1" data-index="1">Lorem ipsum dolor sit.</a>
                <a href="/xxx/product/2" data-index="2">Dolor vel, quia quas.</a>
                <a href="/xxx/product/3" data-index="3">Qui hic, corrupti eum!</a>
                <a href="/xxx/product/4" data-index="4">Necessitatibus perspiciatis, corrupti. Praesentium!</a>
                <a href="/xxx/product/5" data-index="5">Nostrum quos, voluptate. Velit!</a>
            </li>
        </ul>
    </nav>
    <div type="button"><span>--</span></div>
</div>
<div></div>

3. Расширенное использование

Симулированный текст / случайный текст
При разработке часто необходимо заполнить некоторые заполнители текстового содержимого. Emmet имеет встроенную функцию Lorem Ipsum для достижения этого. loremN или lipsumN, N представляет количество сгенерированных слов, положительное целое число. Вы можете оставить это поле пустым.

lorem
=> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit quia commodi vero sint omnis fugiat excepturi reiciendis necessitatibus totam asperiores, delectus saepe nulla consequuntur nostrum! Saepe suscipit recusandae repellendus assumenda.

p>lorem4
=>
<p>Lorem ipsum dolor sit.</p>

(p>lorem4)*3
=>
<p>Lorem ipsum dolor sit.</p>
<p>Labore aperiam, consequuntur architecto.</p>
<p>Quidem nisi, cum odio!</p>

Упаковка текста
Это может звучать немного округло, популярное объяснение заключается в том, чтобы заключить указанный текст в структуру, которую мы хотим. Обратите внимание, что эта функция требует поддержки редактора, например, большого каштана:
Например, премьер-министр дал такой текст

дома
 Введение продукта
 Связанные случаи
 О нас
 Свяжитесь с нами
 И наш ожидаемый эффект такой
<nav>
    <ul>
                 <li> Главная </ li>
                 <li> Представление продукта </ li>
                 <li> Связанные случаи </ li>
                 <li> О нас </ li>
                 <li> свяжитесь с нами </ li>
    </ul>
</nav>

Выберите текст, нажмитеctrl+shift+pОткройте окно командной строки и введите ewrap
выбратьЭммет: упаковка с аббревиатуройопции
Введите сокращенные символыnav>ul>li*Нажмите клавишу Enter, чтобы увидеть эффект.
Конечно, вы также можете ввести его в меню => Edit => Emmet (M) …
Здесь следует отметить, что влияние позиции * во введенном сокращенном коде отличается.

Кроме того, если данный текст имеет серийный номер, мы также можем обрабатывать его сокращением, вместо того, чтобы вручную удалять его.|tИметь дело с.
Например:

    1. Домой
         2. Введение продукта
         3. Связанные случаи
         4. О нас
         5. Свяжитесь с нами
         Введите команду упаковки символов
    nav>ul>li*|t
         Вы можете видеть, что серийный номер автоматически удаляется из сгенерированного HTML

Продемонстрируйте несколько ситуаций, упомянутых выше.

Хорошо используйте Emmet для быстрого написания HTML-кода, который может повысить эффективность работы, не нажимая на закрывающие теги один за другим. Это просто ленивый артефакт вечеринки, которого я жду. Идите и поиграйте в него.

Перепечатано по адресу: https://www.cnblogs.com/summit7ca/p/6944215.html.

HTML и CSS. 5 советов для работы с Emmet

Emmet — плагин для текстовых редакторов, который позволяет быстрее писать HTML и CSS-код.

Проверить данный плагин можно на сайте jsfiddle.net, для этого надо написать строку и нажать на Tab.

Чтобы сгенерировать тег, надо просто набрать текст и вызвать команду Emmet. Текущий текст преобразится в открытый и закрытый тег.


p     => <p></p>
div   => <div></div>
a     => <a href=""></a>
input => <input type="text">

Также можно сгенерировать несколько тегов через символ >.


ul>li =>

<ul>
    <li></li>
</ul>

Если к строке добавить .class или #id, то текст преобразится в тег с указанным классом или ИД.


div.post        => <div></div>
div#post-3      => <div></div>
div.post#post-3 => <div></div>

Можно сгенерировать HTML-страницу по умолчанию. Для этого надо набрать символ ! и выполнить команду Emmet.

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

Когда надо сгенерировать текст, то можно использовать команду lorem{число слов}.


lorem2  => Lorem ipsum.
lorem4  => Lorem ipsum dolor sit.
lorem10 => Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, atque!

Emmet также работает с CSS.


m10 => margin: 10px;
p10 => padding: 10px;

fz16  => font-size: 16px;
fw700 => font-weight: 700;

ta  => text-align: left;
tar => text-align: right;
tac => text-align: center;

Справочник Emmet для HTML

Emmet — довольно крутой инструмент, который помогает очень быстро писать HTML.

Это похоже на волшебство.

Эммет — не что-то новое, он существует уже много лет, и для каждого редактора есть плагин. НаКод VS, Emmet интегрирован «из коробки», и всякий раз, когда редактор распознает возможную команду Emmet, он покажет вам всплывающую подсказку.

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

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

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

Создать HTML-файл с нуля

Тип!и вы получите базовый шаблон HTML для работы:

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

> и +

Вы можете комбинировать их для выполнения более сложных разметок.p

Множители

Любой тег можно добавить несколько раз, используя*:

ul>li*5>p
<ul>
<li>
<p></p>
</li>
<li>
<p></p>
</li>
<li>
<p></p>
</li>
<li>
<p></p>
</li>
<li>
<p></p>
</li>
</ul>

Сгруппируйте выражение, чтобы сделать его более читабельным

С умножением все становится немного сложнее. Что делать, если вы хотите умножить 2 элемента? Вы группируете их в скобки( ):

ul>li>(p+span)*2
<ul>
<li>
<p></p>
<span></span>
<p></p>
<span></span>
</li>
</ul>

idиclassатрибуты

idиclassвероятно, наиболее часто используемые атрибуты в HTML.

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

ul>li>p.text#first
<ul>
<li>
<p class=“text” id=“first”></p>
</li>
</ul>

Вы можете добавить несколько классов:

ul>li>p.text.paragraph#first
<ul>
<li>
<p class=“text paragraph” id=“first”></p>
</li>
</ul>

Добавление уникального класса или идентификатора

idдолжен быть уникальным на вашей странице в любое время.

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

Вы можете сделать это, используя$:

ul>li.item$*2>p
<ul>
<li class=“item1”>
<p></p>
</li>
<li class=“item2”>
<p></p>
</li>
</ul>

Прочие атрибуты

Атрибуты, отличные от класса и идентификатора, должны быть добавлены с использованием[]скобки:

ul>li.item$*2>p[style="color: red"]
<ul>
<li class=“item1”>
<p style=“color: red”></p>
</li>
<li class=“item2”>
<p style=“color: red”></p>
</li>
</ul>

Вы можете добавить сразу несколько атрибутов:

ul>li.item$*2>p[style="color: red" title="A color"]
<ul>
<li class=“item1”>
<p style=“color: red” title=“A color”></p>
</li>
<li class=“item2”>
<p style=“color: red” title=“A color”></p>
</li>
</ul>

Добавление контента

Конечно, вы также можете заполнить HTML содержимым:

ul>li.item$*2>p{Text}
<ul>
<li class=“item1”>
<p>Text</p>
</li>
<li class=“item2”>
<p>Text</p>
</li>
</ul>

Добавление инкрементального числа в разметку

Вы можете добавить в текст инкрементное число:

ul>li.item$*2>p{Text $}
<ul>
<li class=“item1”>
<p>Text 1</p>
</li>
<li class=“item2”>
<p>Text 2</p>
</li>
</ul>

Это число обычно начинается с 1, но вы можете сделать так, чтобы оно начиналось с произвольного числа:

Ссылка на теги, используемые на странице

head

Сокращение	Визуализированный HTML
связь	`<link rel="stylesheet" href="" />`
ссылка: css	`<link rel="stylesheet" href="style.css" />`
ссылка: favicon	`<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />`
ссылка: rss	`<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml" />`
мета: utf	`<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />`
мета: vp	`<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />`
стиль	`<style></style>`
сценарий	`<script></script>`
скрипт: src	`<script src=""></script>`

Сокращение	Визуализированный HTML
img	`<img src="" alt="" />`
а	`<a href=""></a>`
br	`<br />`
час	`<hr />`
c	`<!-- -->`
tr +	`<tr><td></td></tr>`
ол +	`<ol>`
ул +	`<ul>`

Сокращение	Визуализированный HTML
млн	`<main></main>`
секта	`<section></section>`
Изобразительное искусство	`<article></article>`
HDR	`<header></header>`
ftr	`<footer></footer>`
adr	`<address></address>`
ул.	`<strong></strong>`

Ссылка на элементы формы

Сокращение	Визуализированный HTML
форма	`<form action=""></form>`
форма: получить	`<form action="" method="get"></form>`
форма: сообщение	`<form action="" method="post"></form>`
метка	`<label for=""></label>`
Вход	`<input type="text" />`
inp	`<input type="text" name="" />`
ввод: скрытый, ввод: ч	`<input type="hidden" name="" />`
ввод: текст, ввод: t	`<input type="text" name="" />`
ввод: поиск	`<input type="search" name="" />`
ввод: электронная почта	`<input type="email" name="" />`
ввод: URL	`<input type="url" name="" />`
ввод: пароль, ввод: p	`<input type="password" name="" />`
ввод: datetime	`<input type="datetime" name="" />`
ввод: дата	`<input type="date" name="" />`
ввод: datetime-local	`<input type="datetime-local" name="" />`
ввод: месяц	`<input type="month" name="" />`
ввод: неделя	`<input type="week" name="" />`
ввод: время	`<input type="time" name="" />`
ввод: тел.	`<input type="tel" name="" />`
ввод: число	`<input type="number" name="" />`
ввод: цвет	`<input type="color" name="" />`
ввод: флажок, ввод: c	`<input type="checkbox" name="" />`
вход: радио, вход: r	`<input type="radio" name="" />`
ввод: диапазон	`<input type="range" name="" />`
ввод: файл, ввод: f	`<input type="file" name="" />`
ввод: отправить, ввод: с	`<input type="submit" value="" />`
ввод: изображение, ввод: я	`<input type="image" src="" alt="" />`
ввод: кнопка, ввод: b	`<input type="button" value="" />`
ввод: сброс	`<input type="reset" value="" />`
кнопка: отправить, кнопка: s, btn: s	`<button type="submit"></button>`
кнопка: сброс, кнопка: r, btn: r	`<button type="reset"></button>`
кнопка: отключена, кнопка: d, btn: d	`<button disabled="disabled"></button>`
кстати	`<button></button>`
набор полей: отключен, набор полей: d, fset: d, fst: d	`<fieldset disabled="disabled"></fieldset>`
fst, fset	`<fieldset></fieldset>`
optg	`<optgroup></optgroup>`
Выбрать	`<select name=""></select>`
выберите: отключено, выберите: d	`<select name="" disabled="disabled"></select>`
выберите +	`<select name=""><option value=""></option></select>`
вариант, вариант	`<option value=""></option>`
стол +	`<table><tr><td></td></tr></table>`
текстовое поле	`<textarea name="" cols="30" rows="10"></textarea>`
тарея	`<textarea name="" cols="30" rows="10"></textarea>`

Больше руководств по инструментам разработчика:

команды, сокращения / Skillbox Media

Теперь разберём, как использовать Emmet в ваших рабочих проектах.

Первое, что мы обычно делаем при создании HTML-разметки, — пишем базовую структуру, где объявляем тип документа, указываем язык страницы, кодировку, метатеги, заголовок и тело будущей интернет-страницы.

Кажется удивительным, но с помощью Emmet это можно сделать, нажав всего три кнопки: набрать в редакторе «!» и нажать Tab или Enter. Emmet вставит скелет HTML-документа. Второй способ — набрать «html» и в выпадающем списке выбрать html:5.

После создания шапки документа мы размещаем теги <link> внутри <head> — с указанием путей к стилям или скриптам. Используя Emmet, можно просто написать «link», а автоподстановка предложит не только тег целиком, но и разные варианты: там есть стили и CSS, и установка favicon, и многое другое.

link


<link rel="stylesheet" href="">

Благодаря Emmet добавлять ссылки стало легко и приятно.

Пишем «a» и выбираем нужный вариант — простую гиперссылку, ссылку на номер телефона, электронную почту и так далее. Или можем уточнить тип, добавив после двоеточия нужное значение атрибута. Например, «a:tel».

a
a:tel


<a href=""></a>
<a href="tel:+"></a>

Для того чтобы добавить тег, пишем его название и нажимаем Tab или Enter.

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

После нужного тега добавляем символы «.» или «#», пишем название класса или идентификатора и получаем оформленный тег.

header.header
section#about


<header></header>
<section></section>

Примечание. Если нужно задать класс или id для тега <div>, то сразу ставим точку или «решётку», не набирая название тега, затем пишем название класса или идентификатора.

.wrap
#block


<div></div>
<div></div>

До этого мы разбирали самые простые возможности Emmet. Дальше начинается настоящая магия.

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

По отношению друг к другу элементы в HTML-разметке могут быть родительскими, дочерними и соседними. Рассмотрим на примерах, как их можно расположить и сгруппировать.

Пример 1. Соседние элементы

Знак «+» позволяет создать несколько соседних тегов — то есть расположенных на одном уровне.

div+p+div+a


<div></div>
<p></p>
<div></div>
<a href=""></a>

Знак «*» повторяет элементы указанное количество раз.

section*3


<section></section>
<section></section>
<section></section>

Пример 2. Дочерние элементы

Символ «>» делает следующий за ним элемент дочерним по отношению к первому (вложенным, обёрнутым в первый). При этом Emmet не забывает о закрывающих тегах и отступах при форматировании. Ваш код сразу же структурирован и отформатирован.

ul>li>a


<ul>
    <li><a href=""></a></li>
<ul>

Пример 3. Сгруппированные элементы

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

Представим, что нам нужно создать структуру простой страницы, состоящей из хедера, основной части и футера. При этом внутри хедера будет навигационная панель, реализованная в разметке как ненумерованный список. А блоки main и footer будут на одном уровне с header. Для этого header и его содержимое нужно взять в круглые скобки.

Всё это мы записали одной строкой, а на выходе получили девять!

(header>nav>ul>li)+main+footer


<header>
    <nav>
        <ul>
            <li></li>
        </ul>
    </nav>
</header>
<main></main>
<footer></footer>

Простая, но полезная вещь. Например, для проверки вёрстки на переполнение.

p>lorem


<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolore et, assumenda, amet mollitia qui ratione esse sunt nisi voluptate beatae doloribus odio repudiandae quo dolores quis dolor ut, soluta delectus!</p>

Emmet (Zen Coding) пишем быстрее HTML/CSS

Emmet это переименованный проект Zen coding. Emmet дает возможность с помощью сокращенний быстро генерировать HTML списки, блоки с классами и id. Также помимо HMTL, можно быстро писать CSS свойства, опять же с помощью сокращений. С одной стороны кажется лишним запоминать лишние сокращения и инструменты, но когда уже втягиваешься, то непривычно писать код без Emmet.

Возможности Emmet (Zen coding)

Очень часто приходится писать много html-кода и чем больше его нужно написать, тем выше вероятность ошибки в нем, например незакрытого тега. В этом вам поможет Emmet (Zen coding). В большинстве IDE есть поддержка или плагин для Emmet, вам нужно только выставить горячую клавишу для его выполнения и генерации html-кода.

Так например вы можете написать:

div#content>h2+p

Нажать кнопку выполнения Emmet и это преобразуется в:

<div> <h2></h2> <p></p> </div>

Как вы видите мы пишем простые css селекторы, а на выходе получает html с такой же иерархией.

Наиболее приятного в Emmet это генерация html меню. Так например вот этот код:

div#header>img.logo+ul#nav>li*4>a

После генерации станет:

<div id="header">

<img class="logo" src="">

<ul id="nav">

<li><a href=""></a></li>

</ul>

</div>

Здесь мы использовали селектор * в Emmet он означает какое количество элементов нужно генерировать. Он работает не только с <li>, но и со всеми другими тегами:

div.item$*3

Совместно со знаком доллара это сгенерирует такой вот код:

<div class="item1"></div>

<div class="item2"></div>

<div class="item3"></div>

Давайте вернемся к нашему меню и напишем вот такой код:

div#header>ul#navigation>li.item$*>a>span
О нас
Товары
Новости
Блог
Контакты

Он сгенерует нам целое меню:

<div>
<ul>
<li><a href=""><span>О нас</span></a></li>
<li><a href=""><span>Товары</span></a></li>
<li><a href=""><span>Новости</span></a></li>
<li><a href=""><span>Блог</span></a></li>
<li><a href=""><span>Контакты</span></a></li>
</ul>
</div>

Вы можете писать свои теги и делать все что угодно, используя селекторы Emmet:

E
Имя элемента (div, ul)
E#id
Аттрибут id элемента (<div>)
E.class
Аттрибут class элемента (<div)
E>N
Вложенный элемент
E+N
Соседний элемент
E*N
Вывести несколько таких элементов
E$*N
Вывести несколько таких элементов с пронумерованными классами (ul#nav>li.item-$*5)

Я думаю все популярные IDE поддерживают Emmet (Zen coding), но если вы пользуетесь Notepad++, то вам придется установить отдельно Emmet.

Установка Emmet (Zen coding) в Notepad++

Скачать плагин для Notepad++ можно здесь:

http://sourceforge.net/projects/npppythonscript/files/

Закиньте библиотеку Emmet (zen coding) в папку с notepad++.

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

Из списка доступных плагинов отмечаем галочкой Zen Coding — Python и нажимем Install

Если в списке нет плагина Zen Coding — значит ваша текущая версия Notepad++ его не поддерживает. Для этого нужно или установить версию более раннюю с поддержкой Zen Coding, или подождать чтобы данный plugin вышел под текущую версию.

Все, после перезапуска Notepad++ Вы сможете использовать данный плагин. Чтобы обработать код, нужно нажать комбинацию клавиш Ctrl + Alt + Enter. К примеру, чтобы добавить текущий код:

<a href=""><span></span></a>

нужно написать a.link>span и нажать комбинацию клавиш Ctrl + Alt + Enter.

Сокращений Синтаксис

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

Элементы

Вы можете использовать имена элементов, такие как div или p – генерировать тегов HTML. У Emmet нет предопределенного набора доступных имен тегов, вы можете написать любое слово и преобразовать его в тег: div →

, foo → и тд.

Операторы раскроя

Операторы вложенности используются для позиционирования элементов аббревиатуры внутри сгенерированного дерева: следует ли их размещать внутри или рядом с элементом контекста.

Детский:

>

Вы можете использовать оператор > для вложения элементов друг в друга:

  div> ul> li

… произведет

Родной брат:

+

Используйте оператор + для размещения элементов рядом друг с другом на одном уровне:

  div + p + bq

.бк

… выведет на

Умножение:

*

С помощью оператора * вы можете определить, сколько раз должен выводиться элемент:

  ul> li * 5

… выходы на

Группировка:

()

Круглые скобки используются опытными пользователями Emmets для группировки поддеревьев в сложные сокращения:

  div> (заголовок> ul> li * 2> a) + нижний колонтитул> p

…расширяется до

  
    <заголовок>
        
               
               
        
    
    <нижний колонтитул>

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

Вы можете вкладывать группы друг в друга и комбинировать их с оператором умножения * :

  (div> dl> (dt + dd) * 3) + нижний колонтитул> p

… производит

  
    
         
         
         
         
         
         
    

<нижний колонтитул>

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

Операторы атрибутов

Операторы атрибутов используются для изменения атрибутов выводимых элементов. Например, в HTML и XML вы можете быстро добавить атрибут class к сгенерированному элементу.

ID и КЛАСС

В CSS вы используете нотацию elem # id и elem.class для доступа к элементам с указанными атрибутами id или class . В Emmet вы можете использовать тот же синтаксис, чтобы добавить эти атрибуты к указанному элементу:

  div # заголовок + div.страница + div # нижний колонтитул.class1.class2.class3

… выведет

Настраиваемые атрибуты

Вы можете использовать нотацию [attr] (как в CSS) для добавления настраиваемых атрибутов к вашему элементу:

  td [title = "Привет, мир!" colspan = 3]

… выходы

Вы можете поместить любое количество атрибутов в квадратные скобки.
Необязательно указывать значения атрибутов: td [colspan title] произведет с табуляторами внутри каждого пустого атрибута (если ваш редактор поддерживает их).
Для заключения значений атрибутов в кавычки можно использовать одинарные или двойные кавычки.
Не нужно указывать значения, если они не содержат пробелов: td [title = hello colspan = 3] подойдет.

Нумерация позиций:

$

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

  ul> li.item $ * 5

… выходы на

Вы можете использовать несколько $ подряд, чтобы дополнить номер нулями:

  ul> li.товар $$$ * 5

… выходы на

Изменение базы и направления нумерации

С помощью модификатора @ вы можете изменить направление нумерации (по возрастанию или убыванию) и основание (например, начальное значение).

Например, чтобы изменить направление, добавьте @ - после $ :

  ul> li.товар $ @ - * 5

… выходы на

Чтобы изменить базовое значение счетчика, добавьте модификатор @N к $ :

  ul> li.item$@3*5

… преобразовывается в

Эти модификаторы можно использовать вместе:

  ul> li.товар $ @ - 3 * 5

… преобразован в

Текст:

{}

Вы можете использовать фигурные скобки для добавления текста к элементу:

  a {Нажмите меня}

… произведет

   Нажми меня

Обратите внимание, что {text} используется и анализируется как отдельный элемент (например, div , p и т. Д.), но имеет особое значение, когда пишется сразу после элемента. Например, a {click} и a> {click} выдадут тот же результат, но a {click} + b {здесь} и a> {click} + b {здесь} вон ‘ т:

 
 нажмите   здесь 


 нажмите  здесь

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

  p> {Click} + a {here} + {to continue}

… производит

   Нажмите  здесь , чтобы продолжить

В этом примере для записи Щелкните здесь, чтобы продолжить внутри элемента

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

Для сравнения, вот та же аббревиатура без дочернего оператора > :

  p {Click} + a {here} + {to continue}

… производит

   Нажмите 
 здесь , чтобы продолжить

Примечания к форматированию сокращений

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

  (заголовок> ул.nav> li * 5) + нижний колонтитул

Но это не сработает, потому что пробел — это знак остановки , где Эммет останавливает синтаксический анализ аббревиатуры.

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

|

~~~
введите: ul # nav> li * 4
ждать: 1000
запустить: emmet.expand_abbreviation
ждать: 1000
тип: Привет, мир span.info
ждать: 1000
всплывающая подсказка: для расширения аббревиатуры новая строка не требуется
ждать: 600
запустить: emmet.expand_abbreviation
ждать: 1000
moveTo: 87
ждать: 1500
тип: span.info
ждать: 1000
всплывающая подсказка: {text: «Эммет достаточно умен, чтобы понять, что вы пытаетесь расширить аббревиатуру span.info , а не li> span.info «, подождите: 5000}
запустить: emmet.expand_abbreviation

Вот почему Эммету нужны некоторые индикаторы (например, пробелы), где он должен прекратить синтаксический анализ, чтобы не расширять то, что вам не нужно. Если вы все еще думаете, что такое форматирование необходимо для сложных сокращений, чтобы сделать их более удобочитаемыми:

Аббревиатуры не являются языком шаблонов, они не должны быть «читабельными», они должны быть «быстро расширяемыми и удаляемыми».
На самом деле вам не нужно писать сложные сокращения. Перестаньте думать, что «набор текста» — самый медленный процесс в веб-разработке. Вы быстро поймете, что построение одного сложного сокращения намного медленнее и подвержено ошибкам, чем построение и ввод нескольких коротких.

Пожалуйста, включите JavaScript, чтобы просматривать комментарии от Disqus.
комментарии предоставлены

syntaxProfiles.json

Профили вывода используются для определения того, как должно выглядеть сгенерированное содержимое HTML.Например, когда вы расширяете аббревиатуру br , Эммет может создать один из следующих тегов:

— Нотация HTML
— Нотация XHTML
— XML-нотация

Emmet пытается автоматически определить выходной профиль для текущего документа. Например, если документ содержит документ XHTML, он будет использовать профиль xhtml , в противном случае html .

Но иногда вам нужно заставить Эммета использовать другой профиль для указанного синтаксиса или использовать ваш собственный профиль с определенными правилами.

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

Содержимое этого файла представляет собой простой словарь «ключ-значение», где ключ — это имя синтаксиса, как определено в snippets.json , а значение — имя предопределенного профиля ( String ) или словарь с параметрами профиля ( Объект ):

  {
    
    "html": "xhtml",

    
    "xml": {
        "tag_case": "верхний",
        "attr_quotes": "одиночный"
    }
}

Предварительно определенные профили

html — профиль вывода по умолчанию.
xhtml — то же, что и html , но выводит пустые элементы с закрытой косой чертой: .
xml — по умолчанию для синтаксисов XML и XSL: выводит каждый тег на новой строке с отступом, пустые элементы выводятся с закрывающей косой чертой: .
строка — используется для вывода расширенной аббревиатуры без отступов и новых строк. В некоторых редакторах применяется по умолчанию в языках программирования, таких как JavaScript или Python, для создания действительных строк.

Создайте свой профиль

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

tag_case : регистр сгенерированного имени тега, строка. Возможные значения: верхний , нижний и asis .
attr_case : регистр имен атрибутов сгенерированных тегов, строка. Возможные значения: верхний , нижний и asis .
attr_quotes : кавычки вокруг значений атрибутов, строка.Возможные значения: single и double .
tag_nl : выводить каждый тег на новой строке с отступом, логический. Значения: true (каждый тег в новой строке), false (без форматирования) и «решить» (строка; только элементы уровня блока на новых строках).
tag_nl_leaf : с tag_nl , установленным на true , определяет, должен ли узел уровня конечного блока (например, узел без дочерних узлов) иметь внутри форматированные разрывы строк.
indent : отступ тегов на новых строках, логический.
inline_break : сколько строковых элементов необходимо для принудительного разрыва строки, число. Значение по умолчанию — 3 . Например, диапазон * 2 будет расширен до , но диапазон * 3 создаст три элемента , каждый на новой строке. . Установите для этого параметра значение 0 , чтобы отключить разрывы строк для встроенных элементов.
self_closing_tag : пустые элементы, такие как br или img , должны выводиться с закрывающим тире, логическим значением. Значения: true , false и 'xhtml' (строка; закрывающая косая черта вывода в стиле XHTML, например ).
фильтры : список фильтров, которые будут применяться автоматически.

Пожалуйста, включите JavaScript, чтобы просматривать комментарии от Disqus.
комментарии предоставлены

Типы элементов

в документах HTML и XML, когда вы раскрываете аббревиатуры, все части сокращений на лету преобразуются в теги HTML / XML.Но некоторые элементы, такие как a или img , преобразуются в элементы с предопределенными атрибутами: и . Как Эммет узнает, когда нужно добавить эти атрибуты?

Все определения элементов Emmet хранятся в файле snippets.json в следующем формате:

  {
    "html": {
        "сокращения": {
            "a": "",
            "link": ""
            ...
        },
        "snippets": {
            "cc: ie6": " \ n \ t $ {child} | \ n "
            ...
        }
    },

    "css": {
        ...
    }
}

Как видите, на первом уровне есть имена синтаксиса, для которых определены элементы. Внутри раздела синтаксиса есть определения элементов, разделенные на два раздела: фрагменты и сокращение .

Фрагменты

Snippets — это просто блоки простого кода, как и во всех редакторах программистов.Вы можете ввести здесь что угодно, и оно будет выведено «как есть» без каких-либо преобразований.

Сокращения

Аббревиатуры на самом деле являются строительными блоками с некоторыми подсказками по данным. Поскольку Emmet в основном используется для написания тегов HTML / XML, определение аббревиатуры использует формат XML для описания элемента .

Эммет анализирует определение сокращения и извлекает следующие данные:

Порядок атрибутов

Давайте подробнее рассмотрим приведенные выше определения сокращений HTML. Элемент link определяется как (в JSON следует использовать двойные кавычки или использовать одинарные кавычки). В этом определении говорится, что тег, сгенерированный для аббревиатуры link , должен называться link и содержать два атрибута: rel со значением по умолчанию «таблица стилей» и href с пустым значением (именно в этом порядке) и сгенерированный. элемент не должен содержать закрывающего тега.

При раскрытии аббревиатуры ссылки вы получите следующий вывод для синтаксиса HTML:

Вы можете переопределить значения атрибутов по умолчанию, а также добавить новые:

  ссылка [rel = prefetch title = "Hello world"]

… расширяется до

Вы также можете добавить дочерние элементы, что заставит Emmet вывести закрывающий тег:

  ссылка> xsl: apply-templates

…выведет

Псевдонимы

В разделе сокращений файла snippets.json вы также можете определить псевдонимы : сокращение для часто используемых сокращений. Можно использовать псевдонимы для определения:

В фрагментах .json , вы можете найти следующие определения:

  ...
"html": {
    "сокращения": {
        "bq": "цитата",
        "ол +": "ол> ли"
    }
}

В приведенном выше примере, когда вы расширяете аббревиатуру bq , Эммет будет искать определение аббревиатуры blockquote . Если его не существует, он просто выведет элемент

. Сокращение ol + фактически дает тот же результат, что и ol> li .

Определение ol + может выглядеть неоднозначно, поскольку оно содержит + в конце, который также является оператором-братом. Эммет правильно расширяет такие сокращения, и знак плюса оставлен здесь по историческим причинам. Просто помните, что вам не нужно использовать знак плюса для создания псевдонима сокращения.

Пожалуйста, включите JavaScript, чтобы просматривать комментарии от Disqus.
комментарии предоставлены

Действия

Emmet позволяет писать большие блоки кода HTML со скоростью света, используя хорошо известные селекторы CSS.Но это не единственное, что нужно каждому веб-разработчику: иногда вам нужно отредактировать свой HTML и CSS-код, чтобы исправить ошибки и добавить новые функции.

Emmet предлагает уникальные инструменты, которые могут значительно улучшить ваш опыт редактирования:

Раскрыть сокращение: Да, это действие , которое расширяет сокращения, подобные CSS, в код HTML.
Сопоставление пары тегов: Выбирает содержимое и / или открывает и закрывает имя тега HTML из текущей позиции курсора (a.k.a «балансировка»). Супер-классная реализация, что работает даже в синтаксисе , отличном от HTML! Неявно используется многими действиями Emmet.
Перейти к соответствующей паре: Быстро перемещается между открывающим и закрывающим HTML-тегом.
Обертка с аббревиатурой: То же, что и действие «Расширить аббревиатуру», но разумно обертывает выбранный контент.
Перейти к точке редактирования: Быстро переходите между важными точками кода HTML.
Выбрать товар: Быстро выбирайте важные части кода HTML и CSS.
Переключить комментарий: Переключает комментарий. В отличие от базовых реализаций редактора, соответствует тегу HTML, свойству CSS или правилу при отсутствии выделения.
Разделить / объединить тег: Разделяет ( → ) или объединяет ( → ) тег HTML / XML под текущей позицией курсора.
Удалить метку: Изящно удаляет тег HTML / XML под текущей позицией каретки.
Объединить строки: Объединяет выбранные строки в одну. Без выбора автоматически соответствует ближайшему тегу HTML.
Обновить размер изображения: Обновляет соответствующий тег HTML или правило CSS с размером изображения, расположенным под кареткой.
Вычислить математическое выражение: Вычисляет простое математическое выражение
Число увеличения / уменьшения: Увеличивает или уменьшает число в текущей позиции курсора с заданным шагом.
Отражение значения CSS: Автоматически копирует значение CSS под текущей позицией курсора во все варианты с префиксом поставщика.
Кодирование / декодирование изображения в данные: URL: Кодирует изображение под кареткой в формат данных: URL и наоборот.

Пожалуйста, включите JavaScript, чтобы просматривать комментарии от Disqus.
комментарии предоставлены

Ускорьте кодирование вашего HTML с помощью Emmet в VSCode

Сокращения Синтаксис

Операторы вложенности

Элементы
Просто введите любой HTML-элемент без <> и нажмите вкладку, он автоматически сгенерирует HTML-тег.

html
головка

Войти в полноэкранный режимВыйти из полноэкранного режима

Братья и сестры +

h2 + h3 + p + btn

Войти в полноэкранный режимВыйти из полноэкранного режима

Детский >

стол> tr> td

  <таблица>

Войти в полноэкранный режимВыйти из полноэкранного режима

Набор высоты ^

таблица> tr> td ^^ ul> li

  <таблица>

Войти в полноэкранный режимВыйти из полноэкранного режима

Умножение *

ul> li * 3

Войти в полноэкранный режимВыйти из полноэкранного режима

Группировка ()

(таблица> tr> td) * 2

  <таблица>
    
         
    

<таблица>

Войти в полноэкранный режимВыйти из полноэкранного режима

(таблица> tr> td) + ul> li

  <таблица>

Войти в полноэкранный режимВыйти из полноэкранного режима

Задача для вас 🙂
создайте этот html с помощью emmet

  
     


    <таблица>

Войти в полноэкранный режимВыйти из полноэкранного режима

div> h2 ^ div> (таблица> (tr> td * 3) * 2) + ul> li * 4

Операторы атрибутов

id # => element # id

h2 # заголовок
p # комментарий

Войти в полноэкранный режимВыйти из полноэкранного режима

класс # => элемент # класс

дел.контейнер
btn.btn.btn-primary

Войти в полноэкранный режимВыйти из полноэкранного режима

Пользовательские атрибуты [] => [attr = «value»]

input [type = «number» name = «amount» min = «1» max = «5»]

Войти в полноэкранный режимВыйти из полноэкранного режима

Внутренний текст {} => {text}

p {hello world}

   привет мир

Войти в полноэкранный режимВыйти из полноэкранного режима

Включение emmet для jsx в vscode

Более быстрое создание HTML и CSS с помощью Emmet

Emmet — это инструмент, призванный помочь разработчикам сэкономить время при написании HTML и CSS.Emmet включает сокращения для каждого тега HTML и включает сокращения CSS. Этот инструмент уже встроен в некоторые из наиболее часто используемых текстовых редакторов. Если ваш любимый текстовый редактор не поставляется с ним, вы также можете загрузить его как плагин и проверить конкретные инструкции на их веб-сайте. Вы также можете связать аббревиатуры с синтаксисом, похожим на CSS, с помощью ярлыка «!».

Emmet — это инструмент, призванный помочь разработчикам сэкономить время при написании HTML и CSS путем инкапсуляции фрагментов кода и загрузки их с помощью простых ярлыков, вот пример:

Допустим, вы начинаете новый HTML project, первое, что вы делаете, это создаете index.html, с помощью Emmet вы можете мгновенно получить в свое распоряжение шаблон HTML с ярлыком «!»:

Затем мы нажимаем клавишу TAB, чтобы развернуть код, и вуаля!

  


  
  
  
   Документ

Emmet включает сокращения для каждого тега HTML :

  div расширяется до  
a заменяется на  
br расширяется до

Emmet поставляется с предварительно установленными сокращениями CSS , вот несколько примеров:

  pos = position
bg = фон
m = маржа
c = цвет
fl: l = плавающее влево
fl: r = float-right

Цепочка сокращений

Вы также можете связать сокращения с синтаксисом, похожим на CSS,

Представьте, что мы собираемся создать форму с электронной почтой в качестве ввода:

  form : post # sample-form> label [for = email] + input # email + button: s

Это создает форму

с
method = "post"
и
id = "sample -form "
, мы передаем символ
>
для создания дочерних элементов, первый — это метка, затем мы добавляем
input
с
id =" email "
и
кнопка
с
type = "submit"
:

Создание нумерованного списка с этими связанными сокращениями

  #wrapper> ul # sample-list> li.item - $ * 3> {Item $}

Здесь
#wrapper
создает элемент div с
id = "wrapper"
, затем мы передаем символ
>
для ссылки
# wrapper
дочерних элементов, затем мы создаем неупорядоченный список или элемент
ul
с
id = "sample-list"
, а затем снова передаем символ
>
, чтобы создать элемент списка или
li
элементов внутри
ul
, для завершения мы даем каждому элементу li
class = "item- (1,2,3)"
, где
$
становится
(1 , 2,3)
соответственно:

  
  
     Пункт 1 
     Пункт 2 
     Пункт 3

Настройка / установка

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

Ссылки

Если вы дошли до этого места, я надеюсь, что эта статья вам так или иначе помогла, спасибо за чтение!

Похожие истории

Прежде чем мы перейдем к тому, что такое Эммет и как его использовать, позвольте мне рассказать, почему я выбираю код VS в качестве текстового редактора / IDE (да, вы можете назвать это IDE, поскольку он имеет почти все возможности IDE ).

Когда я начал заниматься веб-разработкой, я перепробовал множество IDE: Atom, Brackets, Sublime. Дело в том, что я продолжал переключаться. Я не говорю, что эти IDE плохие, дело в том, что я люблю их, однако мне всегда хотелось чего-то большего от моей IDE. В какой-то момент я подумал, что со мной что-то не так: P Затем я встретил код VS, и мальчик о мальчик, я никогда больше не переключался на какую-либо другую среду IDE. Код VS был особенным, в нем были все инструменты, которые мне были нужны из коробки, пусть это будет интеграция с исходным кодом, интегрированный терминал, украшение, отладка, что является большим плюсом, изменение темы не требует усилий и многое другое.И становится все лучше и лучше. Для вещей, которых нет в наличии, вы можете легко найти плагин на рынке.

  div {Это div}

  ul> li

  ul> li * 3> a

  ul> li {$} * 3

  ul> li {$ @ -} * 5

  ul> li {$ @ 10} * 5

  ul> li {$ @ - 10} * 5

  div # main.container.responsive

  div # main # main-body.container.responsive

  div [data-name = logo]

  заголовок + div + нижний колонтитул

  div> (a> p> span + span) * 3

  lorem

  lorem * 5

Вы также можете использовать Emmet для CSS.Это может быть очень полезно, поскольку вам не нужно запоминать длинные имена свойств, используйте короткие выражения для присвоения значений свойствам. Давайте посмотрим на несколько примеров.

  m10–10–10–10

   margin: 10px 10px 10px 10px;

   p10–10–10–10

   padding: 10px 10px 10px 10px;

Как писать HTML и CSS быстро: emmet | by Дима Безуглый

Див или любой другой тег

Тег с классом

Вложить тег в тег

Теги друг за другом

Несколько одинаковых тегов

Текст в теге

Рыбный текст

Свойства

Свойства и значения

Множественные значения

Как настроить аббревиатуру Emmet для doc для настраиваемого шаблона html?

3 ответа

Похожие вопросы:

Используйте артефакт Emmet для быстрого написания HTML-кода в VsCode

1. Краткое знакомство с Эмметом

Во-вторых, основное использование

3. Расширенное использование

HTML и CSS. 5 советов для работы с Emmet

Справочник Emmet для HTML

Создать HTML-файл с нуля

> и +

Множители

Сгруппируйте выражение, чтобы сделать его более читабельным

Добавление уникального класса или идентификатора

Прочие атрибуты

Добавление контента

Добавление инкрементального числа в разметку

Ссылка на теги, используемые на странице

Ссылка на элементы формы

Больше руководств по инструментам разработчика:

команды, сокращения / Skillbox Media

Emmet (Zen Coding) пишем быстрее HTML/CSS

Возможности Emmet (Zen coding)

Установка Emmet (Zen coding) в Notepad++

Сокращений Синтаксис

Элементы

Операторы раскроя

Детский:

Родной брат:

Умножение:

Группировка:

Операторы атрибутов

ID и КЛАСС

Настраиваемые атрибуты

Нумерация позиций:

Изменение базы и направления нумерации

Текст:

Примечания к форматированию сокращений

syntaxProfiles.json

Предварительно определенные профили

Создайте свой профиль

Типы элементов

Теги

Что такое Эммет? Использование Эммета в VS Code | Картик Малик

Почему VS code? Что в этом особенного? Почему не какую-либо другую IDE?

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