Hogyan írhatunk HTML kódot gyorsabban

Sep 10, 2025

kézikönyv

(Kép hitel: jövő)

A modern weboldalak sok HTML kódot igényelnek. A különböző nézetekkel és állapotokkal rendelkező komplex elrendezések megnehezíthetők csak egy egyszerű szövegszerkesztővel. Szerencsére számos HTML generációs eszköz van, hogy dolgozzon. Itt gyorsan megnézzük a népszerűbb eszközöket, Emmet és Pug.

Azonban még mindig meg kell ismernie a HTML-t mindkét erőteljes időmegtakarító eszköz használatához. Tehát, mielőtt merülne, győződjön meg róla, hogy a népszerű szemantant használja HTML-címkék a helyes út. Lásd az útmutatót a Html kazán .

Szeretné megragadni a kódot? Próbáld ki ezeket Website Builders . Vagy az út mentén, válasszon egy web hosting Szolgáltatás technikai támogatással.

HTML létrehozása a repülésen

Írásakor nagy mennyiségű HTML egy menetben, az írás minden tag ki kézzel válhat nagyon unalmas, nagyon gyorsan. Például, ha a linkek listájának megírásakor meg kell győződnünk arról, hogy a & lt; ul & gt; & lt; li & gt; és & lt; A & gt; Címkék minden nyitott és zárva a megfelelő helyen. Ellenkező esetben a linkek nem működnek, és az egész oldal elrendezése teljesen Haywire lesz.

Hogyan kell használni az Emmet-t

Annak érdekében, hogy csökkentse, csökkentse ennek az esélyeit, hogy a tehetségeket alkalmazhassa Hangya . Ez olyan eszköz, amely megmenti Önt sok gépelés, és nagymértékben javítja a HTML & amp; CSS munkafolyamat. Az Emmet lehetővé teszi, hogy elemeket hozzon létre egy CSS-szerű választó kiírásával. Ezután elemezni fogja és bővíti az elemet rendszeres HTML-be. Az alábbiakban az Emmet által létrehozott eredeti elem.

nav>ul>li*3>a.chapter{Chapter $ of 3}

Az Emmet észleli ezt az elemet, elemeznie azt, majd az elemet az alábbiak szerint átalakítja az elemet. Az Emmet elem gyors megjelenése azt sugallja, hogy & lt; li & gt; szorzva van ( * 3 ) és mindegyik & lt; li & gt; A példányt fejezetnek nevezik, amelyet a megfelelő szám (legfeljebb 3) követ.

Ne feledje, hány karaktert tartalmaz az Emmet elem tartalmaz, és hány a szabványos HTML tartalmaz. Még ez a kis kódrészlet is azt mutatja, hogy mennyi időt lehet menteni az Emmet Shorthand használatával.

 & LT; NAV & GT;
  & lt; ul & gt;
    & li & gt; & lt; egy href = "" osztály = "fejezet" & gt; 1. fejezet
 3 & lt; / a & gt; / li & gt;
    & li & gt; & lt; egy href = "" osztály = "fejezet" & gt; 2. fejezet
 3 & lt; / a & gt; / li & gt;
    & li & gt; & lt; egy href = "" osztály = "fejezet" & gt; 3. fejezet
 3 & lt; / a & gt; / li & gt;
  & lt; / ul & gt;
& lt; / nav & gt;

Emmet is tisztában van a kontextusnak. Például, ha szerkesztjük a & lt; asztal és gt; Valószínűleg néhányat akarunk & lt; tr & gt; (Ezek a sorok) elemek kitöltéséhez. Mindössze annyit kell tennie, hogy meghatározza, hogy hány van szükségünk.

Ez csak egy gyors példa arra, hogy milyen Emmet képes, de léteznek bőven több konfigurációs lehetőség. Ezek közé tartozik a CSS szerkesztés, a BEM (Block Element Modifier) osztály létrehozása, és még egy lorem ipsum generátor is van.

Érdemes megjegyezni, hogy a legtöbb kódszerkesztő, akár Emmet beépített, vagy a pluginokon keresztül támogatja. Többet tudhat meg erről a Emmet dokumentáció oldal.

Használja a dinamikus tartalmat

Míg az Emmet ideális statikus tartalmakhoz, mi történik, ha a tartalomnak dinamikusabbnak kell lennie? Például előfordulhat, hogy szükség van-e a személyre szabott honlapokat, komplex érdekében a táblázatok vagy ismételje meg a közös tömbök HTML. Ez a JavaScript-ben lehetséges, de ez a tartalom előfordulása révén hozzáadott sebességnövelést kaphatunk anélkül, hogy a felhasználó böngészőjére támaszkodnánk. Ne feledje, hogy van egy média-nehéz oldala, meg akarja állítani, hogy megbízható felhő tároló .

Lépj előre mopsz. Ez egy templatáló eszköz a HTML számára. A ".pug" formátumban írhat, és a mopsz leolvashatja ezt a fájlt, beadja a dinamikus adatokat, és visszaadja a szabványos HTML-t. Az alábbi példa az, hogy hogyan írná a kódot a PUG-ben, hogy ugyanazt a HTML-t hozza létre, mint az emmet példa (fent).

 ul
  mindegyik val [1, 2, 3]
    li
      A (href = "", osztály = "fejezet") fejezet
# {Val} 3

A mopszfájl egyedül használ a fészkelés jelzésére.Iterálhatja az értékeket, hogy nagy mennyiségű HTML-t generáljon egy átadásban.Ezeket a ".pug" fájlokat úgy tervezték, hogy többször újra felhasználják egy projekten keresztül.

A PUG telepíthető a csomagkezelőtől npm .De ha több információt szeretne arról, hogyan lehet megkezdeni a mopszot, engedje meg a látogatást a weboldal .

Ez a tartalom eredetileg megjelent a Web Designer magazinban.

Olvass tovább:

10 legjobb CSS-keretrendszerek
CSS animáció Példák a létrehozásra
8 HTML címkéket kell használni (és 5, hogy elkerüljék)

Hogyan írhatunk HTML kódot gyorsabban

HTML létrehozása a repülésen

Hogyan kell használni az Emmet-t

Használja a dinamikus tartalmat

kézikönyv - Most Popular Articles

Használja a Framer X-t az interaktív prototípusok létrehozásához

4 lépés a változó betűtípusok használatához

Smart munka a ZBRUSH UI-vel

Hogyan készítsünk papíralkotás robotot

REBUILD A 2004 FLASH weboldal 2018-ra

Hogyan lehet hozzáadni videót az interaktív PDF-ekhez

Hogyan kódolhat egy bővített valóságjelzőt

Hogyan hozzunk létre egy gyönyörű akvarell tájfestést

Kategóriák