Emmet, korábban Zen Coding néven ismert, a legjobb eszköz, amellyel növelni kell a termelékenységet a HTML vagy CSS kódolásakor. Úgy működik, mint a kód befejezése, de ez erősebb és csodálatosabb. Képes automatizálni a HTML / CSS-t egy egyszerű formából a komplexbe.
Az Emmet jó támogatást nyújt a szövegszerkesztő vagy az IDE (Integrated Development Environment) számára, mint például a Dreamweaver, az Eclipse, a Sublime Text, a TextMate, az Expresso, a Coda, a Brackets, a Notepad ++, a PHPStorm és még sok más. Támogatja az online szerkesztőeszközt, mint a JSFiddle, a JSBin, a CodePen, a IceCoder és a Codio .
Az Emmet munkája az, hogy a szintaxis írásakor beírja a billentyűzet billentyűjét. A leggyakrabban használt Emmet szimbólumok az alábbiak. Ha látni szeretné őket, folytassa az olvasást.
Emmet - HTML legjobb trükkök
Csodálkozni fogsz, amikor HTML-t írsz Emmet-szel, mint én. Amint korábban említettük, Emmet képes egyszerű HTML-t rövidíteni nagyon összetettre. És csak egyetlen kódsoron íródnak. Alapértelmezés szerint, ha rövidíti az ismeretlen címke nevét, az Emmet automatikusan megírja az írott címkét. Tekintse meg az alábbi animációt, hogy könnyen megértse.
1. Fészkelés
Néhány elem fészkeléséhez nagyobb jelet kell hozzáadnia > minden egyes használt címke után. Például, ha egy header akarok elérni a nav, div, ul és li belül, be kell header>nav>div>ul>li és a hit tab billentyűt.
2. Testvér
Ha nem szeretné elhelyezni az elemeket, egyszerűen használjon plusz + jelet, majd a hozzáadni kívánt címkéket. Például a header+section+article+footer egy másik helyet ad a header, a section, a article és a footer .
3. Mássz fel
Ha egy gyermekelem belsejében tartózkodik, és egy másik elemet szeretne elhelyezni a gyermeken kívül, könnyedén mászhat egy elemet a ^ jel segítségével. Ha kétszer írja be, akkor megduplázódik, és így tovább. Ha például beírja a header>div>h1>nav, akkor a Nav elem még mindig a h1 belsejében lesz. Ha ki szeretné kapni, csak az utolsó > jelet cserélje a ^ gombbal.
4. Osztály hozzáadása
Emmet is be tudja venni a kívánt osztálynevet a címkén belül. A használt jel ugyanaz, mint az osztályválasztó a CSS-ben, amely egy pont . jel. Például, ha azt szeretném, hogy egy div .container osztályú div legyen .container és nav .fixed, akkor csak div.container>header>h1.title+nav.fixed kell írni.
Ha egynél több osztályt szeretne belsejében, írja be a további osztályát az első osztály után a ponttal együtt . jel. Példa: div.container.center fog létrehozni .
5. ID hozzáadása
Az osztályon kívül azonosítót is hozzáadhat a címkéhez a # jel segítségével. A használat ugyanaz, mint az osztály hozzáadása, de lehet, hogy nem írja be a dupla azonosítót. Ha ezt megpróbálja megtenni, az Emmet csak a legutóbb megadott azonosítót fogja olvasni.
6. Szöveg hozzáadása
Emmet nem csak olyan egyszerű, mint néhány címke rövidítése, akkor is belehelyezhetsz szöveget. Szöveg hozzáadásához csak a göndör zárójel {} jelzéssel kell ellátnia a szöveget. Nem kell hozzáadni egy nagyobb jelet, mivel a szöveg automatikusan hozzáadódik a címkéhez.
7. Attribútum hozzáadása
Ha másik attribútumot szeretne hozzáadni az osztályon és az iden kívül, csak a hely attribútumot szeretné hozzáadni a belső zárójelhez [] . Például szeretnék egy olyan képet kapni, amely log.png forrással rendelkezik az alt logóval, így csak img[src="logo.png"] .
8. Csoportosítás
Ha több elemet szeretne beágyazni, akkor csoportosítsa őket () jelzéssel. Például azt szeretném, ha egy tartály van, amelynek fejléce van h1-vel, és nem belsejében van, és egy másik szekció a fejlécen kívül, egyszerűen írok: .container>(header>h1+nav.fixed)+(section>.content+.sidebar) .
9. Szorzás
Ez a szolgáltatás az Emmet egyik kedvencévé válhat. A szorzáshoz hasonlóan, minden elemet sokszorosíthatunk, amennyit csak akarunk. Használatához egyszerűen adjon hozzá egy csillag * jelet az elem után, amelyet meg szeretne szorozni, és adja hozzá az elem számát. Például, öt li elemet akarok írni ul-ban, majd a megfelelő szintaxis ul>li*5 .
10. Automatikus számozás
Az automatikus számozás segítségével könnyebben írhat más nevet növekvő számmal. Ennek a funkciónak a helyes szintaxisa dollár $ jel. Az automatikus számozás leginkább a szorzásnál használható. Példa: az előző elemet szeretném hozzáadni egy osztályhoz az 1-es tételtől az 5- item1 tételhez. Szóval, csak további osztálynevet kell hozzáadnom a dollárjelhez: ul>li.item$*5 .
11. Lorem
Ha valamilyen dummy szöveget írtál a lipsum generátor, mint a lipsum.com megnyitásával, akkor Emmet-nek már nem kell többé. Emmet is támogatja a lorem vagy lipsum szintaxisú dummy szöveggenerátort. Azt is megadhatja, hogy mennyi ideig válik a szöveg. Például szeretném, ha 10 szöveges szöveget akarok írni, majd írom az lorem10 .
12. Automatikus dokumentum
Amikor új projektet indít, ahelyett, hogy kézzel írná a html struktúrát, vagy más forrásokból másolna beillesztést, az Emmet jobban megteheti. Csak annyit kell tennie, hogy egy felkiáltójelet ír be ! jel, hit tab és varázslat történik. Ez HTML5 dokumentumstruktúrát hoz létre Önnek, ha HTML4-et szeretne használni, majd írja be a html:4t .
13. Link
Ha van egy favicon, rss vagy külső CSS fájlja, amelyet hozzá szeretne adni a dokumentumhoz, akkor a link trükköket gyorsabban írhatja. A favicon beillesztéséhez írja be a link:favicon majd egy favicon linket hoz létre, amelynek alapértelmezett favicon.ico fájlnév van benne. A css esetében a link:css létrehoz egy CSS hivatkozást az alapértelmezett style.css stílusnévvel. Az RSS az rss.xml lesz az alapértelmezett név.
A gyorsabb erőforrások létrehozásához plusz + jelzéssel kombinálhatók.
14. Horgony
Alapértelmezés szerint, ha beír a címkét, majd nyomja meg a lapot, egy teljes címkét kapsz a href attribútummal. De akkor adhat hozzá // értéket, ha összekapcsolja a linket, például a:link . Ha pedig e-mail címet szeretne, akkor használja a:mail .
15. Intelligens kihagyás
Az utolsó HTML trükkök az intelligens kihagyási funkció. Alapvetően nem írja be a címke nevét, ha osztályba vagy azonosítóba szeretne beletenni. Ez csak bizonyos feltételek esetén érvényes.
Először is, ha egy azonosítóval vagy osztálykal rendelkező div ot szeretnél, akkor nem kell írnod a címke nevét, csak közvetlenül írjunk azonosítót vagy osztályszimbólumot a nevével együtt.
Másodszor, ha egy ul címke belsejében van, kihagyja a li címke írását, ha van osztálya vagy azonosítója.
Az utolsó pedig a table belül kerül alkalmazásra. A tr és td címke írása kihagyható, ha osztályuk vagy azonosítójuk van, és az Emmet automatikusan hozzáadja az Ön számára.
Emmet - a legjobb CSS trükkök
Miután megtanultad néhány HTML trükköt, most itt az ideje a CSS-nek. A felső képen látható néhány közös szimbólum nem fog működni a CSS-sel. Nagyobbak > és mászik fel a ^ szimbólumokat. Ha ezeket használják, akkor a plusz + szimbólumot fogják előállítani. Szóval menjünk.
1. Szélesség és magasság
A width és a height meghatározása Emmetrel nagyon egyszerű. Csak meg kell írni az első szót, majd a hozzáadni kívánt méretet. Alapértelmezés szerint, ha nem határozza meg az egységeket, az Emmet generálja őket px egységgel. A rendelkezésre álló egység szimbólum százalék % és em .
2. Szöveg
Van néhány könnyen használható szöveges tulajdonság szimbólum, és alapértelmezett értékkel generálódik. ta a left értékű text-align létre, a td text-decoration, és a tt text-transform lesz uppercase értékkel.
3. Háttér
Háttér hozzáadásához egyszerűen használjon bg rövidítést. A bgc background-color bgc a background-color, a bgc a background-color és a bgr a background-repeat . bg+ is írhat a háttértulajdonságok teljes listájához.
4. Betűtípus
A pluszjel nem csak a háttérben alkalmazható. A @font-face egyszerűen írhat @f+ a @font-face tulajdonságok teljes listájához. Ha @f nélkül írja be, akkor csak egy alap @font-face kap.
5. Egyéb
Más nagyszerű trükkök az animation szöveg animation az anim szöveggel. Ha mínusz - jelet ad meg, az animációs tulajdonságot teljes értékkel kapja meg. A @kf szöveg is tartalmazza a @kf teljes listáját.
Következtetés
Az Emmet egy rendkívül nagy időtakarékos eszköz a fejlesztési folyamat korszerűsítésére. Ha csak ismeri Emmet-et, nem túl késő, hogy próbálja ki most. Ezek a trükkök csak néhány Emmet funkció. Emmetben, különösen a CSS-nél, van még más szimbólum és szintaxis. Csak olvasd el az Emmet docs-t vagy a cheat sheet-t.
