Utilia
Kategorijas ▾
Valoda: lv ▾

HTML formatētājs

Sakārtojiet nekārtīgu HTML ar tīrām atkāpēm vai droši minimizējiet to pārlūkprogrammā. Iekļautais CSS un JavaScript tiek formatēti. Nekas netiek augšupielādēts.

Kā formatēt HTML

  1. Ielīmējiet savu HTML vai noklikšķiniet uz Atvērt failu, lai ielādētu .html vai .htm failu (līdz 10 MB).
  2. Izvēlieties Atkāpe (2 atstarpes, 4 atstarpes vai tabulācija) un to, vai Lauzt rindas pie 80 vai 120 rakstzīmēm.
  3. Atzīmējiet Ievilkt un , ja vēlaties tos ievilkt <html> iekšienē, un Noņemt komentārus, lai izmestu <!-- … --> komentārus.
  4. Noklikšķiniet uz Formatēt (sakārtot), lai iegūtu lasāmu kodu, vai uz Minimizēt, lai iegūtu mazāko drošo versiju.
  5. Nokopējiet vai lejupielādējiet rezultātu. Statusa rindiņa rāda izmēru pirms un pēc.

Rezultāts izvades lodziņā tiek parādīts kā vienkāršs teksts. Jūsu HTML šajā lapā nekad netiek renderēts vai izpildīts, tāpēc ielīmētajā kodā esoši skripti neko nevar izdarīt.

Sakārtošana: lasāms, konsekventi ievilkts HTML

Formatēt (sakārtot) izmanto js-beautify, formatētāju, kas ir daudzos koda redaktoros:

  • bloka elementi tiek novietoti savās rindās, ievilkti pēc ligzdošanas dziļuma, savukārt iekļautie elementi, piemēram, <a>, <b> vai <span>, paliek tekstā;
  • <script> un <style> saturs tiek formatēts kā JavaScript un CSS;
  • <pre> un <textarea> tiek atstāti tieši tādi, kādi rakstīti, jo to atstarpes ir redzamas;
  • secīgas tukšās rindas tiek samazinātas līdz vienai;
  • ar rindu lauzšanas platumu garās teksta rindas un garie atribūtu saraksti tiek lauzti.

Sakārtošana neizlabo bojātu marķējumu: neaizvērts <div> paliek neaizvērts, un tam sekojošā atkāpe parāda, kur ir problēma.

Minimizēšana: mazāks HTML bez lapas izmaiņām

Minimizēt izmanto apzināti piesardzīgu pieeju:

  • atstarpju, tabulāciju un rindu pārnesumu virknes tekstā kļūst par vienu atstarpi, tieši kā to attēlo pārlūkprogramma;
  • atstarpes blakus bloka līmeņa un head elementiem (<div>, <p>, <li>, <td>, <meta>, <br>…) tiek noņemtas, jo tās nekad netiek renderētas;
  • viena atstarpe starp iekļautajiem elementiem tiek saglabāta, tāpēc <b>big</b> <i>world</i> nepārvēršas par „bigworld“;
  • komentāri tiek noņemti, ja ir atzīmēts Noņemt komentārus, izņemot nosacījuma komentārus (<!--[if IE]>) un komentārus, kas sākas ar <!--!;
  • <script>, <style>, <pre> un <textarea> saturs netiek skarts nekad, un atribūtu vērtības tiek saglabātas precīzi, ieskaitot pēdiņas.

Tas nenoņem neobligātās aizverošās birkas, nepārraksta atribūtus un nesaspiež iekļauto JavaScript un CSS: šīs optimizācijas ietaupa nedaudz vairāk, bet var sabojāt lapas. Lielākajai daļai lapu HTTP saspiešana (gzip vai Brotli) ietaupa daudz vairāk nekā jebkurš minimizētājs, tāpēc minimizēšana visnoderīgākā ir HTML, kas iegults e-pastos, veidnēs vai JavaScript virknēs.

Biežāk uzdotie jautājumi

Vai mans kods tiek augšupielādēts?

Nē. Gan formatēšana, gan minimizēšana notiek jūsu pārlūkprogrammā; kods nekad neatstāj jūsu datoru.

Kāpēc mana lapa pēc minimizēšanas izskatās savādāk?

Parastos gadījumos tā nevajadzētu. Vienīgais izņēmums ir CSS, kas maina atstarpju attēlošanu, piemēram, white-space: pre citam elementam nekā <pre> vai <textarea>, vai elements, kura display mainīts no block uz inline: sakļautās atstarpes tur kļūst redzamas.

Vai formatētājs validē manu HTML?

Nē. Tas formatē to, ko jūs tam dodat. Lai pārbaudītu marķējuma derīgumu, izmantojiet validatoru, piemēram, W3C Nu HTML Checker.

Vai varu formatēt Vue, Svelte vai Django veidnes?

Lielākoties. Veidņu birkas tekstā un atribūtos tiek saglabātas, taču sarežģīta veidņu sintakse var sajaukt atkāpes, tāpēc pārbaudiet rezultātu.

Ko maina „Ievilkt <head> un <body>“?

Pēc noklusējuma <head> un <body> sākas tajā pašā līmenī kā <html>, kas ir izplatīta konvencija un ietaupa vienu atkāpes līmeni. Atzīmējiet opciju, lai tos ievilktu vienu līmeni dziļāk.

Saistītie rīki