Emmet, joka tunnetaan aiemmin nimellä Zen Coding, on yksi parhaista työkaluista, joita sinun pitäisi lisätä tuottavuuttasi HTML- tai CSS-koodin koodauksessa. Se toimii aivan kuten koodin valmistuminen, mutta se on tehokkaampi ja hämmästyttävämpi. Se pystyy automatisoimaan HTML / CSS-koodin yksinkertaisesta lomakkeesta monimutkaiseksi.
Emmet tarjoaa hyvää tukea tekstieditorille tai IDE (Integrated Development Environment), kuten Dreamweaver, Eclipse, Sublime Text, TextMate, Expresso, Coda, Brackets, Notepad ++, PHPStorm ja paljon muuta. Se tukee myös online-muokkaustyökalua, kuten JSFiddle, JSBin, CodePen, IceCoder ja Codio .
Emmetin tapa on kirjoittamalla välilehden näppäimistön näppäin, kun kirjoitat syntaksia. Seuraavat ovat yleisimpiä Emmet-symboleja, joita voit käyttää. Jos haluat nähdä ne toiminnassa, jatka lukemista.
Emmet - HTML-parhaat temput
Tulet hämmästymään, kun kirjoitat HTML-koodia Emmetin kanssa. Kuten aiemmin todettiin, Emmet pystyy lyhentämään yksinkertaisen HTML: n erittäin monimutkaiseksi. Ja ne on kirjoitettu vain yhdellä koodirivillä. Oletusarvoisesti, jos lyhennät tuntemattoman tunnisteen nimen, Emmet kirjoittaa automaattisesti kirjoittamasi tunnisteen. Katso alla oleva animaatio, jotta voit ymmärtää sen helposti.
1. Pesä
Jotta voit sijoittaa joitakin elementtejä, sinun on vain lisättävä suurempi merkki > jokaisen haluamasi tunnuksen jälkeen. Esimerkiksi, kun haluan olla header jossa on nav, div, ul ja li sisällä, täytyy vain kirjoittaa header>nav>div>ul>li ja osuma-välilehti.
2. Sisar
Jos et halua sijoittaa elementtejäsi, voit yksinkertaisesti käyttää plus + -merkkiä ja sen jälkeen merkkejä, joita haluat lisätä. Esimerkiksi header+section+article+footer antaa eri sijainnin header, section, article ja footer .
3. Kiipeä ylös
Kun olet lapsielementin sisällä ja haluat saada toisen elementin lapsen ulkopuolelle, voit helposti kiivetä yhteen elementtiin ^ -merkillä. Jos kirjoitat sen kahdesti, nouset kaksoiselementtiin ja niin edelleen. Jos esimerkiksi kirjoitat header>div>h1>nav voit siirtää nav-elementin h1: n sisällä. Jos haluat poistaa sen, vaihda viimeinen > merkki ^ -merkillä.
4. Lisää luokka
Emmet voi myös sisällyttää haluamasi luokan nimen tunnisteeseen. Käytettävä merkki on sama kuin CSS: n luokkavalitsin, joka on piste . merkki. Esimerkiksi, jos haluan olla div .container luokka, h1 jossa on .fixed ja nav .fixed, niin minun täytyy vain kirjoittaa div.container>header>h1.title+nav.fixed .
Jos haluat sisälle useamman kuin yhden luokan, kirjoita lisäluokka ensimmäisen luokan jälkeen pisteellä . merkki. Esimerkki: div.container.center tuottaa .
5. Lisää tunnus
Luokan lisäksi voit lisätä tunnuksen tunnisteeseen myös # -merkillä. Käyttö on sama kuin luokan lisääminen, mutta et voi kirjoittaa kaksois-ID: tä. Jos yrität tehdä niin, Emmet lukee vain viimeksi kirjoittamasi tunnuksen.
6. Lisää teksti
Emmet ei ole vain yksinkertainen kuin vain lyhentää joitakin tunnisteita, voit jopa lisätä tekstirivin sisällä. Jos haluat lisätä tekstiä, sinun täytyy vain kääriä tekstiä kierteellä {} merkillä. Sinun ei tarvitse lisätä suurempaa merkkiä, kun teksti lisätään automaattisesti tunnisteen sisällä.
7. Lisää määrite
Jos haluat lisätä toisen ominaisuuden lukuun ottamatta luokkaa ja tunnusta, vain paikka-attribuutti, jonka haluat lisätä sisäpuolelle [] -merkin. Haluan esimerkiksi saada kuvan, jossa on logo.png-lähde logolla alt, joten kirjoitan vain img[src="logo.png"] .
8. Ryhmittely
Kun haluat, että elementti, jossa on useita sisäkkäisiä sisäkkäisiä elementtejä, on ryhmiteltävä merkillä () voit helposti saavuttaa tämän. Esimerkiksi haluan, että säiliö, jossa on otsikko, jossa on h1 ja nav sisällä ja toinen osa otsikon ulkopuolella, kirjoitan yksinkertaisesti: .container>(header>h1+nav.fixed)+(section>.content+.sidebar) .
9. Kertominen
Tämä ominaisuus voi olla yksi Emmetin suosikkeista. Kuten kertomalla, voimme moninkertaistaa minkä tahansa elementin niin paljon kuin haluamme. Voit käyttää sitä yksinkertaisesti lisäämällä tähti * -merkin sen jälkeen, kun haluat lisätä ja lisätä elementin numeron. Haluan esimerkiksi kirjoittaa viisi li-kohtaa ul: n sisällä, sitten oikea syntaksi on ul>li*5 .
10. Automaattinen numerointi
Automaattinen numerointi auttaa sinua kirjoittamaan eri nimiä helposti kasvavalla määrällä. Oikea syntaksi tätä ominaisuutta varten on dollarin $ -merkki. Automaattista numerointia käytetään parhaiten kertomalla. Esimerkiksi haluan lisätä edellisen li kohdan, jossa on luokka kohdasta1 kohteeseen5. Joten, minun on vain lisättävä ylimääräistä luokan nimeä dollarin merkillä: ul>li.item$*5 .
11. Lorem
Jos kirjoitit jotakin nuken tekstiä avaamalla lipsum-generaattorin kuten lipsum.com, Emmetin kanssa sinun ei tarvitse enää tehdä sitä. Emmet tukee myös dummy-tekstigeneraattoria lorem tai lipsum syntaksilla. Voit myös määrittää, kuinka kauan tekstisi tulee. Haluan esimerkiksi, että tekstissä on 10 sanaa pitkä, sitten kirjoitan lorem10 .
12. Automaattinen asiakirja
Kun aloitat uuden projektin, sen sijaan, että kirjoittaisit html-rakenteen manuaalisesti tai kopioit liitää muista resursseista, Emmet voi tehdä sen paremmin sinulle. Sinun tarvitsee vain kirjoittaa huutomerkki ! merkki, osuma-välilehti ja taika tapahtuvat. Se luo sinulle HTML5-dokumenttirakenteen, jos haluat käyttää HTML4- html:4t, kirjoita sitten html:4t .
13. Linkki
Jos sinulla on favicon-, rss- tai ulkoinen CSS-tiedosto, jonka haluat lisätä asiakirjaasi, voit kirjoittaa linkkien temppuja kirjoittamaan ne nopeammin. Jos haluat lisätä faviconin, kirjoita link:favicon sitten se luo sinulle favicon-linkin, jossa on oletusarvoisesti favicon.ico tiedoston nimi. Ja css: lle link:css luo sinulle CSS-linkin, jossa on oletus style.css tyylin nimi. Ja RSS on rss.xml oletusnimeksi.
Voit yhdistää ne plus + -merkillä, jos haluat luoda nopeampia resursseja.
14. Ankkuri
Oletusarvoisesti, kun kirjoitat tagia, napsauta välilehteä, saat täydellisen tunnisteen, jossa on href määrite. Voit kuitenkin lisätä // -arvon, jos yhdistät sen esimerkiksi a:link . Ja jos haluat saada sähköpostilinkin, käytä sitten a:mail .
15. Älykäs ohitus
Viimeiset HTML-temput, joita aion antaa, on älykäs hyppyominaisuus. Periaatteessa sinulla ei ole merkin nimeä, kun haluat olla luokassa tai tunnuksessa. Tämä koskee vain tiettyjä ehtoja.
Ensinnäkin, jos haluat olla ID: n tai luokan sisäinen div, sinun ei tarvitse kirjoittaa tunnisteen nimeä, vaan kirjoita vain id- tai luokan symboli ja sen nimi.
Toiseksi, kun olet ul merkin sisällä, ohitat li merkin kirjoittamisen, jos sillä on luokka tai tunnus.
Ja viimeistä käytetään table tagissa. Voit ohittaa kirjoittamalla tr ja td tunnisteet, jos niillä on luokka tai tunnus, ja Emmet lisää ne automaattisesti sinulle.
Emmet - parhaat CSS-temput
Kun olet oppinut joitakin HTML-temppuja, nyt on aika CSS: lle. Jotkin ylemmässä kuvassa näkyvät yleiset symbolit eivät toimi CSS: n kanssa. Ne ovat suurempia > ja kiivetä ^ symboleja. Jos käytät niitä, ne tuottavat aivan kuten plus + -merkin. Joten, lähdetään.
1. Leveys ja korkeus
width ja height määrittäminen Emmetin kanssa on erittäin helppoa. Sinun tarvitsee vain kirjoittaa ensimmäinen sana, jota seuraa haluamasi koko. Oletusarvoisesti, jos et määritä yksiköitä, Emmet luo ne px yksiköllä. Käytettävissä oleva yksikkösymboli on % ja em .
2. Teksti
On olemassa joitakin helppokäyttöisiä tekstin ominaisuuksien symboleja ja ne luodaan oletusarvolla. ta luo text-align left arvon kanssa, td on text-decoration none arvoa, ja tt muuttuu text-transform uppercase .
3. Taustaa
Jos haluat lisätä taustaa, käytä vain bg lyhennettä. Voit yhdistää sen bgc saadaksesi background-image, bgc : n background-color ja bgc background-repeat . Voit myös kirjoittaa bg+ saadaksesi täydellisen luettelon taustan ominaisuuksista.
4. Kirjasin
Plus-merkki ei sovellu vain taustalle. @font-face -toiminnolla voit yksinkertaisesti kirjoittaa @f+ täydelliseen luetteloon @font-face -ominaisuudesta. Jos kirjoitat @f ilman plusmerkkiä, saat vain @f @font-face .
5. Sekalaiset
Muita hienoja temppuja voit lyhentää kirjoittamisen animation anim tekstillä. Jos lisäät miinusmerkin, saat animaatioominaisuuden täydellä arvolla. On myös @kf teksti, joka tuottaa täydellisen luettelon @keyframe .
johtopäätös
Emmet on erittäin valtava aikaa säästävä työkalu, joka tehostaa kehitysprosessia. Jos tiedät vain Emmetin, ei ole liian myöhäistä kokeilla sitä nyt. Nämä temput ovat vain joitakin Emmetin ominaisuuksia. Emmetissä on paljon muuta symbolia ja syntaksia, erityisesti CSS: lle. Voit vain lukea Emmetin dokumentteja tai huijata arkkia.
