Come scrivere il codice HTML più velocemente

Sep 10, 2025

Come si fa

(Immagine di immagine: futuro)

I moderni siti Web richiedono un sacco di codice HTML. Layout complessi con più diversi punti di vista e stati possono essere difficili da creare con un semplice editor di testo. Per fortuna, ci sono una serie di strumenti di generazione HTML là fuori con cui lavorare. Qui prendiamo un bell'aspetto a due degli strumenti più popolari, Emmet e Pug.

Tuttavia, è ancora necessario conoscere il tuo HTML per utilizzare entrambi questi potenti strumenti di risparmio di tempo. Quindi, prima di tuffarti in modo assicurati di utilizzare il famoso semantico Tag HTML. il modo giusto. Vedi anche la nostra guida per usare a Caldaietta HTML. .

Vuoi sviare del codice? Prova questi costruttori di siti Web . O per un aiuto extra lungo la strada, scegli un web hosting Servizio con supporto tecnico.

Genera HTML al volo

Quando scrivendo grandi quantità di html in una volta, scrivendo ogni tag fuori a mano può diventare molto noioso, molto rapidamente. Ad esempio, quando si scrive un elenco di collegamenti, dobbiamo assicurarci che il & lt; UL & GT; e lt; Li & GT; e & lt; A & GT; Tag tutto aperto e chiudi nel posto giusto. Altrimenti i collegamenti potrebbero non funzionare e l'intero layout di pagina andrà completamente in fieno.

Come usare Emmet

Per assicurarti di ridurre le possibilità di questo accadere puoi impiegare i talenti di Emmet . Questo è uno strumento che ti farà risparmiare un sacco di digitazione e migliorerà notevolmente il tuo html & amp; Flusso di lavoro CSS. Emmet consente di creare elementi digitando un selettore simile a CSS. Analizzerà e espanderanno quell'elemento in html regolare. Di seguito è riportato l'elemento originale creato in Emmet.

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

Emmet rileverà questo elemento, analizzalo e quindi trasforma l'elemento in HTML standard come mostrato di seguito. Uno sguardo rapido all'elemento di emmet lo suggerisce & lt; li & gt; è moltiplicato da ( * 3. ) e ciascuno & lt; li & gt; L'istanza verrà chiamato capitolo seguito dal numero appropriato (fino a 3).

Nota quanti caratteri contiene l'elemento di emmet e quanti contiene l'HTML standard. Anche questo piccolo snippet di codice dimostra quanto tempo può essere salvato usando la stenografia di emmet.

 & lt; nav & gt;
  & lt; UL & GT;
    & lt; li & gt; & lt; a href = "" class = "capitolo" & gt; capitolo 1
 di 3 & lt; / A & GT; & LT; / Li & GT;
    & lt; li & gt; & lt; a href = "" class = "capitolo" & gt; capitolo 2
 di 3 & lt; / A & GT; & LT; / Li & GT;
    & lt; li & gt; & lt; a href = "" class = "capitolo" & gt; Capitolo 3
 di 3 & lt; / A & GT; & LT; / Li & GT;
  & lt; / UL & GT;
& lt; / nav & gt;

Emmet è anche consapevole del contesto. Ad esempio, se stiamo modificando a & lt; tavolo e GT; È probabile che lo vorremo alcuni & lt; tr & gt; (questi sono elementi di righe) per riempirlo. Tutto ciò che dovremmo fare è specificare quanti ne hai bisogno.

Questo è solo un rapido esempio di ciò che può fare Emmet, ma sono disponibili molte più opzioni di configurazione. Questi includono la modifica CSS, la creazione della classe BEM (Block Element Modifier) e c'è anche un generatore di Lorem Ipsum.

Vale anche la pena notare che la maggior parte degli editori di codice ha emmet integrato o supportalo tramite plugin. Puoi saperne di più su questo sul Documentazione di Emmet. pagina.

Usa il PUG per il contenuto dinamico

Mentre Emmet è ideale per il contenuto statico, cosa succede se il contenuto deve essere più dinamico? Ad esempio, potremmo aver bisogno di generare homepage personalizzate, tabelle ordini complesse o ripetere blocchi comuni di HTML. Questo è tutto possibile in JavaScript, ma pre-rendendo questo contenuto possiamo ottenere una boost di velocità aggiunta senza affidarsi al browser dell'utente. Ricorda se hai una pagina Media-Heavy, ti consigliamo di eseguirle affidabile deposito cloud. .

Passo avanti carlino. Questo è uno strumento di formazione per HTML. È possibile scrivere pagine nel formato ".Pug" e PUG leggerà quel file, iniettare alcuni dati dinamici in IT e restituire HTML standard. L'esempio seguente è come scrivere il codice a Pug per creare lo stesso html come esempio di Emmet (sopra).

 ul
  ogni val in [1, 2, 3]
    li.
      A (HREF = "", Class = "Capitolo") Capitolo
# {val} di 3

Un file Pug utilizza il rientro da solo per indicare il nidificazione.Può isolare i valori per generare grandi quantità di HTML in un unico passaggio.Questi file ".pug" sono progettati per essere riutilizzati molte volte in un progetto.

Pug è disponibile per l'installazione da Package Manager NPM. .Ma se vuoi maggiori informazioni su come iniziare con Pug paghi una visita al sito web .

Questo contenuto è stato originariamente apparso nella rivista Web Designer.

Per saperne di più:

10 Best. Framework CSS.
Animazione CSS. Esempi per ricreare.
8 tag HTML è necessario utilizzare (e 5 da evitare)

Come scrivere il codice HTML più velocemente

Genera HTML al volo

Come usare Emmet

Usa il PUG per il contenuto dinamico

Come si fa - Articoli più popolari

Tutorial dell'arte multimediale misto: Come acquerello su opere d'arte digitale

Cosa c'è dentro angolare 8?

Costruisci una pagina di atterraggio a schermo animato a schermo animato

Come creare Personaggi dei cartoni animati Furry

Branding Pro condividere come si ungiscono voce di marca

Scopri lo stile e la sostanza della tipografia

Come creare un ambiente invernale

Esplora il codice creativo con p5.js

Categorie