Emmet, ранее известный как Zen Coding, является одним из лучших инструментов, который вам нужен для повышения производительности при кодировании HTML или CSS. Он работает так же, как завершение кода, но он более мощный и удивительный. Он может автоматизировать ваш HTML / CSS от простой формы до сложной.
Emmet предлагает хорошую поддержку текстового редактора или IDE (интегрированной среды разработки), таких как Dreamweaver, Eclipse, Sublime Text, TextMate, Expresso, Coda, Brackets, Notepad ++, PHPStorm и многих других. Он также поддерживает инструменты онлайн-редактирования, такие как JSFiddle, JSBin, CodePen, IceCoder и Codio .
Emmet работает так, как только вы наберете синтаксис, набрав клавишу на клавиатуре. Ниже приведены наиболее распространенные символы Emmet, которые вы можете использовать. Чтобы увидеть их в действии, пожалуйста, продолжайте читать.
Эммет - лучшие трюки HTML
Вы будете поражены, когда пишете HTML с Эмметом, как я. Как указывалось ранее, Emmet может сократить простой HTML до очень сложного. И они написаны только на одной строке кода. По умолчанию, если вы сокращаете неизвестное имя тега, Emmet автоматически напишет введенный вами тег. Смотрите анимацию ниже, чтобы легко понять это.
1. Вложенность
Чтобы вложить некоторые элементы, вам просто нужно добавить больший знак > после каждого тега, который вы хотите использовать. Например, когда я хочу иметь header с nav, div, ul и li внутри, мне просто нужно набрать header>nav>div>ul>li и нажать клавишу табуляции.
2. Брат
Если вы не хотите вкладывать свои элементы, вы можете просто использовать знак плюс + за которым следуют теги, которые вы хотите добавить. Например, header+section+article+footer предоставит другое место для header, section, article и footer .
3. Поднимитесь
Когда вы находитесь внутри дочернего элемента и хотите иметь другой элемент вне этого дочернего элемента, вы можете легко взобраться на один элемент со знаком ^ . Если вы наберете его дважды, вы наберете двойной элемент и так далее. Например, если вы введете header>div>h1>nav вас будет элемент nav внутри h1. Чтобы получить его, просто замените последний знак > на ^ .
4. Добавить класс
Emmet также может включить ваше предпочтительное имя класса в теге. Знак, который вы будете использовать, аналогичен селектору классов в CSS, который является точкой . знак. Например, если я хочу иметь div с классом .title, h1 с .title и nav с .fixed, то мне просто нужно написать div.container>header>h1.title+nav.fixed .
Если вы хотите, чтобы внутри было более одного класса, введите дополнительный класс после первого класса вместе с точкой . знак. Пример: div.container.center произведет ,
5. Добавить идентификатор
Помимо класса, вы также можете добавить идентификатор внутри тега со знаком # . Использование аналогично добавлению класса, но вы не можете вводить двойной идентификатор внутри. Если вы попытаетесь это сделать, Emmet будет читать только последний введенный вами идентификатор.
6. Добавить текст
Emmet не так прост, просто сокращая некоторые теги, вы даже можете добавить строку текста внутри. Чтобы добавить текст, нужно просто обернуть текст знаком фигурной скобки {} . Вам не нужно добавлять знак > больше, так как текст будет автоматически добавлен внутри тега.
7. Добавить атрибут
Если вы хотите добавить другой атрибут помимо класса и идентификатора, просто поместите атрибут, который вы хотите добавить, в знак [] . Например, я хочу получить изображение с исходным кодом logo.png с логотипом alt, поэтому просто введите img[src="logo.png"] .
8. Группировка
Если вы хотите, чтобы элемент с несколькими вложенными элементами находился внутри, то группировка их со знаком () поможет вам легко это сделать. Например, я хочу иметь контейнер с заголовком с h1 и nav внутри и другим разделом вне заголовка, я просто напишу: .container>(header>h1+nav.fixed)+(section>.content+.sidebar) .
9. Умножение
Эта функция может стать одной из ваших любимых от Emmet. Как и в случае умножения, мы можем умножить любой элемент столько, сколько захотим. Чтобы использовать его просто добавьте знак звездочки * после элемента, который вы хотите умножить, и добавьте номер элемента. Например, я хочу написать пять элементов li внутри ul, тогда правильный синтаксис - ul>li*5 .
10. Автоматическая нумерация
Автоматическая нумерация поможет вам легко написать другое имя с увеличением номера. Правильный синтаксис этой функции - знак доллара. Автоматическая нумерация лучше всего использовать с умножением. Например, я хочу добавить свой предыдущий элемент li с классом от item1 до item5 . Итак, мне просто нужно добавить дополнительное имя класса со знаком доллара: ul>li.item$*5 .
11. Лорем
Если вы раньше писали какой-то фиктивный текст, открывая генератор губ, например lipsum.com, с Emmet вам больше не нужно это делать. Emmet также поддерживает фиктивный текстовый генератор с синтаксисом lorem или lipsum . Вы также можете указать, как долго ваш текст станет. Например, я хочу получить текст длиной 10 слов, а затем lorem10 .
12. Авто Документ
Когда вы начинаете новый проект, вместо того, чтобы писать html-структуру вручную или копировать вставки из других ресурсов, Emmet может сделать это для вас лучше. Все, что вам нужно сделать, это набрать восклицательный знак ! знак, нажмите вкладку и магия случится. Это создаст структуру документа HTML5 для вас, если вы хотите вместо этого использовать HTML4, просто введите html:4t .
13. Ссылка
Если у вас есть файл favicon, rss или внешний CSS-файл, который вы хотите добавить в документ, вы можете использовать трюки со ссылками, чтобы написать их быстрее. Чтобы включить favicon, введите link:favicon тогда он сгенерирует ссылку на favicon с именем файла по умолчанию favicon.ico внутри. А для css link:css сгенерирует вам ссылку CSS с style.css стиля style.css внутри. И RSS будет rss.xml качестве имени по умолчанию.
Вы можете объединить их со знаком плюс + чтобы генерировать более быстрые ресурсы.
14. Якорь
По умолчанию, когда вы вводите тег, а затем нажимаете вкладку, вы получите полный тег с атрибутом href внутри. Но вы можете добавить значение // если объедините его со ссылкой, например, a:link И если вы хотите вместо этого иметь почтовую ссылку, используйте a:mail .
15. Умный Пропуск
Последний трюк HTML, который я дам вам, - это умная функция пропуска. По сути, вам не нужно писать имя тега, если вы хотите иметь внутри него класс или идентификатор. Это применимо только при определенных условиях.
Во-первых, если вы хотите иметь div с идентификатором или классом внутри, вам не нужно писать имя тега, просто напишите идентификатор или символ класса вместе с его именем.
Во-вторых, когда вы находитесь внутри тега ul, вы пропускаете написание тега li если у него есть класс или идентификатор.
И последнее применяется внутри тега table . Вы можете пропустить написание тегов tr и td если у них есть class или id, и Emmet автоматически добавит их для вас.
Эммет - лучшие трюки CSS
После того, как вы изучите некоторые трюки HTML, пришло время CSS. Некоторые из общих символов, показанных на верхнем изображении, не будут работать с CSS. Они больше > и поднимаются вверх ^ символов. Если вы используете их, они будут производить как плюс + символ. Итак, поехали.
1. Ширина и высота
Определить width и height с помощью Emmet очень просто. Вам просто нужно написать первое слово из них, а затем размер, который вы хотите добавить. По умолчанию, если вы не укажете единицы измерения, Emmet сгенерирует их с единицей измерения px . Доступный символ единицы измерения - процент % и em .
2. Текст
Есть несколько простых в использовании символов свойств текста, которые будут сгенерированы со значением по умолчанию. ta сгенерирует text-align left значению, td будет text-decoration none значения, а tt станет text-transform со значением в uppercase .
3. Фон
Чтобы добавить фон, просто используйте сокращение bg . Вы можете комбинировать его с bgi чтобы получить background-image, bgc для background-color и bgr для background-repeat . Вы также можете написать bg+ чтобы получить полный список свойств фона.
4. Лицо шрифта
Знак плюс применим не только к фону. Для @font-face вы можете просто написать @f+ для получения полного списка свойств @font-face . Если вы @f без знака плюс, вы получите только базовый @font-face .
5. Разное
Другие замечательные трюки, вы можете сократить animation с помощью animation текста. Если вы добавите знак минус, вы получите свойство анимации с полным значением. Существует также текст @kf который выдаст полный список @keyframe .
Заключение
Emmet - это огромный инструмент, позволяющий сэкономить время и оптимизировать процесс разработки. Если вы просто знаете Эммета, еще не поздно попробовать это сейчас. Эти трюки - лишь некоторые из особенностей Эммета. В Emmet есть множество других символов и синтаксиса, особенно для CSS. Просто перейдите к документам Emmet или шпаргалке, чтобы продолжить чтение.
