Hur man skriver HTML-kod snabbare

Sep 10, 2025

Hur

(Bildkredit: Framtida)

Moderna webbplatser kräver massor av HTML-kod. Komplexa layouter med flera olika vyer och stater kan vara svåra att skapa med bara en enkel textredigerare. Tack och lov finns det en mängd HTML-generationsverktyg där ute för att arbeta med. Här tar vi en snabb titt på två av de mer populära verktygen, Emmet och Pug.

Du behöver dock fortfarande veta din HTML för att använda båda dessa kraftfulla tidsbesparande verktyg. Så innan du dyker på, se till att du använder den populära semantiska HTML-taggar den rätta vägen. Se även vår guide till att använda en Html boilerplate .

Vill du svänga koden? Pröva dessa Webbplatsbyggare . Eller för extra hjälp längs vägen, välj en webbhotell Service med teknisk support.

Generera HTML på flugan

När du skriver stora mängder html på en gång, skriver du varje tag ut för hand blir mycket tråkigt, mycket snabbt. Till exempel, när vi skriver ut en lista med länkar, måste vi se till att & lt; ul & gt; & lt; li & gt; och & lt; A & GT; Taggar alla öppna och stänga på rätt ställe. Annars kan länkarna inte fungera och hela sidlayouten kommer att gå helt Haywire.

Hur man använder Emmet

För att du ska minska chanserna för detta kan du anställa talangerna av Emmet . Detta är ett verktyg som sparar dig mycket att skriva och kommer att förbättra din HTML & AMP. CSS-arbetsflöde. Emmet gör att du kan skapa element genom att skriva ut en CSS-liknande väljare. Det kommer då att analysera och expandera det här elementet i vanlig HTML. Nedan är det ursprungliga elementet som skapats i Emmet.

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

Emmet kommer att detektera detta element, analysera det och omvandla sedan elementet till standard HTML som visas nedan. Ett snabbt utseende på Emmet-elementet föreslår att & lt; li & gt; multipliceras med ( * 3 ) och vardera & lt; li & gt; Instans kommer att kallas kapitel följt av lämpligt nummer (upp till 3).

Observera hur många tecken Emmet-elementet innehåller och hur många standard HTML-innehåller. Även den här lilla setippet av kod demonstrerar hur mycket tid som kan sparas med hjälp av Emmet Shorthand.

 & lt; nav & gt;
  & lt; ul & gt;
    & lt; li & gt; & lt; en href = "" class = "kapitel" & gt; kapitel 1
 av 3 & lt; / a & gt; & lt; / li & gt;
    & lt; li & gt; & lt; en href = "" class = "kapitel" & gt; kapitel 2
 av 3 & lt; / a & gt; & lt; / li & gt;
    & lt; li & gt; & lt; en href = "" class = "kapitel" & gt; kapitel 3
 av 3 & lt; / a & gt; & lt; / li & gt;
  & lt; / ul & gt;
& lt; / nav & gt;

Emmet är också medveten om sammanhang. Till exempel, om vi redigerar en & lt; bord och gt; Det är troligt att vi vill ha några & lt; tr & g; (dessa är rader) element för att fylla den. Allt vi skulle behöva göra är att ange hur många vi behöver.

Det här är bara ett snabbt exempel på vad Emmet kan göra, men det finns många fler konfigurationsalternativ. Dessa inkluderar CSS-redigering, BEM (Block Element Modifier) Class Creation och det finns även en Lorem Ipsum Generator.

Det är också värt att notera att de flesta kodredaktörer antingen har emmet inbyggt eller stöder det genom plugins. Du kan läsa mer om detta på Emmet Documentation sida.

Använd pug för dynamiskt innehåll

Medan Emmet är idealisk för statiskt innehåll, vad händer om innehållet behöver vara mer dynamiskt? Till exempel kan vi behöva generera personliga hemsidor, komplexa ordertabeller eller upprepa vanliga block av HTML. Detta är allt möjligt i JavaScript, men genom att förhandla det här innehållet kan vi få en extra hastighetsökning utan att förlita sig på användarens webbläsare. Kom ihåg om du har en media-tung sida, vill du backa upp den med pålitlig molnlagring .

Steg framåtmug. Detta är ett mallande verktyg för HTML. Du kan skriva sidor i ".pug" -formatet och Pug läser den filen, injicera några dynamiska data till den och returnera standard HTML. Exemplet nedan är hur du skulle skriva koden i Pug för att skapa samma HTML som Emmet Exempel (ovan).

 ul
  varje val i [1, 2, 3]
    li
      a (href = "", klass = "kapitel") kapitel
# {val} av 3

En pugfil använder indragning ensam för att indikera nestning.Det kan iterera över värden för att generera stora mängder html i ett pass.Dessa ".pug" -filer är utformade för att återanvändas många gånger över ett projekt.

Pug är tillgänglig för installation från Package Manager npm .Men om du vill ha mer information om hur du kommer igång med Pug, betala ett besök på hemsida .

Detta innehåll uppträdde ursprungligen i webbdesignermagasin.

Läs mer:

10 bästa CSS-ramar
CSS-animering Exempel på att återskapa
8 HTML-taggar du behöver använda (och 5 för att undvika)

Hur man skriver HTML-kod snabbare

Generera HTML på flugan

Hur man använder Emmet

Använd pug för dynamiskt innehåll

Hur - Mest populära artiklar

Hur man sätter upp en lokal utvecklingsmiljö

7 Topptips för att starta ditt eget företag

Kom igång med rost

Uppbygga en Flash-webbplats 2004 för 2018

Hur man skapar en redshift-proxy i Cinema 4D

Lägg till visuella signaler till din webbplats

brudgummen en oemotståndligt furig varelse

Hur får man mer från GIF

Kategorier