Online-HTML-Editor & Code-Runner mit Live-Vorschau
Schreibe HTML, CSS und JavaScript und sieh zu, wie sich die Seite beim Tippen aktualisiert. Kostenlos und ohne Anmeldung.
Lokale Bearbeitung – externe Ressourcen können Daten senden
HTML-Editor-Arbeitsbereich
BereitÄnderungen ausstehendWird ausgeführt…Vorschau aktualisiertMit Fehlern aktualisiertVorschau nicht aktualisiertAuto-Ausführung pausiertDas Laden der Seite hat zu lange gedauert, daher wurde die Vorschau nicht aktualisiert. Prüfen Sie auf eine Endlosschleife und drücken Sie dann Ausführen.Die Seite hat versucht, eine andere Adresse zu öffnen. Die Navigation in der Vorschau ist blockiert, daher wird weiterhin die vorherige Version angezeigt.Ihr Code ist mit über 2 MB zu groß, um in diesem Browser eine Vorschau anzuzeigen oder ihn zu speichern. Laden Sie ihn herunter und öffnen Sie ihn stattdessen in Phoenix Code.Bei Code über 1 MB ist die Auto-Ausführung deaktiviert. Drücken Sie Ausführen, um die Vorschau zu aktualisieren.Die letzte Ausführung wurde nicht abgeschlossen, möglicherweise aufgrund einer Endlosschleife. Die Auto-Ausführung ist pausiert: Korrigieren Sie den Code und drücken Sie dann Ausführen.Die Konsolenausgabe deiner Seite wird hier angezeigt.index.html Code-Editorstyle.css Code-Editorscript.js Code-EditorDiese Datei ist sehr groß, daher sind Hervorhebung und Autovervollständigung deaktiviert, um eine schnelle Eingabe zu ermöglichen.Code als eine HTML-Datei kopiert.Kopieren fehlgeschlagen. Lade stattdessen die Datei index.html herunter oder markiere den Code und kopiere ihn.Code kopiert. Schließen Sie in Phoenix Code den Willkommensbildschirm, falls er angezeigt wird, ersetzen Sie index.html durch Ihre kopierte Seite, speichern Sie und öffnen Sie die Live-Vorschau.Code kopieren, um fortzufahrenPhoenix Code öffnenCode wird kopiert…Ihr Code hat sich geändert. Kopieren Sie ihn erneut, bevor Sie fortfahren.index.html heruntergeladen, inklusive deines CSS und JavaScripts.Der Download konnte nicht erstellt werden. Verwende stattdessen „Alles kopieren“.Startdateien wiederhergestellt.In diesem Browser wird dein Entwurf nicht gespeichert. Lade deinen Code herunter, um ihn zu sichern.alert() von deiner Seiteconfirm() hat in der Vorschau false zurückgegebenprompt() hat in der Vorschau null zurückgegebenNetzwerkanfragen wie fetch werden in der Vorschau blockiert.Links werden in der Vorschau nicht geöffnet:Das Absenden von Formularen wird in der Vorschau blockiert. Verarbeite das submit-Ereignis in script.js, um dein Formular zu testen.Pop-up-Fenster werden in der Vorschau blockiert.Konnte nicht geladen werden:Die Konsolenausgabe wurde begrenzt, damit die Vorschau reaktionsfähig bleibt.Die Seite hat einen unbekannten Fehler gemeldet.Eine Schleife, die länger als eine Sekunde ohne Pause lief, wurde angehalten. Sie endet möglicherweise nie.Live-Vorschau Ihrer Seite
HTML, CSS & JavaScriptIhr Entwurf ist in diesem Browser gespeichert.
Bereit
CSS und JS werden automatisch geladenEsc, dann Tab, verlässt den Editor
Drücken Sie Strg oder Cmd plus Enter zum Ausführen. Wenn die Tab-Taste eine Einrückung einfügt, drücken Sie Esc und dann die Tab-Taste, um den Fokus aus dem Editor zu bewegen.
Live-Vorschau
Ihre Seite wird hier angezeigt
Schreiben Sie im Editor oder klicken Sie auf Ausführen, um die Seite zu rendern.
Konsole
So erstellen Sie eine HTML-Datei
Eine HTML-Datei ist eine reine Textdatei, die mit der Dateiendung .html gespeichert wird. Um eine zu erstellen, öffnen Sie einen Texteditor, geben Sie das Seitengerüst unten ein, speichern Sie die Datei als index.html und öffnen Sie sie in einem Browser. Die Startseite im Editor oben enthält dieses Gerüst bereits, sodass Sie es auch dort bearbeiten und auf „Herunterladen“ klicken können.
Öffnen Sie einen reinen Texteditor: Notepad unter Windows, TextEdit auf dem Mac (wählen Sie zuerst Format und dann In reinen Text umwandeln) oder einen Code-Editor wie Phoenix Code oder VS Code (Datei, dann Neue Datei).
Geben Sie das HTML-Grundgerüst ein: die Doctype-Zeile, dann die html-, head- und body-Tags, mit einem title im head und Ihrem Text im body. Kopieren Sie das folgende Beispiel, um zu beginnen.
Speichern Sie sie als index.html. Stellen Sie in Notepad zuerst den Dateityp auf Alle Dateien ein, sonst wird die Datei zu index.html.txt und öffnet sich als reiner Text anstatt als Webseite. Jeder Name funktioniert, solange er auf .html endet und keine Leerzeichen enthält.
Öffnen Sie die Datei: Machen Sie einen Doppelklick darauf und Ihr Browser rendert die Seite. Um eine HTML-Datei zu erstellen, ohne etwas auf Ihrem Computer zu speichern, fügen Sie das Grundgerüst in den obigen Editor ein und klicken Sie auf Herunterladen.
Dieselben Schritte decken jede Art der Fragestellung ab. Eine Datei in HTML erstellen, ein HTML-Dokument anlegen oder eine neue .html-Datei beginnen bedeutet alles, dieses Grundgerüst einzugeben und es mit der .html-Erweiterung zu speichern.
<!doctype html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Hello, world</h1>
<p>This is my first web page.</p>
</body>
</html>
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.
Funktion
Dieser Online-Editor
Phoenix Code
Dateien
index.html, style.css und script.js
Ganze Projekte, mit Ordnern und beliebig vielen Dateien
Vorschau
Live-Vorschau in einer Sandbox auf dieser Seite
Live-Vorschau, die das Element hervorhebt, das Sie gerade bearbeiten
Speichern
Ein Entwurf in diesem Browser und eine HTML-Datei zum Herunterladen
Ihre Dateien, gespeichert in Ihrem Projektordner
Programmierhilfe
Autovervollständigung und eine Konsole
Code-Hinweise, Emmet und HTML-Validierung, plus Git in der Desktop-App
Kosten
Kostenlos, keine Anmeldung
Kostenlose Community Edition, mit optionalen Phoenix Pro-Funktionen
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.
Wie erstelle ich eine index.html-Datei?
Erstellen Sie eine neue reine Textdatei, fügen Sie das HTML-Grundgerüst ein und speichern Sie sie unter dem genauen Namen index.html. Stellen Sie in Notepad den Dateityp auf Alle Dateien ein, damit sie nicht zu index.html.txt wird. Webserver öffnen zuerst die Datei index.html, weshalb die Startseite einer Website diesen Namen verwendet. In diesem Editor heißt die Startdatei bereits index.html, wenn Sie also auf Herunterladen klicken, erhalten Sie eine.
Zuletzt aktualisiert:
Erstellen Sie die gesamte Website mit Phoenix Code
Arbeiten Sie mit ganzen Projekten und der Live Preview in der kostenlosen Community Edition. Phoenix Pro fügt die visuelle Bearbeitung von Text, Bildern und Stilen hinzu. Die Desktop-App enthält eine 7-tägige Pro-Testversion; Community bleibt danach kostenlos.