Емет, известен също като Zen Coding - е най-ефективният приставката за бързо писане на HTML и CSS код, който някога е съществувал. Благодарение на него, от прости изрази, може да генерира блок от код. Емет, в този контекст, обещава да бъде още по-добре и по-удобно.
Как Емет?
HTML съкращения
инициализатори
Вземете най-основната структура на HTML документ вече може да бъде по-малко от една секунда. Напиши съкращение HTML: 5 или лесно. натиснете Tab, и в един момент ще видите пълният код база с HTML5 на типа на документа.
- HTML: 5 или. - HTML5
- HTML: XT - XHTML преходен
- HTML: 4s - HTML4 строг
Добавянето на класове, идентификационни Ниш, текст и атрибути
Емет, защото синтаксисът е много подобен на CSS селектори, а след това да разбера как да го използвате, много лесно. Опитват да експериментират с някакъв елемент (например, п) и на идентификатора (например описание р #)
Също така можете да комбинирате класове и документи за самоличност. Например, p.bar # Фу експресия става:
Сега нека видим как да добавите текст и атрибут. С цел да се установи елемента на някакъв текст, напишете стойността му в скоби. Например H1 трансформира в:
Квадратни скоби са използвани, за да добавите атрибути и техните стойности. Например, [HREF = #] трансформира в:
гнездене елементи
Благодарение на Емет и синтаксис на писане вложени изрази, Вие можете напълно да се създаде пълен HTML документ се използва същата абревиатура. Елементът родител е поставен в предната част на знак>, както и всички вътрешни компоненти трябва да преминат след него. + Влезте за свързване на определен брой съкращения, така че генерираният код ще отиде след една от друга. Новият оператор под знака ~ нека обърнем внимание на едно ниво по-високо.
група
Той често може да бъде малко объркващо, когато пишете големи съкращения. За да се избегне това, можете да използвате групиране. Например, (.foo> h1) +. (Bar> Н2) е:
Имената Смяна тагове
За да създадете Разделение блок с елемента от клас, достатъчно, за да конвертирате съкращение div.item.
В миналото, пишат подобни изрази са опростени. Например, за да се получи същото
. Може да се напише съкращението .item. Емет в това отношение е още по-напреднали. Сега плъгин може автоматично да се определи кой маркер трябва да бъде заместен в зависимост от родител. Т.е. ако ние се превърне .item съкращение вътре в списъка- . съкращението ще се превърне в . вместо . както е било преди.
- Ли за ул и ол
- TR за маса, tbody, врекламния и tfoot
- ТД на TR
- възможност за избор и optgroup
Ето още малко мамят лист:
Също така, с помощта на знака *. можете да определите колко време, за да въведете желаната позиция. Така, съкращението UL> Li * 3 се превръща в:
Какво ще кажете за комбинация от оператора на умножение и номерация? Няма проблем! Просто сложете знака $ в края на името на атрибут или елемент, и вие ще бъдете щастливи! Например, ул> li.item $ * 3 се превърне в:
Опитайте го сами!
CSS съкращения
Емет е предназначен за опростяване на писането, не само HTML, но и CSS кода. Например, искате да зададете ширината на елемент. За да направите това, просто напишете W100:
Значение пиксела инсталира по подразбиране. За други единици, използвайте специални символи. Например h10p + m5e:
Списък на възможните стойности:
допълнителни опции
Например, като се използва експресионен @f. можете да получите кода:
В този случай, могат да се добавят опциите като фон изображение, граничен радиус, шрифт, @ различни видове шрифтове, текст светлини, текст-сянка, ако изразът авторството на знака +. Например, @ е + се превръща в:
автоматично търсене
Емет също да търсите желаната стойност, ако не сте съвсем вярно писмено изразяване. Приставката ще изглежда много подобен израз, например, съкращения ов: Н, OVH, OVH и о превръща в същия код:
CSS3 представки
CSS3 сигурност е много стръмен, но не забравяйте, всички съществуващи префикс е просто невъзможно! Е, не! Емет и там ще ни помогне. Например, думата ще бъде преобразувана в TRS:
Също така можете да зададете своите представки. Например, -super-Фу става:
Какво става, ако имате нужда от само няколко от съществуващите представки? Няма проблем, просто въведете първите букви на имената им: -wm-РФ се превръща в:
Ако говорим за CSS3, градиентите не могат да бъдат избегнати. Всички тези сложни изрази, които ви пишат на ръка, могат да бъдат заменени от една единствена съкращение. Например, LG (отляво, #fff 50%, # 000) се превръща в:
допълнителните функции
Lorem Ipsum
С Емет, можете да забравите за онлайн услугата Lorem Ipsum. Сега има специална абревиатура: Lorem Ipsum или. Можете също така да определите колко думи искате да генерирате. Например, lorem10 превръща в:
Lorem Ipsum може да се смесва с други елементи. Например, р * 3> lorem5:
Персонализиране на
Емет ни дава възможност да се промени на широка гама от сменяеми настройки. За да направите това, трябва да редактирате три файла:
За да добавите нов израз или да редактирате съществуващ файл, редактиране snippets.json
За превръщането на филтрите и действията, които можете да променяте preferences.json на файла
За да контролирате показването на HTML и XML код, редактирате syntaxProfiles.json на файла
Официалната страница на приставката може да се намери тук. Също така на документация ваше разположение и детско креватче
А какво ще кажете?
Използвате ли този плъгин? Ако това е така, какви са вашите любими парчета? Споделете опита си!
До получаване на информация от два канала (зрение и слух) на ефективността на обучението далеч по-добър живот от книги. А домашните задачи и онлайн тестове ще ви позволи да мисля постоянно в целевия език и веднага провери знанията си!
Ако искате по-дълго време, за да проучи как да се HTML, че ме има, за което трябва добра новина!
Ако вече сте се научили HTML и искат да се движи напред, следващата стъпка ще бъде да се проучи CSS технологията.
Ако искате да се разбере концепцията на домейн и хостинг, да научат как да се създаде база данни, да качвате файлове към уеб сайт чрез FTP сървър, създаване на поддомейни, да конфигурирате пощенските кутии за сайта и мониторинг на посещаемостта, този курс е разработен специално за вас!
Свързани статии