Elbúcsúzunk zen kódolás
Emmet, más néven zen Coding - a leghatékonyabb plug-in gyors írásban HTML és CSS kódot, ami valaha is létezett. Hála neki, egyszerű kifejezéseket tud generálni egy blokk-kódot. Emmet, ebben az összefüggésben azt ígéri, hogy még jobb és kényelmesebb.
Hogyan működik Emmet?
HTML rövidítések
inicializáló
Kap az alapstruktúra egy HTML dokumentum most már kevesebb, mint egy másodperc. Írja rövidítése html: 5 vagy könnyű. nyomja le a Tab, és egy pillanat alatt látni fogja a teljes kódot bázis a doctype HTML5.
- html 5. vagy. - HTML5
- html: xt - XHTML átmeneti
- html: 4s - szigorú HTML 4
Hozzáadása osztályok, id-nis, szöveg és attribútumok
Emmet, mert a szintaxis nagyon hasonlít a CSS szelektor, majd kitaláljuk, hogyan kell használni, nagyon egyszerű. Próbálja kísérletezni néhány elem (például, p) és az azonosító (például p # leírás)
Akkor is össze osztályokat és azonosítókat. Például p.bar # foo kifejezést válik:
Most lássuk, hogyan kell hozzáadni a szöveg és attribútum. Annak érdekében, hogy az elem egy szöveg, írjon annak értéke fogszabályozó. Például H1 átalakult:
Szögletes zárójelek hozzá tulajdonságokat és azok értékeit. Például, egy [href = #] transzformáljuk:
fészkelő elemek
Hála Emmet és szintaxisa írás Beágyazott kifejezéseket, akkor teljesen létrehozni egy teljes HTML dokumentum ugyanazt a rövidítést. A szülő elem elé a megjelölés>, és az összes belső alkatrészt kell menni utána. + Iratkozzon összekapcsolására számos rövidítések, úgy, hogy a generált kód megy egymás után. Az új üzemeltető a jel ~ menjünk egy szinttel feljebb.
csoport
Ez gyakran egy kicsit zavaró, ha írsz nagy rövidítéseket. Annak érdekében, hogy ezt, akkor csoportosulás. Például, (.foo> h1) + (. Bar> h2) válik:
Csere címkeneveket
Ahhoz, hogy hozzon létre egy div blokk osztály elem elég lehet átalakítani rövidítése div.item.
A múltban, az írás hasonló kifejezések egyszerűsödtek. Például, hogy ugyanazt
. Lehet írni a rövidítés .item. Emmet ebben a tekintetben még inkább fejlettebb. Most a bővítmény automatikusan meghatározza, hogy mely tag kell szubsztituált függően a szülő. Ie ha átalakítják .item rövidítése belül a lista- . A rövidítés lesz . helyett . mint korábban volt.
- li UL és ol
- tr az asztalra, tbody, thead és tfoot
- td a tr
- opció kiválasztásához és optgroup
Itt egy kis puskát:
Azáltal, hogy a megjelölés használata *. meg tudja határozni, hogy mennyi időt írja be a kívánt tételt. Így a rövidítése ul> li * 3 alakítjuk:
Mit szólnál egy kombinációját üzemeltetője szorzás és számozás? Nem gond! Csak tedd a $ jel a végén a nevét egy attribútum vagy elem, és akkor boldog lesz! Például ul> li.item $ * 3 alakulnak:
Próbáld ki magad!
CSS rövidítések
Emmet célja, hogy egyszerűsítse az írás, nem csak a HTML, de és CSS kódot. Például, ha szeretné beállítani az elem szélességét. Ehhez egyszerűen írja W100:
Jelentés px alapértelmezés szerint telepítve. Más egységek speciális karaktereket. Például h10p + m5e:
A lehetséges értékek:
további lehetőségek
Például, egy expressziós @f. lehet kapni a kódot:
Ebben az esetben a lehetőség, mint a background-image, border-radius, font, @ font-face, szöveges vázlat, text-shadow lehet hozzáadni, ha a kifejezés attribútum a + jel. Például, @ F + átalakul:
automatikus keresés
Emmet kereshet a kívánt értéket, ha nem teljesen igaz írásbeli kifejezés. A beépülő modul nagyon hasonló kifejezés, például rövidítések ov: h, OVH, OVH és jaj alakítjuk ugyanazt a kódot:
CSS3 előtagok
CSS3 természetesen nagyon meredek, de ne feledje, az összes létező előtagot egyszerűen lehetetlen! Nos, nem! Emmet és ott segít nekünk. Például, a szó átalakítható trs:
Azt is meg lehet rendelni a előtagokat. Például, -super-ize válik:
Mi van, ha kell csak néhány a meglévő előtagokat? Nem probléma, csak írja be az első betű a nevük: -wm-TRF alakítjuk:
Ha beszélünk CSS3, a színátmenetek nem lehet elkerülni. Mindazok összetett kifejezéseket, amit írt kézzel lehet helyettesíteni egy rövidítés. Például, lg (balra, #fff 50%, # 000) átalakul:
további jellemzők
Lorem Ipsum
Az Emmet, akkor felejtsd el az online szolgáltatás Lorem Ipsum. Most van egy speciális rövidítés: lorem ipsum vagy. Azt is megadhatja, hogy hány szót szeretne létrehozni. Például, lorem10 alakítjuk:
TRENDSHOW is keverhető más elemekkel. Például, p * 3> lorem5:
testreszabása
Emmet megadja nekünk a lehetőséget, hogy módosítsa a széles körű plug-in beállításait. Ehhez meg kell szerkeszteni három fájlt:
Új kifejezést, vagy szerkeszteni egy meglévő fájlt, szerkeszteni snippets.json
Az átalakítás a szűrők és intézkedések meg lehet változtatni a fájl preferences.json
Megjelenítésének vezérlése a HTML és XML-kódot, szerkeszteni a fájlt syntaxProfiles.json
A hivatalos oldalon a plugint itt található. Szintén az Ön rendelkezésére dokumentáció és kiságy
És mit szólsz?
Ne használja ezt a plugin? Ha igen, mi a kedvenc darabokat? Ossza meg tapasztalatait!
Által nyújtott információk útján két csatorna (látás és hallás) a képzés hatékonyságának sokkal jobb tanulás könyvekből. A házi feladatok és online tesztek lehetővé teszi, hogy folyamatosan úgy gondolja, a célnyelven, és azonnal ellenőrizze tudását!
Ha azt szeretnénk, hosszú ideig, hogy tanulmányozzák, hogyan lehet HTML-t, akkor engem, mert van jó hír!
Ha már megtanulta a HTML és tovább szeretne lépni, a következő lépés az lesz, hogy tanulmányozza a CSS technológiával.
Ha azt szeretnénk, hogy megértsék a fogalmak domain és tárhely, megtanulják, hogyan kell létrehozni egy adatbázist, feltölteni a fájlokat a honlapon keresztül FTP szerver, hozzon létre aldomain konfigurálja a postaládákat a helyszínen, és ellenőrzi a részvétel, a tanfolyam kifejezetten az Ön számára!