Exécuter du HTML, CSS et JavaScript en ligne
Cet éditeur HTML en ligne vous fournit trois fichiers, index.html, style.css et script.js, avec un aperçu en direct à côté. Saisissez ou collez du code et la page s'exécute automatiquement, ou appuyez sur Exécuter (Ctrl/Cmd + Entrée) pour l'exécuter immédiatement. Il fait ce que les gens recherchent dans un compilateur HTML ou un exécuteur de code, bien que rien ne soit compilé : votre navigateur effectue le rendu du HTML, applique le CSS et exécute le JavaScript exactement comme il le ferait pour une vraie page web.
Un éditeur HTML en temps réel avec aperçu en direct
L'aperçu se met à jour environ une demi-seconde après que vous ayez arrêté de taper. Chaque nouvelle version se charge en arrière-plan et ne remplace l'ancienne que lorsqu'elle est prête. Basculez entre les largeurs responsive, bureau, tablette et mobile pour vérifier une mise en page. Ouvrez la console pour la sortie de console.log et les erreurs JavaScript ; cliquez sur un fichier et une ligne lorsqu'un emplacement est disponible.
Tester du code HTML dans un bac à sable privé
Cet éditeur traite votre code et enregistre votre brouillon dans votre navigateur. Il ne téléverse pas votre code. L'aperçu bloque les liens, les soumissions de formulaires, les pop-ups, fetch et XMLHttpRequest. Les scripts, feuilles de style, images et polices HTTPS peuvent toujours se charger. Le code et les bibliothèques que vous exécutez peuvent envoyer des données via ces ressources, y compris le contenu de la page. Exécutez uniquement du code de confiance.
Comment exécuter un fichier HTML
- Collez votre HTML dans index.html, ou modifiez la page de démarrage. Mettez le CSS dans style.css et le JavaScript dans script.js ; ils sont ajoutés automatiquement à la page.
- Regardez l'aperçu se mettre à jour pendant que vous tapez, ou appuyez sur Exécuter (Ctrl/Cmd + Entrée).
- Ouvrez la console pour vérifier les erreurs. Cliquez sur l'emplacement d'une erreur pour accéder à cette ligne.
- Téléchargez index.html pour obtenir un fichier unique avec votre CSS et JavaScript inclus. Ouvrez-le dans n'importe quel navigateur, ou dans Phoenix Code pour continuer à développer.
Éditeur HTML en ligne ou Phoenix Code ?
Cette page est conçue pour des expérimentations rapides et l'apprentissage. Quand une page devient un projet, Phoenix Code est un éditeur de code gratuit et open-source pour le développement web. Il fonctionne dans votre navigateur sur web.phcode.dev et en tant qu'application de bureau pour Windows, Mac et Linux.
Questions sur l'éditeur HTML
Comment exécuter du code HTML en ligne ?
Collez votre code dans index.html. L'aperçu l'exécute automatiquement lorsque vous arrêtez de taper, ou vous pouvez appuyer sur Exécuter ou Ctrl/Cmd + Entrée pour l'exécuter immédiatement. Le CSS de style.css et le JavaScript de script.js sont ajoutés à la page pour vous.
Est-ce un compilateur HTML ?
Le HTML n'est pas compilé. Les gens recherchent un compilateur HTML ou un exécuteur de code quand ils veulent voir ce que fait leur code, et c'est ce que cet éditeur montre : votre navigateur effectue le rendu du HTML et exécute le JavaScript directement. Les erreurs JavaScript apparaissent dans la console ; la validité du HTML et du CSS n'est pas vérifiée.
Puis-je utiliser des frameworks CSS et des bibliothèques JavaScript ?
Oui. Liez-les depuis une URL https, par exemple un lien CDN Bootstrap ou Tailwind dans index.html. Les requêtes réseau effectuées par votre propre code, telles que fetch ou XMLHttpRequest, sont bloquées dans l'aperçu.
Est-ce gratuit et faut-il un compte ?
Il est gratuit et ne requiert aucun compte. Cet outil ne téléverse pas votre code. Le code et les ressources externes que vous exécutez peuvent contacter d'autres serveurs et envoyer des données. Un brouillon est conservé dans ce navigateur pour que vous puissiez y revenir.
Comment sauvegarder mon code ou continuer à travailler dans Phoenix Code ?
Téléchargez index.html pour enregistrer un seul fichier avec votre CSS et JavaScript inclus, ou utilisez Copier tout. Pour continuer dans Phoenix Code, sélectionnez Copier le code pour continuer, puis Ouvrir Phoenix Code une fois la copie réussie. Fermez l'écran d'accueil s'il s'affiche, ouvrez index.html dans un projet, remplacez son contenu par la page copiée, enregistrez, et ouvrez l'Aperçu en direct. Votre code n'est pas transféré automatiquement.
Quel est le meilleur éditeur HTML gratuit pour Windows, Mac ou Linux ?
Le meilleur est celui qui correspond à votre façon de travailler. Phoenix Code est un éditeur HTML gratuit et open-source pour Windows, Mac et Linux qui fonctionne également dans le navigateur. C'est le successeur d'Adobe Brackets et il intègre l'Aperçu en direct, les suggestions de code et Emmet.