Ομορφοποιητής & Συμπιεστής HTML δωρεάν
Μορφοποιήστε ή συμπιέστε HTML με σωστή εσοχή φωλιάσματος. Διατηρεί περιεχόμενο εντός μπλοκ <pre>, <script>, <style>.
Αφήστε ένα αρχείο εδώ ή κάντε κλικ για αναζήτηση
HTML, HTM · επεξεργάζεται στη συσκευή σας
ή πατήστε Ctrl+V για επικόλληση από το πρόχειρο
Η έξοδος θα εμφανιστεί εδώ…Συνηθισμένες χρήσεις
- Debug Server-Rendered HTMLΠροβολή ακατέργαστης εξόδου HTML από το διακομιστή σας (PHP, Rails, Django, Node) σε μορφή αναγνώσιμη με εσοχή.
- Μορφοποίηση Email HTML TemplatesΤο ηλεκτρονικό ταχυδρομείο HTML είναι λεκτικό (πίνακες, σύνθετα στυλ). Μορφοποιήστε το για να το κάνετε επεξεργάσιμο και συντηρήσιμο.
- Μορφοποίηση Static HTML PagesΤα στατικά αρχεία HTML που επεξεργάζονται χειροκίνητα ωφελούνται από συνεπή μορφοποίηση για συνεργατική επεξεργασία.
- Εκκαθάριση CMS-Exported HTMLWordPress, Wix, Squarespace εξάγουν HTML με πολλά άδρανα. Μορφοποιήστε για να το κάνετε επεξεργάσιμο.
- Minify HTML για ΠαραγωγήΜείωση μεγέθους αρχείου HTML για γρηγορότερη φόρτωση σελίδας με αφαίρεση κενού χώρου και περιττών χαρακτήρων.
Πώς λειτουργεί
Αυτό το εργαλείο μορφοποιεί ή συμπιέζει HTML με χειρόγραφο tokenizer που αναγνωρίζει tags, ενσωματωμένο στη σελίδα — χωρίς βιβλιοθήκη μορφοποίησης τρίτων ή επικοινωνία με διακομιστή. Κάθε χαρακτήρας του markup σας επεξεργάζεται τοπικά στον browser τη στιγμή που πληκτρολογείτε ή επικολλάτε.
- 1Ο tokenizer σαρώνει το markupΈνας προσαρμοσμένος σαρωτής χαρακτήρα προς χαρακτήρα διατρέχει τη συμβολοσειρά HTML, εντοπίζοντας σχόλια, δηλώσεις DOCTYPE, tags ανοίγματος, tags κλεισίματος, αυτοκλειόμενα void στοιχεία (br, img, input κ.λπ.) και κόμβους κειμένου. Ένας ειδικός βοηθός παρακολουθεί τις τιμές χαρακτηριστικών σε εισαγωγικά, ώστε χαρακτήρες όπως > μέσα σε χαρακτηριστικό (π.χ. value="a>b") να μη χωρίζουν ποτέ πρόωρα ένα tag.
- 2Το βάθος εσοχής παρακολουθείται ανά tagΣτη λειτουργία ωραιοποίησης, ο tokenizer διατηρεί μετρητή βάθους. Τα tags ανοίγματος επιπέδου μπλοκ αυξάνουν το βάθος· τα tags κλεισίματος το μειώνουν πριν γραφτούν. Τα inline στοιχεία (span, a, strong, em κ.λπ.) μένουν στην ίδια γραμμή με το περιεχόμενό τους αντί να μετακινούνται σε δική τους γραμμή με εσοχή. Tags όπως pre, script, style και textarea εξάγουν το εσωτερικό τους αυτούσιο, ώστε να μην αλλοιώνεται κώδικας ευαίσθητος στα κενά ή εκτελέσιμος.
- 3Ο minifier συμπτύσσει τα κενά με ασφάλειαΣτη λειτουργία ελαχιστοποίησης, το περιεχόμενο των μπλοκ pre, script, style και textarea αντικαθίσταται από αριθμημένους φρουρούς πριν από οποιαδήποτε σύμπτυξη κενών. Τα σχόλια HTML αφαιρούνται και οι ακολουθίες κενών μεταξύ tags διαγράφονται — εκτός από γειτονικά inline στοιχεία, όπου διατηρείται ένα κενό ώστε να μην ενώνονται οι λέξεις. Έπειτα οι φρουροί αντικαθίστανται ξανά με το αρχικό περιεχόμενο.
- 4Η έξοδος εμφανίζεται και προαιρετικά αποθηκεύεταιΤο μορφοποιημένο ή ελαχιστοποιημένο αποτέλεσμα εμφανίζεται ζωντανά στο πλαίσιο εξόδου μαζί με ποσοστό αλλαγής μεγέθους. Μπορείτε να το αντιγράψετε στο πρόχειρο ή να το κατεβάσετε ως αρχείο .html, χωρίς να φύγετε από τον browser.
Σχετικά εργαλεία
Ομορφοποιητής CSS
Μορφοποιήστε συμπιεσμένο CSS με συνεπή εσοχή ή συμπιέστε το. Προαιρετική αλφαβητική ταξινόμηση ιδιοτήτων για προβλέψιμες διαφορές.
Συμπιεστής & Ομορφοποιητής CSS
Συμπιέστε CSS για μείωση μεγέθους αρχείου ή ομορφοποιήστε συμπιεσμένο CSS για αναγνωσιμότητα. Άμεσο, στο πρόγραμμα περιήγησής σας.
Μορφοποιητής & Επαληθευτής XML
Μορφοποιήστε και επαληθεύστε XML χρησιμοποιώντας τον εγγενή αναλυτή DOM του προγράμματος περιήγησής σας. Περιλαμβάνει συμπιεσμένη έξοδο για χρήση σε παραγωγή.