Emmet, cunoscut anterior sub numele de Zen Coding, este unul dintre cele mai bune instrumente pe care trebuie să le aveți pentru a crește productivitatea în timp ce codați HTML sau CSS. Funcționează exact ca terminarea codului, dar este mai puternic și mai uimitor. Este capabil să vă automatizeze HTML / CSS dintr-un formular simplu în unul complex.
Emmet oferă un suport bun pentru editorul de text sau IDE (Mediu de dezvoltare integrat), cum ar fi Dreamweaver, Eclipse, Sublime Text, TextMate, Expresso, Coda, Brackets, Notepad ++, PHPStorm și multe altele. De asemenea, suportă un instrument de editare online cum ar fi JSFiddle, JSBin, CodePen, IceCoder și Codio .
Modul de lucru al lui Emmet este prin tastarea cheii de tastă de la tastatură când ați terminat scrierea sintaxei. Următoarele sunt cele mai comune simboluri Emmet pe care le puteți utiliza. Pentru a le vedea în acțiune, vă rugăm să continuați să citiți.
Emmet - HTML cele mai bune trucuri
Veți fi uimit când scrieți HTML cu Emmet ca și mine. Așa cum am spus mai devreme, Emmet este capabil să abreviată un simplu HTML la unul foarte complex. Și sunt scrise doar pe o singură linie de cod. În mod implicit, dacă abreviați numele de etichetă necunoscut, Emmet va scrie automat eticheta pe care o scrieți. Vedeți animația de mai jos pentru a înțelege cu ușurință.
1. Cuibul
Pentru a asambla anumite elemente, trebuie doar să adăugați un semn mai mare > după fiecare etichetă pe care doriți să o utilizați. De exemplu, când vreau să am un header cu nav, div, ul și li în interiorul meu, trebuie doar să tastați header>nav>div>ul>li și cheia tab-ului.
2. Sibling
Dacă nu doriți să vă cuipeți elementele, puteți folosi pur și simplu un semn plus + urmat de etichetele pe care doriți să le adăugați. Exemplu, header+section+article+footer va da un loc diferit pentru header, section, article și footer .
3. Urcați în sus
Când vă aflați în interiorul unui element copil și doriți să aveți un alt element în afara acelui copil, puteți urca cu ușurință un element cu semnul ^ . Dacă tastați de două ori, atunci veți urca dublu element și așa mai departe. De exemplu, dacă introduceți header>div>h1>nav veți avea elementul nav încă în h1. Pentru ao scoate, înlocuiți ultimul semn cu ^ .
4. Adăugați Clasa
Emmet este de asemenea capabil să includă numele dvs. de clasă preferat în etichetă. Semnul pe care îl veți folosi este același ca selectorul de clasă în CSS care este un punct . semn. De exemplu, dacă vreau să am un div cu clasa .container, h1 cu .title și nav cu .fixed, atunci trebuie doar să scriu div.container>header>h1.title+nav.fixed .
Dacă doriți să aveți mai mult de o clasă înăuntru, introduceți clasa suplimentară după prima clasă împreună cu punctul . semn. Exemplu: div.container.center va produce .
5. Adăugați un ID
Pe lângă clasă, puteți adăuga un ID în etichetă cu # semn. Utilizarea este aceeași ca adăugarea de clasă, dar nu este posibil să introduceți codul dublu înăuntru. Dacă încercați să faceți acest lucru, Emmet va citi numai ultima identificare pe care o tastați.
6. Adăugați text
Emmet nu este doar atât de simplu, ci doar abrevierea unor etichete, chiar dacă adăugați linii de text înăuntru. Pentru a adăuga un text, trebuie doar să înfășurați textul cu semnul curbat {} . Nu este necesar să adăugați un semn > mai mare, deoarece textul va fi adăugat automat în interiorul etichetei.
7. Adăugați atributul
Dacă doriți să adăugați un alt atribut în afară de clasă și id, trebuie doar să atribuiți atributul pe care doriți să îl adăugați în interiorul coloanei [] . De exemplu, vreau să am o imagine care să aibă sigla logo.png cu sigla alt, așa că am img[src="logo.png"] .
8. Gruparea
Când doriți să aveți un element cu mai multe imbricate în interior, atunci gruparea acestora cu semn () vă va ajuta să obțineți acest lucru cu ușurință. Exemplu, vreau să am un container care are antetul cu h1 și nav în interiorul și o altă secțiune în afara antetului, voi scrie pur și simplu: .container>(header>h1+nav.fixed)+(section>.content+.sidebar) .
9. Înmulțirea
Această caracteristică poate deveni una dintre preferatele dvs. de la Emmet. Ca și în cazul multiplicării, putem multiplica orice element cât de mult ne dorim. Pentru ao folosi, pur și simplu adăugați un semn * după elementul pe care doriți să îl multiplicați și adăugați numărul elementului. De exemplu, vreau să scriu cinci litri în interiorul ul, apoi sintaxa corectă este ul>li*5 .
10. Numerotare automată
Numerotarea automată vă va ajuta să scrieți cu ușurință nume diferite cu numărul în creștere. Sintaxa corectă pentru această caracteristică este un semn de dolar $ . Numerotarea automată este cel mai bine folosită la înmulțire. Exemplu, vreau să adaug articolul meu precedent li cu o clasă de la item1 la item5 . Deci, trebuie doar să adaug un nume de clasă suplimentar cu semnul dolar: ul>li.item$*5 .
11. Lorem
Dacă ați folosit pentru a scrie un text fals prin deschiderea lipsum generator ca lipsum.com, cu Emmet nu mai trebuie să o facă. Emmet susține, de asemenea, generatorul de text fals cu sintaxă lorem sau lipsum . De asemenea, puteți specifica cât timp va deveni textul dvs. De exemplu, vreau să am un text cu lungimea de 10 cuvinte, apoi voi scrie lorem10 .
12. Documentul Auto
Când începeți un nou proiect, în loc să scrieți manual structura html sau să copiați lipirea de alte resurse, Emmet vă poate face mai bine. Tot ce trebuie să faceți este să tastați un exclamator ! semn, lovit tab și magia se întâmplă. Aceasta va genera pentru dvs. o structură de document HTML5, dacă doriți să utilizați un cod HTML4, atunci trebuie doar să tastați html:4t .
13. Legătură
Dacă aveți un fișier CSS favicon, rss sau extern pe care doriți să îl adăugați la document, puteți utiliza trucuri de link-uri pentru a le scrie mai repede. Pentru a include un link:favicon favicon, tip link:favicon atunci acesta va genera o legătură favicon cu numele de fișier implicit favicon.ico în interiorul. Și pentru css, link:css va genera o legătură CSS cu numele de stil implicit style.css în interiorul. Și RSS va fi rss.xml ca nume implicit.
Puteți să le combinați cu semnul plus + pentru a genera resurse mai rapide.
14. Ancora
În mod implicit, când introduceți a etichetă, apoi apăsați pe fila, veți obține a etichetă completă cu atributul href înăuntru. Dar puteți adăuga o valoare // dacă o combinați cu link-ul de exemplu a:link Și dacă doriți să aveți o legătură de poștă electronică în schimb, utilizați a:mail .
15. Scăderea inteligentă
Ultimele trucuri HTML pe care vi le voi oferi este funcția de sărituri inteligente. Practic, nu ai scris numele etichetei când vrei să ai clasă sau id în interiorul ei. Acest lucru se aplică numai în anumite condiții.
În primul rând, dacă doriți să aveți un div cu ID sau clasă înăuntru, nu este necesar să scrieți numele etichetei, ci să scrieți direct numele de simbol sau simbol de clasă împreună cu numele acestuia.
În al doilea rând, când vă aflați în interiorul unei etichete ul, treceți peste scrierea etichetei li dacă are o clasă sau un id.
Și ultima este aplicată în tag-ul table . Puteți să săriți scrierea tagurilor tr și td dacă au clasă sau id și Emmet le va adăuga automat pentru tine.
Emmet - Cele mai bune trucuri CSS
După ce aflați câteva dintre trucurile HTML, acum este timpul pentru CSS. Unele simboluri comune afișate în imaginea de sus nu vor funcționa cu CSS. Ele sunt mai mari > și urcă în sus ^ simboluri. Dacă îi folosiți, ei vor produce exact simbolul plus + . Deci, hai să mergem.
1. Lățime și înălțime
Definirea width și height cu Emmet este foarte ușoară. Trebuie doar să scrieți primul cuvânt, urmat de dimensiunea pe care doriți să o adăugați. În mod implicit, dacă nu specificați unitățile, Emmet le va genera cu o unitate de px . Simbolul unității disponibile este % și em .
2. Text
Există câteva simboluri de proprietate text ușor de folosit și vor fi generate cu valoarea implicită. ta va genera text-align cu valoarea left, td va fi text-decoration cu valoare zero și tt va deveni text-transform cu valoare uppercase .
3. Contextul
Pentru a adăuga fundal, pur și simplu utilizați abrevierea bg . Puteți să-l combinați cu bgi pentru a obține background-image de background-color, bgc pentru background-color de background-repeat și bgr pentru background-repeat . De asemenea, puteți scrie bg+ pentru a obține o listă completă a proprietății de fundal.
4. Font Face
Semnul plus nu este doar aplicabil pentru fundal. Pentru @font-face, puteți scrie @f+ pentru o listă completă a proprietății @font-face . Dacă tastați @f f fără semnul plus, atunci veți obține doar un @f bază @font-face .
5. Diverse
Alte trucuri excelente sunt abrevieri în scrierea de animation cu text animation . Dacă adăugați un semn minus, veți obține proprietatea de animație cu valoare completă. Există, de asemenea, textul @kf care va produce o listă completă a @keyframe .
Concluzie
Emmet este un instrument foarte uriaș de economisire a timpului pentru a vă eficientiza procesul de dezvoltare. Dacă îl cunoști pe Emmet, nu este prea târziu să o încerci acum. Aceste trucuri sunt doar câteva dintre caracteristicile lui Emmet. Există multe alte simboluri și sintaxe în Emmet, mai ales pentru CSS. Trebuie doar să vă îndreptați spre docul Emmet sau să înșeleți foaia pentru a vă continua citirea.
![social media - Schimbarea tendințelor pe Internet în 2011 [Infographic]](https://gadget-info.com/img/social-media/810/sharing-trends-internet-2011-2.jpg)