Kostenloser Online-HTML-Code-Editor mit sofortiger Live-Vorschau. Geben Sie Ihren Code in den Editor ein und sehen Sie, wie sich die Vorschau während der Eingabe ändert. Stellen Sie Ihre Dokumente einfach zusammen, ohne ein Programm zu installieren.
Es gibt einen anderen Online-HTML-Editor, der einen visuellen WYSIWYG-Editor verwendet, der mit dem Quelleditor verknüpft ist, aber wir fanden es notwendig, einen separaten Composer zu erstellen, bei dem TinyMCE die Fehler nicht überschreibt und mehr Freiheit und Kontrolle bietet., Dieser spezielle Editor korrigiert unseren Code jedes Mal, wenn er etwas als Fehler betrachtet, auch wenn wir das nicht wollten. Jetzt können wir Nicht-Standard-Tags und Attribute verwenden, ASP.NET tags und mehr.
Wie benutzt man den HTML-Code-Editor?
Wenn Sie die Website zum ersten Mal laden, wird der Quelleditor mit einem Demotext gefüllt, sodass Sie mit dem Tool experimentieren können. Laden Sie diesen Text jederzeit mit der zugewiesenen Menüoption. Um ein neues Tag zu öffnen, verwenden Sie die Liste über dem Textbereich. Schließen Sie die geöffneten Tags, indem Sie ganz rechts im oberen Bereich auf die Schaltfläche Schließen klicken., Dadurch werden die Elemente einzeln in umgekehrter Öffnungsreihenfolge geschlossen.
Der Hauptbereich der HTML-Komposition verwendet Syntaxhervorhebung, um die Markup-Sprach-Tags leicht unterscheidbar und lesbarer zu machen. Die Anzahl der Zeichen wird zusammen mit den Hauptsteuertasten angezeigt: Rückgängig machen, neue Seite, Schriftgrößeneinstellung, Kompressor und die Haupt-HTML-Reinigungsschaltfläche, die alle überprüften Reinigungsoptionen ausführt.
Der Vorschaubereich befindet sich auf der rechten Seite des Quelleditors und die Änderungen werden hier sofort wiedergegeben, um das HTML-Verfassen menschlicher zu gestalten., Dieser Abschnitt verwendet das Bootstrap-CSS, mit dem Sie die Stile des beliebtesten Frontend-Frameworks verwenden können.
Wenn Sie weiter unten scrollen, finden Sie viele nützliche integrierte Tools. Verwenden Sie den Tag-Assistenten, um Massenoperationen für den Code auszuführen. Nach der ersten Tag-Name-Listenspalte gibt es zusätzliche Optionen, um neue Tags zu erstellen, sie zu ersetzen, sie vollständig mit ihrem Inhalt zu löschen, nur die Tags zu entfernen, die Tag-Attribute bestimmter Tags zu löschen und Tabellen und Listen in strukturierte Div-Elemente zu konvertieren., Neben den vordefinierten iframe -, Table -, Link -, Span -, Image -, Form-und List-Tags können Sie weitere Tags definieren und bearbeiten, die in die Eingabefelder eingegeben werden. Jede Tag Wizard Aktion kann einzeln mit den kleinen Play Buttons ausgeführt werden oder sie können durch Überprüfen der grauen Punkte gesetzt werden und sie alle zusammen mit der Hauptschaltfläche in der oberen rechten Ecke des Fensters anwenden.
Die grundlegendsten HTML-Reinigungsfunktionen sind verfügbar und können einzeln oder alle aktiven Optionen gleichzeitig angewendet werden., Löschen Sie Inline-Stile, unerwünschte Klassen und IDs, leere Tags, Tags, die nur einen nicht unterbrechenden Bereich enthalten, aufeinanderfolgende Leerzeichen und Kommentare. Sie können auch alle Tag-Attribute (mit Ausnahme der src von Bildern und href von Anker-Tags) entfernen oder alle Tags mit einem Mausklick entfernen, wodurch das Dokument zu einem einfachen Text wird.
Das Replace-Tool kann Textbits im gesamten Dokument, im Inhalt, in den Tag-Attributen, in den Stilen oder in den Klassen/IDs suchen und austauschen. Dies unterstützt keine regulären Ausdrücke.,
Die Farbauswahl ist ein weiteres wichtiges Merkmal des HTML-Code-Editors, mit dem wir einfach die gewünschte Farbe auswählen und für die spätere Verwendung speichern können. Die gängigsten Codeausschnitte können einfach in den Editor kopiert werden.
Der Kauderwelsch-Textgenerator füllt den Editor oder den zugewiesenen Bereich auf der Seite mit einigen grundlegenden Lorem Ipsum-Absätzen.
Nützliche Tipps
Sichern Sie den Inhalt und speichern Sie immer den Arbeitsfortschritt.
Stellen Sie sicher, dass Sie die HTML-codebefore Veröffentlichung validieren, um Fehler zu vermeiden.
Lesen Sie über alle schlechten HTML-Praktiken hier.,
Verwenden Sie das folgende CSS, um die aus Tabellen konvertierten Divs zu formatieren: