Sådan skriver du HTML-kode hurtigere

Nov 19, 2025

hvordan

(Billedkredit: fremtiden)

Moderne websites kræver masser af HTML-kode. Komplekse layouter med flere forskellige synspunkter og stater kan være svært at oprette med blot en simpel teksteditor. Heldigvis er der en række HTML-generationsværktøjer derude for at arbejde med. Her tager vi et hurtigt kig på to af de mere populære værktøjer, Emmet og Pug.

Du skal dog stadig kende din HTML til at bruge begge disse kraftfulde tidsbesparende værktøjer. Så før du dykker i sørg for at du bruger den populære semantik HTML-tags. den rigtige måde. Se også vores guide til at bruge en Html boilerplate. .

Vil du svinge koden? Prøv disse Website Builders. . Eller for ekstra hjælp undervejs, vælg en Web Hosting. Service med teknisk support.

Generer HTML på flugt

Når du skriver store mængder HTML i én gang, kan skrive hvert tag ud for hånd blive meget kedelig, meget hurtigt. For eksempel, når vi skriver en liste over links, skal vi sørge for, at & lt; ul & gt;, & lt; li & gt; og & lt; a & gt; Tags alle åbne og tæt på det rigtige sted. Ellers fungerer linksne måske ikke, og hele sidelayoutet vil gå helt Haywire.

Sådan bruges Emmet

For at sikre, at du reducerer chancerne for at dette sker, kan du ansætte talenterne af Emmet. . Dette er et værktøj, der vil spare dig masser af skrive og vil i høj grad forbedre din HTML & AMP; CSS Workflow. Emmet giver dig mulighed for at oprette elementer ved at skrive en CSS-lignende vælger. Det vil derefter analysere og udvide det element i regelmæssig HTML. Nedenfor er det oprindelige element, der er oprettet i Emmet.

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

Emmet vil detektere dette element, analysere det og derefter omdanne elementet til standard HTML som vist nedenfor. Et hurtigt kig på Emmet-elementet antyder det & lt; li & gt; multipliceres med ( * 3. ) og hver & lt; li & gt; Instans vil blive kaldt kapitel efterfulgt af det relevante antal (op til 3).

Bemærk, hvor mange tegn Emmetelementet indeholder og hvor mange standard HTML indeholder. Selv dette lille snippet af kode demonstrerer, hvor meget tid der kan gemmes ved at bruge Emmet Shorthand.

 & lt; NAV & GT;
  & lt; ul & gt;
    & lt; li & gt; en href = "" class = "kapitel" & gt; kapitel 1
 af 3 & lt; / a & gt; & lt; / li & gt;
    & lt; li & gt; en href = "" klasse = "kapitel" & gt; kapitel 2
 af 3 & lt; / a & gt; & lt; / li & gt;
    & lt; li & gt; en href = "" class = "kapitel" & gt; kapitel 3
 af 3 & lt; / a & gt; & lt; / li & gt;
  & lt; / ul & gt;
& lt; / NAV & GT;

Emmet er også opmærksom på kontekst. For eksempel, hvis vi redigerer en & lt; bord & gt; det er sandsynligt, at vi vil have nogle & lt; tr & gt; (Disse er rækker) elementer for at fylde det. Alt vi skulle gøre er at angive, hvor mange vi har brug for.

Dette er blot et hurtigt eksempel på, hvad Emmet kan gøre, men der er mange flere konfigurationsindstillinger til rådighed. Disse omfatter CSS redigering, BEM (Block Element Modifier) klasse oprettelse og der er endda en lorem ipsum generator.

Det er også værd at bemærke, at de fleste kodredaktører enten har EmMet indbygget eller understøttet den gennem plugins. Du kan finde ud af mere om dette på Emmet dokumentation side.

Brug pug til dynamisk indhold

Mens Emmet er ideel til statisk indhold, hvad sker der, hvis indhold skal være mere dynamisk? For eksempel kan vi muligvis generere personlige hjemmesider, komplekse ordreborde eller gentage fælles blokke af HTML. Dette er alt muligt i JavaScript, men ved at forudse dette indhold kan vi få en ekstra hastighedsforøgelse uden at stole på brugerens browser. Husk, om du har en medie-tung side, vil du gerne bakke op med pålidelig Sky lagring .

Trin fremad Pug. Dette er et templateringsværktøj til HTML. Du kan skrive sider i ".Pug" -formatet, og PUG vil læse denne fil, injicere nogle dynamiske data til det og returnere standard HTML. Eksemplet nedenfor er, hvordan du vil skrive koden i PUG for at oprette den samme HTML som EMMET-eksemplet (ovenfor).

 ul
  hver val i [1, 2, 3]
    li.
      A (HREF = "", klasse = "kapitel") Kapitel
# {val} af 3

En PUG-fil bruger alene indrykning til at indikere nesting.Det kan itere over værdier for at generere store mængder HTML i et pas.Disse ".Pug" -filer er designet til at genbruges mange gange på tværs af et projekt.

Pug er tilgængelig for at installere fra Package Manager NPM. .Men hvis du vil have flere oplysninger om, hvordan du kommer i gang med Pug, skal du besøge internet side .

Dette indhold optrådte oprindeligt i Web Designer Magazine.

Læs mere:

10 bedste. CSS-rammer
CSS animation. eksempler til at genskabe
8 HTML-tags, du skal bruge (og 5 for at undgå)

Sådan skriver du HTML-kode hurtigere

Generer HTML på flugt

Sådan bruges Emmet

Brug pug til dynamisk indhold

hvordan - Mest populære artikler

Sådan oprettes og optimerer din Smugmug Storefront

Visual Development Tips: Fortæl en historie med dit kunstværk

8 Fantastiske nye grafiske designtutorials

En introduktion til CSS-brugerdefinerede egenskaber

4 Tips til at forbedre din side ydelsen

Opret bedre tegn animationer i Maya

Sådan simulerer du eksplosioner i Maya

Sådan laver du en fleksibel Ribbon Rig

Kategorier