Edytor HTML Online

Free

Edytuj HTML, CSS i JavaScript w trzech panelach z podglądem na żywo w piaskownicy, który aktualizuje się podczas pisania, plus pobieranie jednym kliknięciem jako samodzielny plik HTML.

Podgląd na żywo

Ostatnia Aktywność

Widoczne dla wszystkich. Ostatnie 20 użyć wśród wszystkich odwiedzających, najpierw najnowsze.

Выполнен живой предпросмотр (132 символов HTML, 77 символов CSS, 102 символов JS)

18 minut temu

Eine Live-Vorschau ausgeführt (132 HTML-Zeichen, 77 CSS-Zeichen, 102 JS-Zeichen)

31 minut temu

Ran a live preview (27 HTML chars, 42 CSS chars, 151 JS chars)

4 godziny temu

Ran a live preview (27 HTML chars, 42 CSS chars, 102 JS chars)

4 godziny temu

Ran a live preview (27 HTML chars, 77 CSS chars, 102 JS chars)

4 godziny temu

Ran a live preview (132 HTML chars, 77 CSS chars, 102 JS chars)

4 godziny temu

Komentarze (0)

Uznałeś to narzędzie za przydatne? Zostaw komentarz, podziel się wskazówką, lub powiedz nam, jak możemy je ulepszyć.

Jeszcze brak komentarzy. Bądź pierwszym, który podzieli się swoimi przemyśleniami!

Co robi to narzędzie

Pisz HTML, CSS i JavaScript w trzech oddzielnych panelach i zobacz, jak są łączone w jeden podgląd na żywo, który aktualizuje się podczas pisania, z pobraniem wyniku jednym kliknięciem jako samodzielny plik HTML.

Jak To Działa

Narzędzie składa kompletny dokument HTML z Twoich trzech paneli (CSS owinięty w tag style, Twój HTML w body, Twój JavaScript w tagu script na końcu) i wczytuje ten dokument do odizolowanego iframe za pomocą atrybutu srcdoc. Piaskownica umożliwia wykonywanie skryptów, ale blokuje podglądowi dostęp do DOM, plików cookie czy pamięci tej strony, dzięki czemu Twój kod działa w realistycznym, ale odizolowanym środowisku przeglądarki.

Problemy, które rozwiązuje

Szybkie testowanie fragmentu HTML, reguły CSS lub małego skryptu bez tworzenia lokalnych plików.
Prototypowanie małej strony lub pomysłu na interfejs i eksportowanie go jako działający plik HTML.
Demonstrowanie lub udostępnianie samodzielnego przykładu kodu, który ktoś inny może wkleić i natychmiast uruchomić.

Często zadawane pytania

›Czy bezpiecznie jest uruchamiać niezaufany JavaScript w podglądzie?

Podgląd działa w odizolowanym (sandbox) iframe, w którym skrypty są dozwolone, ale dostęp do tego samego źródła jest wyłączony, więc kod w podglądzie nie może odczytać ani zmodyfikować tej strony, Twoich plików cookie ani lokalnej pamięci. Mimo to, w ramach tej piaskownicy, może swobodnie wykonywać JavaScript, otwierać okna alertów lub wysyłać żądania sieciowe, tak jak każda inna strona internetowa, więc wciąż traktuj każdy kod wklejony z niezaufanego źródła tak, jakbyś uruchamiał go w nowej karcie przeglądarki.

›Jak łączone są panele HTML, CSS i JavaScript?

Narzędzie umieszcza Twój CSS w tagu <style> w sekcji head dokumentu, umieszcza Twój HTML bezpośrednio w body, a Twój JavaScript dodaje w tagu <script> na końcu body, tak jak w typowym jednostronicowym dokumencie HTML, a następnie wczytuje ten połączony dokument do podglądu.

›Czy mogę pobrać to, co stworzyłem, jako prawdziwy plik?

Tak, przycisk "Pobierz jako .html" zapisuje dokładnie ten sam połączony dokument widoczny w podglądzie jako jeden plik index.html, gotowy do otwarcia bezpośrednio w przeglądarce lub przesłania na serwer WWW.

›Czy podgląd aktualizuje się automatycznie, gdy piszę?

Tak, podgląd odświeża się automatycznie chwilę po tym, jak przestaniesz pisać w jednym z trzech paneli, dzięki czemu widzisz efekt swoich zmian bez klikania oddzielnego przycisku uruchamiania.

›Czemu wynik console.log nigdzie nie pojawia się na stronie?

Podgląd jest prawdziwym, odizolowanym dokumentem przeglądarki, więc wynik console.log trafia do własnej konsoli tego dokumentu, a nie do tej strony. Otwórz narzędzia developerskie przeglądarki i wybierz kontekst iframe podglądu, aby zobaczyć wynik konsoli, lub użyj alert() do szybkiej widocznej kontroli.

Konwertuj tekst między Unicode i Punycode (RFC 3492), kodowaniem tylko ASCII używanym dla umiędzynarodowionych nazw domen, z pełnym trybem domeny (świadomym kropek, automatycznym prefiksem xn--) oraz trybem prostej etykiety, konwertując wiele wierszy jednocześnie.