Εργαλείο Ομορφοποίησης HTML- Δωρεάν διαδικτυακό εργαλείο μορφοποίησης και ωραιοποίησης HTML

Input data
bfotool loadding
Output data
bfotool loadding

Μορφοποιητής HTML

Εισαγάγετε τον ακατάστατο, ελαχιστοποιημένο ή ασαφή κώδικα HTML στο παραπάνω πεδίο για να τον καθαρίσετε και να τον κάνετε όμορφο. Ο παραπάνω επεξεργαστής περιέχει επίσης χρήσιμους αριθμούς γραμμών και επισήμανση σύνταξης. Υπάρχουν πολλές επιλογές για να προσαρμόσετε τον καλλωπιστή στις προσωπικές σας προτιμήσεις μορφοποίησης.

Πότε χρησιμοποιείτε το HTML Viewer, το HTML Formatter, το HTML Formatter

Συχνά, όταν γράφετε HTML, η εσοχή, τα κενά και άλλες μορφές μορφοποίησης μπορεί να αποδιοργανωθούν λίγο. Είναι επίσης σύνηθες πολλοί προγραμματιστές να εργάζονται σε ένα μόνο έργο, οι οποίοι χρησιμοποιούν διαφορετικές τεχνικές μορφοποίησης. Αυτό το εργαλείο είναι χρήσιμο για να κάνει τη μορφοποίηση ενός αρχείου συνεπή. Είναι επίσης σύνηθες η HTML να είναι ελαχιστοποιημένη ή να είναι ασαφής. Μπορείτε να χρησιμοποιήσετε αυτό το εργαλείο για να κάνετε τον κώδικα να φαίνεται όμορφος και ευανάγνωστος, ώστε να είναι πιο εύκολη η επεξεργασία του.

Παραδείγματα μορφοποιητή HTML

Η ελαχιστοποιημένη HTML παρακάτω:

<nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">WebSiteName</a> </div><ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li><li><a href="#">Page 1</a></li><li><a href="#">Page 2</a></li><li><a href="#">Page 3</a></li></ul> </div></nav>

Γίνεται τόσο όμορφο:

<nav class="navbar navbar-default">  
     <div class="container-fluid">  
         <div class="navbar-header"> <a class="navbar-brand" href="#">WebSiteName</a>   
         </div>  
         <ul class="nav navbar-nav">  
             <li class="active"><a href="#">Home</a>  
             </li>  
             <li><a href="#">Page 1</a>  
             </li>  
             <li><a href="#">Page 2</a>  
             </li>  
             <li><a href="#">Page 3</a>  
             </li>  
         </ul>  
     </div>  
 </nav>