Tanuljon meg a jelölés zen mestere lenni

A jelölés vagy jelölés a jelölő vagy címkéző nyelvekre vonatkozik HTML és CSS, és mindannyian tudjuk, milyen fájdalmas mindez a címkék egyesével történő megnyitása és bezárása egy websablon létrehozása érdekében ...

Természetesen vannak erre megoldások, az egyik az automatikus kiegészítés az IDE-szerűekkel Dreamweaver szar bluegriffon bosszantó, ha nem vásárolsz tőle plugint o Komodo szerkesztés Nagyon nehéz... a lényeg az, hogy az IDE-k vagy a kódszerkesztők, amelyek túl sok opcióval vannak ellátva, gyakran elképzelhetetlen módon akadályozzák a munkát; ilyen a Dreamweaver ami szemetkóddal tölt el, amit grafikusan generál, és nehéz, drága és csúnya. bluegriffon többnyire idegesítő, mert ingyenes, ingyenes, de a lehetőségek felét fizetős felhasználóknak tartják fenn ... ez nem szórakoztató. És végül megvan Komodo-szerkesztés, ami nagyon jó, erőteljes és tele van lehetőségekkel, de nehéz (100 MB alapjáraton), és beállítása unalmas.

A webfejlesztő vagy webdesigner legjobb fegyvere nem az IDE-k, mint a harckocsi stílusa, ezer fegyverrel a tetején, ez egy egyszerű szövegszerkesztő, néhány plugin és a képesség, hogy betegként gépeljen ... add hozzá a varázsát Zen kódolás és az ujjaikban lesz a valaha létrehozott legjobb eszköz a jelöléshez (legalább nekem).

De ... mi a fene az Zen kódolás?

Egyszerű, ez egy speciális plugin, amely legördülő absztrakciós rétegként szolgál az itt létrehozott HTML és CSS számára Javascript és a leghíresebb kiadók (notepad ++, Komodo-edit, Gedit, Kate, Bluefish, Geany, Dreamweaver, Stb.)

Aha, még mindig nem értem egy rohadt ötletet sem, amit mondasz ...

Tehát egy egyszerű példával mutatom meg; Emlékszel a legördülő absztrakcióra? Nos, változtassa meg zsugorodássá, képzelje el, hogy az összecsukott HTML / CSS-kódot egy sorba sorolhatja, és széthúzhatja függönyként, vagy visszahajthatja ... Szeretné látni, hogyan? Csak két dolgot kell meggyőződnie arról, hogy működjön:

Már Zen kódolás telepítve van a szerkesztőjébe.
Ismerje a használatához szükséges parancsokat és szintaxist.

Oké, mutasson a kódra:

html>head+body

Látja azt a kódsort? Nos, ez a HTML szintaxisa, egyszerű:

Először felteszi a címke nevét (html), majd jelzi, hogy mely címkék lesznek a címkén belül (>), majd a címkék nevét (fej és törzs). A '+' jel azt jelzi, hogy a fej és a test két különböző címke, és hogy egyik sem szerepel a másikban, olyan, mintha azt mondanánk «együtt, de nem keverve«... Akkor nézzük meg, mit generál az a kódsor a mágikus gombok megnyomásakoraz én esetemben a CTRL + E):

Pontosan, 4 kódsor egyből, amelyek varázsütésre megjelennek, amikor megnyomja a megfelelő billentyűkombinációt ... és még sok más lehet; például:

html>head+body>ul#lista_ordenada>li.listilla*5

Ugyanaz a szintaxis, de adunk hozzá valami mást ... ha tudsz néhány CSS-t, rájössz, hogy olyan azonosítót, osztályokat és valamit adunk hozzá, amelyet biztosan nem tudtál; szorzók… mi ez az egész! Bassza meg, hogy összezavar!

Nyugodj meg, ez nagyon egyszerű, mondtuk a fentieknek, hogy a test belsejébe írj be egy «ul» címkét, semmi furcsa, ezt fentebb elmagyaráztam, majd hozzárendeltünk egy azonosítót, hogy ha ismered a CSS-t, meg fogod érteni, hogy ezeket azonosítják a „#” jelet, és ezen a rendezetlen listán (ul) belül öt címkét adunk hozzá az osztály (osztály) listillához, ezt röviden elmagyarázom. Valójában nagyon egyszerű, a "#" azt jelzi, hogy ez egy azonosító, majd a "li.listilla" azt mondja, hogy létre kell hoznunk egy "li" címkét az osztály listilla "li class = listilla" szóval, majd ezt mondjuk:ismételje meg az utoljára ötször«. Mi eredményez bennünket ennek eredményeként:

Tizenkét kódsor egyetlen sorba írva, sokkal kevesebb idő alatt 😉

És ez CSS-sel is megtehető, bár a cikket nem hosszabbítom meg a nyilvánvaló (alább átadok neked egy teljes listát a csalásokról Zen kódolás).

Hangsúlyoznom kell, hogy ez nem úgy működik, hogy több mint százezer sort készítsünk egyben, jaj, nem, ennek van határa és felhasználási módja. Ha például valami ilyesmit akarunk csinálni:

html>head>title+meta+body>ul#lista_ordenada>li.listilla*5

Mi kell, hogy ezt elméletileg megadja nekünk (nézd meg az utolsó kép kiemelt vonalát):

Ezt megadja nekünk:

Ami azt mutatja, hogy ezzel sem lehet varázsolni; Ne feledje, hogy a kód zen-mesterének pontosnak és gyorsnak kell lennie, és a helytelenül elvégzett dolgok gyorsaságot és időt vesznek el, ezért a helyes technika a gyors és Zen kódolás ez lenne:

html>head>body>ul#lista_ordenada>li.listilla*5

Kibontja a fejcímkét:

title+meta

Ez megadná a helyes kódot:

Bár Zen kódolás Sokkal több dolgot kell megmutatnia, és talán nem a legjobb, ha a fejbe egy másik parancssort kell írni, ezért használunk egy másik parancsot,rövidítéssel bővíteni" esetemben ctrl + alt + e amely megnyit egy kis sávot, ahova Zen kódot írhatunk, és megnézhetjük, hogyan jelenik meg valós időben. Legyen óvatos, nem ajánlom, hogy mindent ezzel írjak, hanem a már létrehozott struktúrákba írjak, vagyis először hozzuk létre a nagy struktúrákat, majd részletezzük bennük ezt az opciót.

És a szuper jó parancsok sokasága van a Zen kódolás, az a helyzet, hogy miután telepítette őket, megvizsgálja őket, és megtanulja használni; Ezzel a bővítménnyel nem lesz szükség automatikus kiegészítésre vagy kódrészletekre a css-hez vagy a html-hez, sőt, ezzel rájön, hogy ezek a lehetőségek teljes időpazarlást jelentenek ezen a két programozási nyelven belül 😉

Az érdeklődők számára pedig itt található a Zen kódolás, formátumban láthatja ODF o PDF becsületes ITT