Emmet io: Emmet — the essential toolkit for web-developers

Тренажер и курс по работе с Emmet от epixx.github.io

Тренажер для работы с Emmet от epixx.github.io

Другие обучающие проекты для работы с Emmet

Вы не знаете что такое Emmet?

Использование Emmet

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

В основном, большинство текстовых редакторов позволяют вам хранить и повторно использовать часто используемые фрагменты кода, так называемыми «фрагментами». Хотя фрагменты кода являются хорошим способом повысить производительность, все реализации имеют общие побочные эфекты: сначала нужно определить фрагмент, но нельзя расширять его во время выполнения.

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

Тренажер для работы с Emmet от epixx.github.io

Перейти и потренироваться https://epixx.github.io/emmet/

Основная цель данной статьи познакомить Вас с отличным сервисом, который поможет Вам повысить Ваш скил при работе с Emmeт снипетами (фрагментами кода).

Другие обучающие проекты для работы с Emmet

Есть также много других фантастических обучающих программ онлайн. Большинство фокусируется на использовании Emmet в контексте веб-дизайна и разработк. Вот несколько из лучших:

• Прохладный и легкий HTML со статьей Emmet от Atomic Object
• Эммет (это круто) скринкаст из CSS-хитрости
• Прощай, дзен-кодирование, привет, Эммет! статья из журнала Smashing Magazine
• Ускоренный рабочий процесс: освоение серии Emmet из SitePoint

Вы не знаете что такое Emmet?

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

Emmet доступен для различных текстовых редакторов и встроен прямо в Litmus Builder. Популярный среди веб-дизайнеров, Emmet также популярен среди небольшого числа разработчиков макетов для электронной почты, особенно европейцев и маркетологов, которые пишут электронные письма с нуля. Например, 11% маркетологов в Европе и Великобритании и 13% тех, кто кодирует электронные письма с нуля, используют Emmet, согласно исследованию состояния рабочих процессов в электронной почте в 2018 году от litmus.com .

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

Использование Emmet

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

Выше наша желаемая структура.

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

table>tr*3>td>img+p+a

После нажатия кнопки TAB, чтобы вызвать Emmet, одна строка кода выше раскрывается в полный HTML.

<table>
 <tr>
 <td>
 <img src="" alt="" />
 <p></p>
 <a href=""></a>
 </td>
 </tr>
 <tr>
 <td>
 <img src="" alt="" />
 <p></p>
 <a href=""></a>
 </td>
 </tr>
 <tr>
 <td>
 <img src="" alt="" />
 <p></p>
 <a href=""></a>
 </td>
 </tr>
</table>

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

Строка начинается с элемента таблицы, который сообщает Эммету, что первым раскрываемым элементом является таблица HTML. Используя дочерний селектор (>) и оператор умножения (*), мы сообщаем Emmet включить три строки таблицы в основную таблицу.

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

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

table[cellpadding=0 cellspacing=0]

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

Источник записи:

LinkedIn

選擇語言Bahasa Indonesia (Bahasa Indonesia)Bahasa Malaysia (Malay)Čeština (Czech)Dansk (Danish)Deutsch (German)English (English)Español (Spanish)繁體中文 (Chinese (Traditional))Français (French)한국어 (Korean)Italiano (Italian)简体中文 (Chinese (Simplified))Nederlands (Dutch)日本語 (Japanese)Norsk (Norwegian)Polski (Polish)Português (Portuguese)Română (Romanian)Русский (Russian)Svenska (Swedish)Tagalog (Tagalog)ภาษาไทย (Thai)Türkçe (Turkish)العربية (Arabic)

عفواً، لم نتمكن من العثور على الصفحة التي تبحث عنها. برجاء المحاولة مرة أخرى للصفحة السابقة أو الانتقال لـمركز المساعدة للمزيد من المعلومات

الإنتقال لموجزك الرئيسي

Omlouváme se, nemůžeme najít stránku, kterou hledáte. Zkuste se vrátit zpátky na předchozí stránku, nebo se podívejte do našeho Centra nápovědy pro více informací

Přejít do informačního kanálu

Vi kan desværre ikke finde den side, du leder efter.

