Was ist der Unterschied zwischen Verschönerung und Minifizierung von HTML?

Verschönern fügt Zeilenumbrüche und Einrückungen hinzu, sodass die Verschachtelung leicht zu lesen ist, was ideal zum Bearbeiten und Debuggen ist. Durch Minifizieren wird der unbedeutende Leerraum zwischen den Tags entfernt, um eine kleinere Datei für die Produktion zu erzeugen. Beide behalten das gleiche gerenderte Ergebnis; nur der Leerraum ändert sich.

Ändert sich durch die Formatierung die Art und Weise, wie meine Seite rendert?

In fast jedem Fall nein: der Formatierer ändert Leerzeichen, keine Elemente oder Text, und Pre - und Textarea-Inhalte werden exakt beibehalten Es gibt drei Kantenfälle Leerzeichen-Läufe im Inneren von Text und Attributwerte kollabieren auf ein Leerzeichen Verschönern kann benachbarte Inline-Elemente wie a b auf separate Zeilen verschieben, wenn sie sich einen übergeordneten Punkt mit einem Blockelement teilen, das einen sichtbaren Raum zwischen ihnen hinzufügt Und Text, der mit CSS-Weißraum gestylt ist: Voraußen ein Pre-Tag verliert seinen Abstand. Überprüfen Sie diese Punkte nach der Formatierung.

Reformiert es JavaScript auch in -Tags neu?

Nr. Inhalte innerhalb von Skript - und Style-Tags werden als Rohtext behandelt: Das Tool macht das HTML um sich herum neu einrückend, aber nicht erneut einrückend oder umschreibend für den Code, so behalten Template-Literale, reguläre Ausdrücke und CSS-Werte ihre Zeichen, die einzige Änderung ist, dass führende Leerzeilen und nachfolgender Leerraum innerhalb des Tags beschnitten werden Wenn Sie das JavaScript selbst formatiert benötigen, führen Sie es separat durch einen JavaScript-Formatierer aus.

Gibt der Formatierer defekte oder nicht geschlossene Tags wieder ein?

Ja, im Rahmen des Zumutbaren Der Parser wendet die implizit schließenden Regeln an, die Browser für Tags wie li, p und td verwenden, schließt offene Tags, wenn ein Elternteil schließt, und schließt automatisch alles, was am Ende des Dokuments noch offen ist, und gibt dann das Ergebnis neu ein Jede Reparatur erscheint als Warnung wie "Dokument endete mit 1 nicht geschlossenen Tag (s); sie wurden automatisch geschlossen" Ein schließendes Tag ohne passenden Öffner wird mit einer "Stray-schließende Tag ignoriert" - Warnung weggelassen, also lesen Sie die Warnungen, bevor Sie das Original ersetzen.

Ist es sicher HTML zu formatieren, das sensible Daten enthält?

Ja. Der Parser läuft in Ihrem Browser komplett in JavaScript Keine Netzwerkanfrage trägt Ihr Markup, nichts wird gespeichert, und das Tool funktioniert offline, sobald es geladen ist HTML, das interne Links, API-Antworten oder unveröffentlichte Kopien enthält, verlässt Ihren Computer nie.

Welche Einrückungsmöglichkeiten stehen zur Verfügung?

Die Beautify-Ausgabe unterstützt 2 Leerzeichen, 4 Leerzeichen oder Registerkarten. Zwei Leerzeichen sind die übliche Standardeinstellung für Webprojekte, vier Leerzeichen passen zu Teams, die eine breitere Einrückung bevorzugen, und auf Registerkarten kann jeder Entwickler seine eigene Anzeigebreite im Editor festlegen.

Ist dieser HTML-Formatierer kostenlos?

Ja, es ist kostenlos, keine Anmeldung Jeder Format - oder Minify-Klick zählt in Richtung eines täglichen Nutzungslimits pro Tool, 10 pro Tag als Gast und 50 pro Tag mit einem kostenlosen Konto. Die Zählung zeichnet nur den Modus und die Optionen auf, die Sie ausgewählt haben, niemals den Markup, den Sie eingefügt haben.

Warum haben sich Tag-Namen oder Attributabstände nach der Formatierung geändert?

