Joshua Davis
0 
1515
122
Emmet, tidligere kjent som Zen Coding, er et av de beste verktøyene du må ha for å øke produktiviteten mens du koder HTML eller CSS. Det fungerer akkurat som fullføring av kode, men det er kraftigere og utrolig. Den er i stand til å automatisere HTML / CSS fra en enkel form til den komplekse.
Emmet tilbyr god støtte for tekstredigerer eller IDE (Integrated Development Environment) som Dreamweaver, Eclipse, Sublime Text, TextMate, Expresso, Coda, Brackets, Notepad ++, PHPStorm og mange flere. Det støtter også online redigeringsverktøy som JSFiddle, JSBin, CodePen, IceCoder og CODIO.
Måten Emmet fungerer er ved å skrive inn tastaturetasten for fanen når du er ferdig med å skrive syntaks. Følgende er vanligste Emmet-symboler som du kan bruke. For å se dem i aksjon, fortsett å lese.
Emmet - HTML beste triks
Du vil bli overrasket når du skriver HTML med Emmet som jeg gjorde. Som nevnt tidligere, er Emmet i stand til å forkorte en enkel HTML til veldig kompleks. Og de er bare skrevet på en enkelt kodelinje. Hvis du forkorter ukjent tagnavn, vil Emmet automatisk skrive koden du skriver. Se animasjonen nedenfor for å enkelt forstå det.
1. Hekker
For å hekke noen elementer trenger du bare å legge til større skilt > etter hver tagg du vil bruke. For eksempel når jeg vil ha en Overskrift med nav, div, ul og li inne trenger jeg bare å skrive header> nav> div> ul> li og trefftasten.
2. Søsken
Hvis du ikke vil hekke elementene dine, kan du ganske enkelt bruke et pluss + tegn etterfulgt av koder du vil legge til. Eksempel, header seksjon + + + artikkelbunn vil gi et annet sted for Overskrift, seksjon, artikkel og bunntekst.
3. Klatre opp
Når du er inne i et barnelement og vil ha et annet element utenfor det barnet, kan du enkelt klatre opp ett element med ^ skilt. Hvis du skriver det to ganger, vil du klatre med dobbelt element og så videre. Hvis du for eksempel skriver header> div> h1> nav du vil ha nav-elementet fremdeles inne i h1. For å få det ut, bytt bare ut det siste > signere med ^.
4. Legg til klasse
Emmet kan også inkludere det foretrukne klassenavnet i koden. Skiltet du bruker er det samme som klassevalg i CSS som er en prikk . skilt. Hvis jeg for eksempel vil ha en div med .container klasse, h1 med .tittel og nav med .fikset, da må jeg bare skrive div.container> header> h1.title + nav.fixed.
Hvis du vil ha mer enn en klasse inne, skriver du tilleggsklassen etter den første klassen sammen med prikken . skilt. Eksempel: div.container.center vil produsere .
5. Legg til ID
Foruten klasse, kan du også legge til en ID i taggen din med # skilt. Bruken er den samme som å legge til klasse, men det er ikke sikkert at du skriver dobbelt ID inne. Hvis du prøver å gjøre det, vil Emmet bare lese den siste IDen du skriver.
6. Legg til tekst
Emmet er ikke bare så enkelt som bare å forkorte noen tagger, du kan til og med legge tekstlinje inne. For å legge til litt tekst, må du bare pakke teksten med krøllete braketter skilt. Du trenger ikke å legge til en større > signere da teksten automatisk legges til i koden.
7. Legg til attributt
Hvis du vil legge til et annet attributt bortsett fra klasse og ID, plasserer du bare attributtet du vil legge til inne i braketten [] skilt. For eksempel vil jeg ha et bilde som har logo.png-kilde med logo alt, så jeg skriver bare img [src = "logo.png"].
8. Gruppering
Når du vil ha et element med flere nestede inni, så grupperer du dem med () skilt vil hjelpe deg å oppnå dette enkelt. Eksempel, jeg vil ha en beholder som har header med h1 og nav inni og en annen seksjon utenfor overskriften. Jeg vil ganske enkelt skrive: .Beholderen> (heading> h1 + nav.fixed) + (seksjon> .content + .sidebar).
9. Multiplikasjon
Denne funksjonen kan bli en av favorittene dine fra Emmet. Som med multiplikasjon, kan vi multiplisere ethvert element så mye vi vil. For å bruke den bare legge til en stjerne * sign etter element du vil multiplisere og legg til elementet. For eksempel vil jeg skrive fem li element i ul, da er den riktige syntaks ul> li * 5.
10. Automatisk nummerering
Automatisk nummerering vil hjelpe deg med å skrive forskjellige navn med økende antall. Den rette syntaks for denne funksjonen er en dollar $ skilt. Automatisk nummerering brukes best med multiplikasjon. Eksempel, jeg vil legge til min forrige li gjenstand med en klasse fra item1 til ITEM5. Så jeg må bare legge til ytterligere klassens navn med dollartegn: ul> li.item $ * 5.
11. Lorem
Hvis du pleide å skrive noe dummy tekst ved å åpne lipsum generator som lipsum.com, med Emmet trenger du ikke gjøre det lenger. Emmet støtter også dummy tekstgenerator med lorem eller lipsum syntaks. Du kan også spesifisere hvor lang tid teksten din skal bli. For eksempel vil jeg ha litt tekst med 10 ord langt, så skriver jeg inn lorem10.
12. Autodokument
Når du starter et nytt prosjekt, i stedet for å skrive HTML-strukturen manuelt eller kopiere liming fra andre ressurser, kan Emmet gjøre det for deg bedre. Alt du trenger å gjøre er å skrive et utrop ! sign, hit fane og magien skje. Det vil generere en HTML5-dokumentstruktur for deg, hvis du vil bruke en HTML4 i stedet, bare skriv html: 4t.
13. Link
Hvis du har en favoritt-, rss- eller ekstern CSS-fil du vil legge til i dokumentet, kan du bruke lenketriks for å skrive dem raskere. For å inkludere et favicon skriver du link: favicon så vil det generere deg en favorittlink med standard favicon.ico filnavn inne. Og for css, link: css vil generere deg en CSS-kobling med standard style.css stilnavn inne. Og RSS blir det rss.xml som standardnavn.
Du kan kombinere dem med pluss + signere for å generere en raskere ressurs.
14. Anker
Som standard når du skriver en tag deretter trykk fanen, vil du få en komplett en tagg med href attributt inni. Men du kan legge til en http: // verdi hvis du for eksempel kombinerer den med lenke en lenke. Og hvis du vil ha en e-postkobling i stedet, så bruk a: mail.
15. Smart hopping
De siste HTML-triksene jeg vil gi deg er den smarte hoppfunksjonen. I utgangspunktet har du ikke skrevet tagnavnet når du vil ha klasse eller ID inne. Dette gjelder bare under en viss tilstand.
For det første, hvis du vil ha en div med ID eller klasse inne, trenger du ikke å skrive kodenavnet, bare direkte skrive ID eller klassesymbol sammen med navnet.
For det andre når du er inne i et ul tag, du hopper over å skrive li merke hvis den har en klasse eller id.
Og den siste blir brukt innenfor bord stikkord. Du kan hoppe over å skrive tr og td tag hvis de har klasse eller id og Emmet vil automatisk legge dem til for deg.
Emmet - Beste CSS-triks
Etter at du har lært noen av HTML-triks, er det nå på tide med CSS. Noen av de vanlige symbolene som vises i toppbildet, fungerer ikke med CSS. De er større > og klatre opp ^ symboler. Hvis du bruker dem, vil de produsere akkurat som pluss + symbol. Så la oss komme i gang.
1. Bredde og høyde
Definere bredde og høyde med Emmet er veldig enkelt. Du må bare skrive det første ordet av dem etterfulgt av størrelsen du vil legge til. Som standard, hvis du ikke spesifiserer enhetene, vil Emmet generere dem med px enhet. Det tilgjengelige enhetssymbolet er prosent % og em.
2. Tekst
Det er noen enkle å bruke tekstegenskapssymbol og vil bli generert med standardverdi. tA vil generere tekst-Juster med venstre verdi, td vil være text-decoration med ingen verdi og tt vil bli text-transform med stor bokstav verdi.
3. Bakgrunn
For å legge til bakgrunn, bruk ganske enkelt bg forkortelse. Du kan kombinere det med BGI å få bakgrunnsbilde, BGC til bakgrunnsfarge og BGR til background-repeat. Du kan også skrive bg+ for å få en fullstendig liste over bakgrunnseiendommer.
4. Font Face
Plustegnet gjelder ikke bare for bakgrunn. Til @ Font-face, du kan ganske enkelt skrive @f+ for en komplett liste over @ Font-face eiendom. Hvis du skriver @f uten pluss tegn, så får du en grunnleggende @ Font-face kun.
5. Diverse
Andre gode triks er at du kan forkorte skriving animasjon med anim tekst. Hvis du legger til et minus - signere, får du animasjonsegenskap med full verdi. Det er også @kf tekst som vil produsere full liste over @keyframe.
SE OGSÅ: Topp 15 gratis PHP-rammer for 2015
Konklusjon
Emmet er et veldig enormt tidsbesparende verktøy for å effektivisere utviklingsprosessen. Hvis du bare kjenner Emmet, er det ikke for sent å prøve det nå. Disse triksene er bare noen av Emmet-funksjonene. Det er mange andre symboler og syntaks i Emmet, spesielt for CSS. Bare gå over til Emmet docs eller jukseark for å øke lesningen.