Cum se scrie codul HTML mai repede

Sep 10, 2025

să

(Credit Imagine: Viitor)

Site-urile moderne necesită o mulțime de cod HTML. Lamele complexe cu mai multe vizualizări diferite și state pot fi dificil de creat cu doar un editor de text simplu. Din fericire, există o serie de instrumente de generare HTML acolo pentru a lucra cu. Aici ne uităm rapid la două dintre instrumentele mai populare, Emmet și Pug.

Cu toate acestea, trebuie să cunoașteți HTML-ul dvs. pentru a utiliza ambele instrumente puternice de economisire a timpului. Deci, înainte de a vă scufunda, asigurați-vă că utilizați cel mai popular semantic Tag-uri HTML. calea cea buna. Vedeți și ghidul nostru pentru utilizarea unui a HTML Boxerplate .

Doriți să răsturnați codul? Incearca astea Constructori de site-uri web . Sau pentru ajutor suplimentar de-a lungul drumului, alegeți a web hosting Serviciu cu suport tehnic.

Generați HTML în zbor

Când scrieți cantități mari de HTML într-o singură mișcare, scrierea fiecărei etichete cu mâna poate deveni foarte obositoare, foarte repede. De exemplu, atunci când scrieți o listă de link-uri, trebuie să ne asigurăm că "Lt; Li & gt; și & lt; A & GT; Etichete toate deschise și aproape în locul potrivit. În caz contrar, legăturile nu pot funcționa, iar întregul aspect al paginii va merge complet Haywire.

Cum se utilizează Emmet

Pentru a vă asigura că reduceți șansele de a se întâmpla acest lucru puteți folosi talentele Emmet. . Acesta este un instrument care vă va salva o mulțime de tastare și vă va îmbunătăți considerabil HTML & AMP; Fluxul de lucru CSS. Emmet vă permite să creați elemente introducând un selector asemănător CSS. Apoi va analiza și extinde acest element în HTML obișnuit. Mai jos este elementul original creat în Emmet.

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

Emmet va detecta acest element, va analiza și apoi transformă elementul în HTML standard, după cum se arată mai jos. O privire rapidă la elementul Emmet sugerează că & Li & gt; se înmulțește cu ( * 3. ) și fiecare & Li & gt; instanța va fi numită capitol urmată de numărul corespunzător (până la 3).

Rețineți câte caractere conține elementul Emmet și câte caracterele sunt standard HTML. Chiar și acest mic fragment de cod demonstrează cât timp poate fi salvat prin utilizarea stenței EMMET.

 & lt; nav & gt;
  & lt; ul & gt;
    "Li & gt; & lt; un href =" CLASS = "CAPITOLUL" & GT; Capitolul 1
 de 3 & lt; / lit; / li & gt;
    "Li & gt; un HREF =" CLASS = "CAPITOLUL" & GT; Capitolul 2
 de 3 & lt; / lit; / li & gt;

Emmet este, de asemenea, conștient de context. De exemplu, dacă edităm a & lt; mese & gt; Este probabil că vom dori unele & lt; tr & gt; (acestea sunt elemente de rulare) pentru ao umple. Tot ce ar trebui să facem este să specificați cât de mulți avem nevoie.

Acesta este doar un exemplu rapid despre ceea ce poate face EMMET, dar există multe opțiuni de configurare disponibile. Acestea includ editarea CSS, crearea clasei BEM (modificator de elemente bloc) și există chiar un generator Lorem Ipsum.

De asemenea, merită remarcat faptul că majoritatea editorilor de coduri au fie Emmet încorporată sau susțin prin pluginuri. Puteți afla mai multe despre acest lucru pe Documentația Emmet pagină.

Utilizați PUG pentru conținut dinamic

În timp ce Emmet este ideal pentru conținutul static, ce se întâmplă dacă conținutul trebuie să fie mai dinamic? De exemplu, este posibil să trebuiască să generam pagini de pornire personalizate, tabele complexe de comandă sau repetați blocuri comune de HTML. Acest lucru este posibil în JavaScript, dar prin pre-redarea acestui conținut putem obține un impuls de viteză adăugat fără a se baza pe browserul utilizatorului. Amintiți-vă dacă aveți o pagină grele media, veți dori să o sprijiniți de încredere Stocare in cloud .

Pas înainte. Acesta este un instrument de templare pentru HTML. Puteți scrie pagini în formatul ".Pug", iar PUG va citi acel fișier, injectați unele date dinamice în acesta și returnați HTML standard. Exemplul de mai jos este modul în care ați scrie codul în Pug pentru a crea același HTML ca exemplul EMMET (de mai sus).

 ul
  fiecare val în [1, 2, 3]
    Li.
      a (href = ", clasa =" capitolul ") capitol
# {val} de 3

Un fișier pug utilizează doar indentare pentru a indica cuibul.Acesta poate itera peste valori pentru a genera cantități mari de HTML într-o singură trecere.Aceste fișiere ".pug" sunt concepute pentru a fi reutilizate de mai multe ori pe un proiect.

PUG este disponibil pentru instalarea de la pachetul Manager NPM. .Dar, dacă doriți mai multe informații despre cum să începeți cu PUG să plătiți o vizită la Website .

Acest conținut a apărut inițial în revista Web Designer.

Citeste mai mult:

10 BEST. Cadre CSS.
CSS animație Exemple de recreare
8 etichete HTML trebuie să utilizați (și 5 pentru a evita)

Cum se scrie codul HTML mai repede

Generați HTML în zbor

Cum se utilizează Emmet

Utilizați PUG pentru conținut dinamic

să - Cele mai populare articole

Adobe Fresco Tutorial: Creați un portret în aplicația de pictură

Cum se creează un personaj de joc video în Zbrush

Cum să pictezi o fată Elven

Trei pași până la un cer de noapte spumant în acuarelă

Regulile de tipografie web receptivă

Age o fotografie în Photoshop CC

Secretul de a picta ca Monet

Ghidul final pentru compozitarea imaginilor în Photoshop

Categorii