Hvordan skrive HTML-kode raskere

Feb 13, 2026

hvordan

[1. 3]

(Bildekreditt: Fremtid)

Moderne nettsteder krever mye HTML-kode. Komplekse layouter med flere forskjellige synspunkter og stater kan være vanskelig å lage med bare en enkel tekstredigerer. Heldigvis er det en rekke HTML-generasjonsverktøy der ute for å jobbe med. Her tar vi en rask titt på to av de mer populære verktøyene, Emmet og Pug.

Du må imidlertid fortsatt vite HTML-en din for å bruke begge disse kraftige tidsbesparende verktøyene. Så, før du dykker i Pass på at du bruker den populære semantiske HTML-koder den riktige måten. Se også vår guide til å bruke en HTML Boilerplate. .

Vil du svinge koden? Prøv disse Nettstedbyggere . Eller for ekstra hjelp underveis, velg en Web Hosting. Service med teknisk støtte.

Generer HTML på fluen

Når du skriver store mengder HTML på en gang, kan du skrive hver tag ut for hånden bli veldig kjedelig, veldig raskt. For eksempel, når du skriver ut en liste over lenker, må vi sørge for at lt; ul & gt;, lt; li & gt; og & lt; a & gt; Tags alle åpne og lukke på rett sted. Ellers kan koblingene ikke fungere, og hele sidelayoutet vil gå helt i Haywire.

Slik bruker du Emmet

For å sikre at du reduserer sjansene for at dette skjer, kan du bruke talentene til Emmet. . Dette er et verktøy som vil spare deg for mye å skrive og vil forbedre HTMLs HTML i stor grad. CSS Workflow. Emmet lar deg lage elementer ved å skrive ut en CSS-lignende velger. Det vil da analysere og utvide det elementet til vanlig HTML. Nedenfor er det opprinnelige elementet som er opprettet i Emmet.

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

Emmet vil oppdage dette elementet, analysere det og deretter forvandle elementet til standard HTML som vist nedenfor. En rask titt på Emmet-elementet antyder at & lt; li & gt; er multiplisert med ( * 3. ) og hver & lt; li & gt; Instans vil bli kalt kapitlet etterfulgt av riktig nummer (opptil 3).

Legg merke til hvor mange tegn EMMET-elementet inneholder og hvor mange standard HTML inneholder. Selv denne lille utdraget av kode demonstrerer hvor mye tid som kan lagres ved å bruke Emmet Shorthand.

 & lt; Nav & gt;
  & lt; ul & gt;
    & lt; en href = "" class = "kapittel" & gt; Kapittel 1
 på 3 & lt; / a & gt;
    & lt; a href = "" class = "kapittel" & gt; kapittel 2
 på 3 & lt; / a & gt;
    & lt; en href = "" class = "kapittel" & gt; kapittel 3
 på 3 & lt; / a & gt;
  lt; / ul & gt;
& lt; / nav & gt;

Emmet er også klar over konteksten. For eksempel, hvis vi redigerer en & lt; Table & gt; Det er sannsynlig at vi vil ha noen & lt; tr & gt; (Disse er rader) elementer for å fylle den. Alt vi trenger å gjøre er å spesifisere hvor mange vi trenger.

Dette er bare et raskt eksempel på hva Emmet kan gjøre, men det er mange flere konfigurasjonsalternativer tilgjengelig. Disse inkluderer CSS-redigering, BEM (Block Element Modifier) CLASS CREATION, og det er enda en Lorem Ipsum Generator.

Det er også verdt å merke seg at de fleste kodedaktører enten har EMMET innebygd eller støtter den gjennom plugins. Du kan finne ut mer om dette på Emmet dokumentasjon side.

Bruk Pug for dynamisk innhold

Mens Emmet er ideelt for statisk innhold, hva skjer hvis innholdet må være mer dynamisk? For eksempel må vi kanskje generere personlige hjemmesider, komplekse ordrebord eller gjenta vanlige blokker av HTML. Dette er alt mulig i JavaScript, men ved å forhåndsgitte dette innholdet kan vi få et ekstra hastighetsforsterkning uten å stole på brukerens nettleser. Husk om du har en media-tung side, du vil sikkerhetskopiere det med pålitelig skylagring .

Trinn frem pug. Dette er et templerende verktøy for HTML. Du kan skrive sider i ".pug" -formatet og Pug vil lese den filen, injisere noen dynamiske data i det og returnere standard HTML. Eksempelet nedenfor er hvordan du vil skrive koden i Pug for å skape det samme HTML som EMMET-eksemplet (over).

 ul
  hver val i [1, 2, 3]
    Li.
      a (href = "", class = "kapittel") Kapittel
# {val} av 3

En pug-fil bruker innrykk alene for å indikere nesting.Det kan ittere over verdier for å generere store mengder HTML i ett pass.Disse ".pug" -filene er designet for å bli gjenbrukt mange ganger på tvers av et prosjekt.

Pug er tilgjengelig for å installere fra pakkehåndteringen NPM. .Men hvis du vil ha mer informasjon om hvordan du kommer i gang med Pug, vennligst besøk nettside .

Dette innholdet oppstod opprinnelig i webdesignermagasinet.

Les mer:

10 BEST CSS-rammer
CSS animasjon Eksempler på å gjenskape
8 HTML-koder du må bruke (og 5 for å unngå)

Hvordan skrive HTML-kode raskere

Generer HTML på fluen

Slik bruker du Emmet

Bruk Pug for dynamisk innhold

hvordan - Mest populære artikler

Hvordan løse en vanskelig design kort

Hvordan lage tilgjengelige webskjemaer

Lag og animer SVG-polygoner

Mal en mischievous hare i akvarell

Hvordan lage fantastiske effekter med CSS-former

Malekontrollert og glatt slag med skisserende

Hvordan bygge en fullside nettside i vinkel

Prep ditt arbeid for 3D-utskrift: 8 Top Tips

Kategorier