Der Formatierer normalisiert Tags, während er sie neu erstellt Tag-Namen sind klein geschrieben, so wird zu , während Attributnamen ihren Fall behalten Whitespace zwischen Attributen bricht auf ein einzelnes Leerzeichen zusammen, und so wird eine Reihe von Leerzeichen innerhalb eines zitierten Attributwerts, so title= "a b" wird title="a b" Browser behandeln Tag-Namen in jedem Fall gleich, aber ein Attributwert, bei dem der genaue Abstand überprüft werden sollte.

Wie unterscheidet sich ein HTML-Formatierer von einem HTML-Minifier?

Ein Formatierer hat beide Richtungen in einem Werkzeug: Verschönern, um Markup zum Lesen zu erweitern, und Minifizieren, um es für den Versand zu kollabieren Ein dedizierter Minifier komprimiert nur, Wenn Sie hauptsächlich Produktionskomprimierung benötigen, konzentriert sich der HTML-Minifier darauf; wenn Sie zwischen Lesen und Versand wechseln, deckt der Formatierer beides ab.

HTML-Formatierer

HTML online formatieren, verschönern und minifizieren. Zeigt unordentliches oder minifiziertes Markup erneut ein, hält Skript, Stil und Pre-Inhalte wörtlich und läuft vollständig in Ihrem Browser.

HTML Input

Indent:

Remove comments

Was ist ein HTML-Formatierer?

Ein HTML-Formatierer schreibt HTML-Markup mit sauberer, konsistenter Einrückung um, sodass die Struktur des Dokuments leicht zu lesen ist Fügen Sie eine minifizierte Seite, einen aus einem Build-Tool kopierten Ausschnitt oder handgeschriebene Markup mit nicht übereinstimmenden Tabs und Leerzeichen ein, und der Formatierer analysiert den Tag-Baum und druckt ihn mit einer Einrückungsstufe pro Verschachtelungstiefe zurück. Der umgekehrte Vorgang, das Minifizieren, streicht den unbedeutenden Leerraum zwischen Tags, um die Datei für die Produktion zu verkleinern, ohne die Art und Weise zu ändern, wie der Browser sie rendert.

Raw HTML kommt selten in einem Zustand an, den Sie scannen können Servervorlagen geben es auf einer einzigen Zeile aus, Bundler kollabieren es, und eingefügte Fragmente tragen den Abstand der verwendeten Quelle. Verschönern legt die Verschachtelung offen, damit Sie das benötigte Element finden, ein Tag erkennen können, das nie geschlossen wurde, oder zwei Versionen sauber verbreiten. Dies ist am wichtigsten, wenn Sie ein Layout debuggen, Markup auf Barrierefreiheit prüfen oder den Inhalt einer anderen Person zum ersten Mal lesen. Ein Formatierer verwandelt eine Wand aus Winkelklammern in einen Umriss, dem Sie folgen können.

Ein funktioniertes Beispiel zeigt, was dieser kostenlose HTML-Formatierer mit schlampiger Eingabe macht. Einfügen <ul>PH1__One<li>Two</ul>Hi there, Verschönern und 2 Leerzeichen auswählen und auf Format klicken. Der Online-HTML-Formatierer schließt beide Listenelemente und den Absatz, setzt jedes Li auf seine eigene eingerückte Zeile und hält Hi there<li>0___5 nie kaputt. Die Ausgabe lautet 5-Code-Markierung

Dieses Tool läuft in Ihrem Browser zu 100% mit einem abhängigkeitsfreien Parser, es wird also nichts hochgeladen oder protokolliert, was Sie einfügen, und es funktioniert offline weiter, sobald die Seite geladen wurde Der Parser ist bewusst tolerant: Er wendet dieselben implizit schließenden Regeln an, die ein Browser für Tags wie li, p, td und Option verwendet, sodass das reale Markup mit weggelassenen End-Tags immer noch korrekt formatiert. Inhalte innerhalb von Skript, Stil, Pre, Textarea und Titel werden wörtlich kopiert, was bedeutet, dass Ihr JavaScript, CSS und vorformatierter Text niemals neu eingegeben oder gebrochen werden.

Wie benutzt man das HTML-Formatierer?

