Utilia
Kategooriad ▾
Keel: et ▾

HTML-i vormindaja

Kaunista segane HTML puhta taandega või minimeeri see ohutult oma brauseris. Ka sisemine CSS ja JavaScript vormindatakse. Midagi ei laadita üles.

Kuidas HTML-i vormindada

  1. Kleebi oma HTML või klõpsa nuppu Ava fail, et laadida .html- või .htm-fail (kuni 10 MB).
  2. Vali Taane (2 tühikut, 4 tühikut või tabulaator) ja kas Murra read pikkusel 80 või 120 märki.
  3. Märgi Taanda ja , kui tahad need <html> sees taandada, ja Eemalda kommentaarid, et jätta ära <!-- … --> kommentaarid.
  4. Klõpsa Vorminda (kaunista) loetava koodi jaoks või Minimeeri kõige väiksema ohutu versiooni jaoks.
  5. Kopeeri tulemus või laadi see alla. Olekurida näitab mahtu enne ja pärast.

Tulemus kuvatakse väljundkastis lihttekstina. Sinu HTML-i ei renderdata ega käivitata sellel lehel, seega kleebitud koodis olevad skriptid ei saa midagi teha.

Kaunistamine: loetav ja ühtlaselt taandatud HTML

Vorminda (kaunista) kasutab js-beautifyt, vormindajat, mis on paljude koodiredaktorite taga:

  • plokkelemendid lähevad eraldi ridadele, taandatud pesastussügavuse järgi, samal ajal kui reasisesed elemendid nagu <a>, <b> või <span> jäävad teksti sisse;
  • <script> ja <style> sisu vormindatakse JavaScripti ja CSS-ina;
  • <pre> ja <textarea> jäetakse täpselt nii, nagu need on kirjutatud, sest nende tühimärgid on nähtavad;
  • järjestikused tühjad read vähendatakse üheks;
  • murdmispikkuse korral murtakse pikad tekstiread ja pikad atribuudiloendid.

Kaunistamine ei paranda katkist märgistust: sulgemata <div> jääb sulgemata ja sellele järgnev taane näitab, kus probleem on.

Minimeerimine: väiksem HTML ilma lehte muutmata

Minimeeri kasutab tahtlikult konservatiivset lähenemist:

  • tühikute, tabulaatorite ja reavahetuste jadad tekstis muutuvad üheks tühikuks, täpselt nagu brauser neid kuvab;
  • tühimärgid plokitaseme ja päiseelementide (<div>, <p>, <li>, <td>, <meta>, <br> jne) kõrval eemaldatakse, sest neid ei renderdata kunagi;
  • üks tühik reasiseste elementide vahel säilib, nii et <b>suur</b> <i>maailm</i> ei muutu kujuks „suurmaailm“;
  • kommentaarid eemaldatakse, kui Eemalda kommentaarid on märgitud, välja arvatud tingimuslikud kommentaarid (<!--[if IE]>) ja kommentaarid, mis algavad <!--!;
  • <script>, <style>, <pre> ja <textarea> sisu ei puututa kunagi ning atribuudiväärtused säilivad täpselt, jutumärgid kaasa arvatud.

See ei eemalda valikulisi sulgemisetikette, ei kirjuta atribuute ümber ega paki reasisest JavaScripti ja CSS-i: need optimeerimised säästavad veidi rohkem, kuid võivad lehti rikkuda. Enamiku lehtede puhul säästab HTTP-pakkimine (gzip või Brotli) palju rohkem kui ükski minimeerija, seega on minimeerimine kõige kasulikum e-kirjadesse, mallidesse või JavaScripti stringidesse põimitud HTML-i jaoks.

Korduma kippuvad küsimused

Kas minu kood laaditakse üles?

Ei. Nii vormindamine kui ka minimeerimine toimuvad sinu brauseris; sinu kood ei lahku sinu arvutist.

Miks nägi minu leht pärast minimeerimist teistsugune välja?

Tavaolukorras ei tohiks. Ainus erand on CSS, mis muudab tühimärkide kuvamist, näiteks white-space: pre muul elemendil kui <pre> või <textarea>, või element, mille kuva on muudetud plokist reasiseseks: seal muutuvad kokku tõmmatud tühikud nähtavaks.

Kas vormindaja valideerib minu HTML-i?

Ei. See vormindab seda, mida annad. Märgistuse korrektsuse kontrollimiseks kasuta valideerijat, näiteks W3C Nu HTML Checkerit.

Kas saan vormindada Vue, Svelte või Django malle?

Enamasti. Malli sildid tekstis ja atribuutides säilivad, kuid keeruline mallisüntaks võib taanet segadusse ajada, seega kontrolli tulemust.

Mida muudab „Taanda <head> ja <body>“?

Vaikimisi algavad <head> ja <body> samal tasemel kui <html>, mis on levinud tava, mis säästab ühe taandetaseme. Märgi valik, et taandada need ühe taseme võrra sügavamale.

Seotud tööriistad