Gå tilbage til den forrige side, eller besøg Hjælp for at få flere oplysninger Gå til dit feed

Die gewünschte Seite konnte leider nicht gefunden werden. Versuchen Sie, zur vorherigen Seite zurückzukehren, oder besuchen Sie unseren Hilfebereich, um mehr zu erfahren.

Zu Ihrem Feed

Uh oh, we can’t seem to find the page you’re looking for. Try going back to the previous page or see our Help Center for more information

Go to your feed

Vaya, parece que no podemos encontrar la página que buscas. Intenta volver a la página anterior o visita nuestro Centro de ayuda para más información.

Ir a tu feed

Nous ne trouvons pas la page que vous recherchez. Essayez de retourner à la page précédente ou consultez notre assistance clientèle pour plus d’informations

Ouvrez votre fil

Maaf, sepertinya kami tidak dapat menemukan halaman yang Anda cari.

Coba kembali ke halaman sebelumnya atau lihat Pusat Bantuan kami untuk informasi lebih lanjut Buka feed Anda

Non abbiamo trovato la pagina che stai cercando. Prova a tornare alla pagina precedente o visita il nostro Centro assistenza per saperne di più.

Vai al tuo feed

申し訳ありません。お探しのページが見つかりません。前のページに戻るか、ヘルプセンターで詳細をご確認ください

フィードに移動

원하시는 페이지를 찾을 수 없습니다. 이전 페이지로 돌아가거나 고객센터에서 자세히 알아보세요.

홈으로 가기

Harap maaf, kami tidak dapat menemui laman yang ingin anda cari. Cuba kembali ke laman sebelumnya atau lihat Pusat Bantuan kami untuk maklumat lanjut

Pergi ke suapan

De pagina waar u naar op zoek bent, kan niet worden gevonden. Probeer terug te gaan naar de vorige pagina of bezoek het Help Center voor meer informatie

Ga naar uw feed

Vi finner ikke siden du leter etter.

Gå tilbake til forrige side eller besøk vår brukerstøtte for mer informasjon Gå til din feed

Nie możemy znaleźć strony, której szukasz. Spróbuj wrócić do poprzedniej strony lub nasze Centrum pomocy, aby uzyskać więcej informacji

Przejdź do swojego kanału

A página que você está procurando não foi encontrada. Volte para a página anterior ou visite nossa Central de Ajuda para mais informações

Voltar para seu feed

Ne pare rău, nu găsim pagina pe care o căutaţi. Reveniţi la pagina anterioară sau consultaţi Centrul nostru de asistenţă pentru mai multe informaţii

Accesaţi fluxul dvs.

Не удаётся найти искомую вами страницу. Вернитесь на предыдущую страницу или посетите страницу нашего справочного центра для получения дополнительной информации.

Перейти к ленте

Sidan du letar efter hittades inte.

Gå tillbaka till föregående sida eller besök vårt Hjälpcenter för mer information Gå till ditt nyhetsflöde

ขออภัย ดูเหมือนเราไม่พบหน้าที่คุณกำลังมองหาอยู่ ลองกลับไปที่หน้าเพจก่อน หรือดู ศูนย์ความช่วยเหลือ ของเราสำหรับข้อมูลเพิ่มเติม

ไปที่ฟีดของคุณ

Naku, mukhang hindi namin mahanap ang pahina na hinahanap mo. Subukang bumalik sa nakaraang pahina o tingnan ang aming Help Center para sa higit pang impormasyon

Pumunta sa iyong feed

Aradığınız sayfa bulunamadı. Önceki sayfaya geri dönün veya daha fazla bilgi için Yardım Merkezimizi görüntüleyin

Haber akışınıza gidin

抱歉，无法找到页面。试试返回到前一页，或前往帮助中心了解更多信息

前往动态汇总

我們好像找不到該頁面。請回到上一頁或前往說明中心來進一步瞭解

前往首頁動態

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

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

Элементы

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

, foo → и так далее.

Вложенные операторы

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

Ребенок:

>

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

 раздел>ул>ли
 

…будет производить

 <дел>
    <ул>
        

    

 <дел>
<дел>