Czym jest Przeglądarka HTML?

Chcesz zobaczyć, jak wygląda Twój HTML, bez uruchamiania serwera? Dokładnie to robi to narzędzie. Przeglądarka HTML przyjmuje Twój HTML (HyperText Markup Language) i renderuje go na żywo w panelu podglądu obok kodu.

Niezależnie od tego, czy tworzysz prototyp strony docelowej, debugujesz szablon e-mail, czy po prostu sprawdzasz, czy Twój kod jest poprawny, narzędzie to zapewnia natychmiastową wizualną informację zwrotną. Nie trzeba zapisywać plików ani uruchamiać lokalnego serwera.

Wszystko działa w Twojej przeglądarce. Twój HTML nigdy nie trafia na nasze serwery. Jest szybkie, bezpłatne i prywatne.

Jak korzystać z Przeglądarki HTML

Wykonaj te kroki, aby przeglądać i pracować z HTML.

Wklej HTML lub załaduj przykład

Wklej HTML do lewego edytora. Może to być pełna strona z tagami <html>, <head> i <body>, lub tylko fragment. Kliknij Przykład, aby załadować przykładowy HTML.

<div style="font-family: Arial, sans-serif; padding: 20px;">
  <h1 style="color: #333;">Witaj Świecie</h1>
  <p>To jest <strong>przykładowa strona HTML</strong>.</p>
  <ul>
    <li>Element 1</li>
    <li>Element 2</li>
    <li>Element 3</li>
  </ul>
</div>

Podgląd jest automatycznie aktualizowany podczas pisania.

Zobacz podgląd na żywo

Prawy panel renderuje Twój HTML natychmiast. Zobaczysz dokładnie, jak przeglądarka interpretuje Twój kod — style, układ, obrazy i wszystko inne. Podgląd jest izolowany w iframe.

Dostosuj i powtarzaj

Edytuj HTML w lewym panelu i obserwuj, jak podgląd aktualizuje się w czasie rzeczywistym. Przeciągnij separator, aby dostosować rozmiary paneli.

Udostępnij swoją pracę

Kliknij Udostępnij, aby wygenerować udostępnialny link do swojego HTML.

Kiedy tego używasz

Prototypowanie fragmentów UI

Chcesz szybko przetestować styl przycisku, układ karty lub pasek nawigacji? Wklej HTML tutaj i od razu zobaczysz, jak jest renderowany.

Debugowanie szablonów e-mail

HTML dla e-maili jest wyjątkowo problematyczny — style inline, układy tabelaryczne, dziwne renderowanie. Wklej swój szablon tutaj, aby zobaczyć, jak wygląda przed wysłaniem.

Nauka HTML

Jeśli uczysz się HTML, to narzędzie jest idealne do eksperymentowania. Napisz tagi, zobacz co robią. Wypróbuj różne atrybuty, sprawdź wynik natychmiast.

Przegląd fragmentów kodu

Ktoś wysłał Ci fragment HTML przez Slack lub w komentarzu do PR? Wklej go tutaj, aby zobaczyć, jak naprawdę wygląda.

Często zadawane pytania

Czy mój HTML jest gdzieś przechowywany?

Nie. Wszystko działa całkowicie w Twojej przeglądarce przy użyciu JavaScript. Twój HTML nigdy nie opuszcza Twojego komputera, chyba że wyraźnie klikniesz "Udostępnij".

Czy obsługuje CSS i JavaScript?

Tak. Style inline i tagi <style> są renderowane poprawnie. JavaScript w tagach <script> jest wykonywany w izolowanym iframe podglądu.

Czy podgląd jest bezpieczny?

Podgląd jest renderowany w izolowanym iframe, który oddziela go od głównej strony.

Czy mogę używać pełnych dokumentów HTML?

Oczywiście. Możesz wkleić pełny dokument HTML z <!DOCTYPE html>, <html>, <head> i <body>, lub tylko fragment jak <div>.

Jak działa podgląd na żywo?

Podczas pisania w edytorze, narzędzie aktualizuje iframe podglądu z zawartością HTML po krótkim opóźnieniu 300 ms.

Czy mogę zmieniać rozmiar paneli edytora i podglądu?

Tak. Przeciągnij pasek separatora między dwoma panelami, aby dostosować ich rozmiary. Na urządzeniach mobilnych panele układają się pionowo.

Inne narzędzia HTML i znaczników

Ta przeglądarka jest świetna do podglądu HTML, ale czasami potrzebujesz innych rzeczy: