HTML, CSS und JavaScript online ausführen
Dieser Online-HTML-Editor stellt Ihnen drei Dateien zur Verfügung, index.html, style.css und script.js, mit einer Live-Vorschau daneben. Geben oder fügen Sie Code ein und die Seite wird automatisch ausgeführt, oder drücken Sie Ausführen (Strg/Cmd + Enter), um sie sofort auszuführen. Er macht das, was man von einem HTML-Compiler oder Code-Runner erwartet, obwohl nichts kompiliert wird: Ihr Browser rendert das HTML, wendet das CSS an und führt das JavaScript genauso aus, wie er es bei einer echten Webseite tun würde.
Ein Echtzeit-HTML-Editor mit Live-Vorschau
Die Vorschau aktualisiert sich etwa eine halbe Sekunde, nachdem Sie aufhören zu tippen. Jede neue Version wird im Hintergrund geladen und ersetzt die alte erst, wenn sie bereit ist. Wechseln Sie zwischen responsiven, Desktop-, Tablet- und mobilen Breiten, um ein Layout zu überprüfen. Öffnen Sie die Konsole für console.log-Ausgaben und JavaScript-Fehler; klicken Sie auf eine Datei und Zeile, wenn ein Standort verfügbar ist.
HTML-Code in einer privaten Sandbox testen
Dieser Editor verarbeitet Ihren Code und speichert Ihren Entwurf in Ihrem Browser. Er lädt Ihren Code nicht hoch. Die Vorschau blockiert Links, Formularübermittlungen, Pop-ups, fetch und XMLHttpRequest. HTTPS-Skripte, Stylesheets, Bilder und Schriftarten können weiterhin geladen werden. Code und Bibliotheken, die Sie ausführen, können über diese Ressourcen Daten senden, einschließlich Seiteninhalte. Führen Sie nur Code aus, dem Sie vertrauen.
Wie man eine HTML-Datei ausführt
- Füge deinen HTML-Code in index.html ein oder bearbeite die Startseite. Füge CSS in style.css und JavaScript in script.js ein; beide werden der Seite automatisch hinzugefügt.
- Beobachte, wie sich die Vorschau während der Eingabe aktualisiert, oder drücke Ausführen (Strg/Cmd + Enter).
- Öffne die Konsole, um auf Fehler zu prüfen. Klicke auf den Ort eines Fehlers, um zu dieser Zeile zu springen.
- Lade index.html herunter, um eine einzige Datei zu erhalten, in der dein CSS und JavaScript enthalten sind. Öffne sie in einem beliebigen Browser oder in Phoenix Code, um weiterzubauen.
Online-HTML-Editor oder Phoenix Code?
Diese Seite ist für schnelle Experimente und zum Lernen gedacht. Wenn aus einer Seite ein Projekt wird, ist Phoenix Code ein kostenloser Open-Source-Code-Editor für die Webentwicklung. Er läuft in deinem Browser unter web.phcode.dev und als Desktop-App für Windows, Mac und Linux.
Fragen zum HTML-Editor
Wie führe ich HTML-Code online aus?
Fügen Sie Ihren Code in index.html ein. Die Vorschau führt ihn automatisch aus, wenn Sie mit dem Tippen aufhören, oder Sie können auf Ausführen klicken oder Strg/Cmd + Enter drücken, um ihn sofort auszuführen. CSS in style.css und JavaScript in script.js werden für Sie zur Seite hinzugefügt.
Ist das ein HTML-Compiler?
HTML wird nicht kompiliert. Leute suchen nach einem HTML-Compiler oder Code-Runner, wenn sie sehen wollen, was ihr Code bewirkt, und genau das zeigt dieser Editor: Ihr Browser rendert das HTML und führt das JavaScript direkt aus. JavaScript-Fehler erscheinen in der Konsole; HTML und CSS werden nicht auf Gültigkeit überprüft.
Kann ich CSS-Frameworks und JavaScript-Bibliotheken verwenden?
Ja. Verlinken Sie sie über eine HTTPS-URL, zum Beispiel über einen Bootstrap- oder Tailwind-CDN-Link in index.html. Netzwerkanfragen durch Ihren eigenen Code, wie fetch oder XMLHttpRequest, werden in der Vorschau blockiert.
Ist es kostenlos und brauche ich ein Konto?
Es ist kostenlos und benötigt kein Konto. Dieses Tool lädt Ihren Code nicht hoch. Code und externe Ressourcen, die Sie ausführen, können andere Server kontaktieren und Daten senden. Ein Entwurf wird in diesem Browser gespeichert, damit Sie darauf zurückgreifen können.
Wie speichere ich meinen Code oder arbeite in Phoenix Code weiter?
Laden Sie index.html herunter, um eine einzelne Datei mit Ihrem CSS und JavaScript zu speichern, oder verwenden Sie „Alles kopieren“. Um in Phoenix Code weiterzuarbeiten, wählen Sie „Code zum Fortfahren kopieren“ und dann „Phoenix Code öffnen“, nachdem das Kopieren erfolgreich war. Schließen Sie den Willkommensbildschirm, falls er angezeigt wird, öffnen Sie index.html in einem Projekt, ersetzen Sie dessen Inhalt durch die kopierte Seite, speichern Sie und öffnen Sie die Live Preview. Ihr Code wird nicht automatisch übertragen.
Was ist der beste kostenlose HTML-Editor für Windows, Mac oder Linux?
Der beste ist der, der zu Ihrer Arbeitsweise passt. Phoenix Code ist ein kostenloser Open-Source-HTML-Editor für Windows, Mac und Linux, der auch im Browser läuft. Er ist der Nachfolger von Adobe Brackets und bringt Live-Vorschau, Code-Hinweise und Emmet von Haus aus mit.