Fügen Sie Ihr HTML ein
Fügen Sie jegliches HTML in das Eingabefeld ein, egal ob es auf eine Zeile minifiziert, inkonsistent eingerückt oder ein Fragment aus einer Vorlage kopiert wird Klicken Sie auf Beispiel laden, um von einer kleinen realistischen Seite zu beginnen.
Wählen Sie Verschönerung oder Minify
Wählen Sie Beautify, um das Markup für Lesen und Bearbeiten erneut einzugeben, oder Minify, um es für die Produktion auf die kleinste weiße, raumfreie Form zu reduzieren.
Einrückung und Optionen festlegen
Wählen Sie 2 Leerzeichen, 4 Leerzeichen oder Registerkarten zur Verschönerung der Ausgabe aus und entfernen Sie optional HTML-Kommentare. Das Dokument wird zuerst analysiert, sodass nicht geschlossene Tags als Warnungen gemeldet werden.
Kopieren oder laden Sie das Ergebnis herunter
Kopieren Sie das formatierte HTML in Ihre Zwischenablage oder laden Sie es als .html-Datei herunter und legen Sie es dann in Ihren Editor, Ihre Vorlage oder Ihre Seite.

Hauptmerkmale

verschönern und verkleinern
HTML mit 2-Leerzeichen, 4-Leerzeichen oder Tab-Einrückung zur Lesbarkeit neu einrücken oder auf die kleinste Leerzeichen-freie Form minimieren, beide aus demselben Tool.
Toleranter Parser
Wendet die impliziten Schließregeln des Browsers für Tags wie li, p, td und Option an, sodass Markup mit weggelassenen End-Tags immer noch korrekt formatiert und nicht kaputt geht.
Drehbuch und Stil erhalten
Inhalte in Skript, Stil, Pre, Textbereich und Titel werden wörtlich kopiert, sodass Ihr JavaScript, CSS und vorformatierter Text niemals neu eingerückt oder geändert werden.
Inline-Aware-Ausgabe
Kurze Absätze und Inline-Läufe wie a, stark, und em bleiben auf einer Zeile, anstatt Tag für Tag geteilt zu werden, sodass sich das Ergebnis so liest, wie Sie es schreiben würden.

Frequently Asked Questions

Fügen Sie den HTML-Code in das HTML-Eingabefeld ein, wählen Sie Verschönern, wählen Sie 2 Leerzeichen, 4 Leerzeichen oder Tabulat aus und klicken Sie auf Format. Das Tool analysiert den Tag-Baum und gibt ihn erneut ein, selbst wenn die Eingabe eine einzelne minifizierte Zeile ist, dann können Sie das Ergebnis kopieren oder als formatiert herunterladen.html. Die gesamte Verarbeitung findet in Ihrem Browser statt, sodass das Markup nicht hochgeladen wird.

Related Tools

HTG

docs

HTML Table Generator

Generate an accessible HTML table from pasted CSV or tab-separated data. Add a header row, caption, striped rows, and borders, then copy the HTML and CSS. Runs client-side.

HTM

docs

HTML to Markdown

Convert HTML to clean Markdown instantly. Turns headings, lists, links, images, blockquotes, code blocks and tables into portable GitHub Flavored Markdown. Tolerant of messy CMS markup. Runs client-side.

MTG

docs

Markdown Table Generator

Build Markdown tables in a spreadsheet-style editor - import CSV, Excel, or an existing table, set alignment, copy clean GFM

MTH

docs

Markdown to HTML

Convert Markdown to clean, semantic HTML with GitHub Flavored Markdown support - tables, task lists, fenced code, heading anchors, live preview and a full HTML document export.

Comments

0 comments

No comments yet. Be the first to share your thoughts!

html formatterhtml beautifierbeautify htmlformat htmlhtml minifierhtml pretty printindent htmlhtml formatter onlineclean up htmlhtml formatter freeonline html formatterhtml code formatter

Erfahren Sie mehr

Lesen Sie die vollständige HTML-Formatierer-Anleitung

Command Palette

HTML-Formatierer

Was ist ein HTML-Formatierer?

Wie benutzt man das HTML-Formatierer?

Fügen Sie Ihr HTML ein

Wählen Sie Verschönerung oder Minify

Einrückung und Optionen festlegen

Kopieren oder laden Sie das Ergebnis herunter

Hauptmerkmale

verschönern und verkleinern

Toleranter Parser

Drehbuch und Stil erhalten

Inline-Aware-Ausgabe

Frequently Asked Questions

Related Tools

HTML Table Generator

HTML to Markdown

Markdown Table Generator

Markdown to HTML

Comments

Erfahren Sie mehr