Emmet, cunoscut și sub numele de codificare Zen, este cel mai eficient plug-in pentru scrierea rapidă a codului HTML și CSS care a existat vreodată. Datorită acesteia, puteți genera un întreg bloc de cod dintr-o expresie simplă. Emmet, în această privință, promite să fie și mai bun și mai convenabil.
Cum acționează Emmet?
Abrevieri HTML
initializatori
Obțineți structura de bază a documentului HTML acum în mai puțin de o secundă. Scrie abrevierea html: 5 sau pur și simplu. Apăsați tasta Tab și după o clipă veți vedea un cod de bază complet cu pre-HTML HTML5.
- html: 5 sau. - HTML5
- html: xt - XHTML de tranziție
- html: 4s - strict HTML4
Adăugarea de clase, id-uri, text și atribute
Deoarece sintaxa Emmet este foarte asemănătoare cu selectorii CSS, este foarte ușor să înțelegi cum să o folosești. Încercați să experimentați un element (de exemplu, p) și un identificator (de exemplu, descrierea p #)
De asemenea, puteți combina clasele și identificatorii. De exemplu, expresia p.bar # foo se va schimba la:
Acum, să vedem cum să adăugăm text și atribut. Pentru a specifica un element al unui text, valoarea acestuia este scrisă în paranteze curbate. De exemplu, h1 este convertit la:
Parantezele pătrate sunt folosite pentru a adăuga atribute și valorile acestora. De exemplu, un [href = #] va fi convertit în:
Nesting de elemente
Datorită lui Emmet și a sintaxei de scriere a expresiilor imbricate, puteți crea pe deplin un document html cu drepturi depline folosind o abreviere. Elementul părinte este plasat înaintea semnalului>, iar toate elementele interne trebuie să îl urmeze. Semnul + vă permite să vă alăturați mai multor abrevieri, astfel încât codul generat să meargă una după alta. Un nou operator aflat sub semnul ^ vă permite să vă deplasați cu un nivel mai ridicat.
grup
Puteți obține adesea o mică confuzie atunci când scrieți abrevieri mari. Pentru a evita acest lucru, puteți utiliza gruparea. De exemplu, (.foo> h1) + (.Bar> h2) este convertit în:
Înlocuirea numelor de etichete
Pentru a crea un bloc div cu un element de clasă, este suficient să convertiți div.item abrevierea.
În trecut, scrierea unor astfel de expresii a fost simplificată. De exemplu, pentru a obține același lucru
. a fost posibil să se scrie abrevierea .itm. Emmet în această privință a devenit și mai avansat. Pluginul poate determina automat ce etichetă trebuie înlocuită în funcție de părinte. Ie dacă convertim abrevierea .itm din listă- . atunci abrevierea se va transforma în . în loc de . așa cum a fost înainte.
- li pentru ul și ol
- tr pentru masa, pentru tata, pentru tad si pentru tafot
- td pentru tr
- opțiune pentru selectare și optgroup
-
Elementele de bază ale codării zen - totul despre programarea web
-
Vom accelera scrierea html și css cu emmet (anterior zen coding), făcând site-ul simplu!
Aici este un pătuț mic:
De asemenea, cu ajutorul *. puteți stabili de câte ori este imprimat elementul dorit. Astfel, abrevierea ul> li * 3 este convertită la:
Cât despre combinația operatorului de multiplicare și de numerotare? Da, nu există probleme! Pur și simplu puneți un semn $ la sfârșitul numelui atributului sau elementului și veți fi fericit! De exemplu, ul> li.itm $ * 3 se va transforma în:
Încearcă-te singur!
Abrevieri CSS
Emmet este conceput pentru a simplifica scrierea nu numai a codului HTML, ci și a codului CSS. De exemplu, doriți să setați lățimea unui element. Pentru a face acest lucru, scrieți doar w100:
Valoarea px este setată implicit. Pentru o unitate de măsură diferită, utilizați simboluri speciale. De exemplu, h10p + m5e:
Lista valorilor posibile:
Opțiuni suplimentare
De exemplu, utilizând expresia @f. puteți obține codul:
În acest caz, pot fi adăugate opțiuni cum ar fi imaginea de fundal, raza marginii, fontul, @ font-face, text-outline, text-shadow dacă caracterul + este atribuit expresiei. De exemplu, @ f + este convertit la:
Căutare automată
De asemenea, Emmet poate căuta valoarea corectă dacă nu ați scris corect expresia. Pluginul va căuta cea mai asemănătoare expresie: de exemplu, abrevierile ov: h, ov-h, ovh și oh sunt convertite în același cod:
Prefixele CSS3
CSS3, desigur, este foarte cool, dar este imposibil să vă amintiți toate prefixele existente! Ei bine, nu! Emmet ne va ajuta aici. De exemplu, cuvântul trs va fi convertit în:
De asemenea, vă puteți atribui prefixele. De exemplu, -super-foo va fi convertit în:
Ce se întâmplă dacă aveți nevoie doar de câteva dintre prefixele existente? Nici o problemă, specificați doar primele litere ale numelor lor: -wm-trf este convertit la:
Dacă vorbim de CSS3, nu putem trece peste gradienti. Toate acele expresii complexe pe care le-ai scris manual pot fi înlocuite cu o abreviere. De exemplu, lg (stânga, #fff 50%, # 000) este convertit în:
Caracteristici suplimentare
Lorem Ipsum
Cu Emmet, puteți uita de serviciul online Lorem Ipsum. Acum pentru aceasta există o abreviere specială: lorem sau ipsum. De asemenea, puteți specifica câte cuvinte să generați. De exemplu, lorem10 este convertit în:
De asemenea, lorem ipsum poate fi amestecat cu alte elemente. De exemplu, p * 3> lorem5:
Personalizare pentru tine
Emmet ne dă posibilitatea de a schimba o gamă largă de setări de pluginuri. Pentru a face acest lucru, va trebui să editați trei fișiere:
Pentru a adăuga o nouă expresie sau a schimba o expresie nouă, editați fișierul snippets.json
Pentru a converti munca filtrelor și a acțiunilor, încercați să schimbați fișierul preferences.json
Pentru a controla afișarea codului HTML și XML, editați fișierul syntaxProfiles.json
Pagina oficială a pluginului poate fi găsită aici. Documentația și o foaie de înșelătorie sunt, de asemenea, la dispoziția dumneavoastră.
Și ce spui?
Folosești acest plugin? Dacă da, care sunt cipurile tale preferate? Împărtășește experiența ta!
Prin obținerea de informații imediat prin două canale (vedere și auz), eficiența predării este mult mai mare decât învățarea din cărți. Și temele și testele online vă vor permite să gândiți în mod constant în limba pe care o învățați și să vă verificați imediat cunoștințele!
Dacă doriți să învățați HTML mult timp, atunci am o veste bună pentru dvs.!
Dacă ați învățat deja HTML și doriți să treceți mai departe, următorul pas este să învățați tehnologia CSS.
Dacă doriți să înțeleagă conceptele de domeniu si hosting, învață cum să creeze o bază de date, încărca fișiere pe un site web prin intermediul unui server FTP, crea subdomenii, configurați cutiile poștale pentru site-ul și să monitorizeze participarea, acest curs este conceput special pentru tine!
Articole similare
Trimiteți-le prietenilor: