HTML-просмотрщик
Откройте HTML-файл онлайн или вставьте код — страница отрисуется рядом с редактором. Понимает windows-1251 и KOI8-R из meta charset, сохраняет в .html.
Чтобы открыть HTML-файл онлайн, нажмите «Открыть файл» или перетащите .html прямо на редактор: исходный код появится слева, отрисованная страница — справа. Старые русскоязычные страницы в windows-1251 или KOI8-R читаются по объявленной в них кодировке (meta charset), поэтому вместо кракозябр вы видите нормальный кириллический текст. Разметку можно править с подсветкой синтаксиса, а затем скачать результат как .html или скопировать. Файл читается локально и показывается в изолированном iframe — на сервер ничего не уходит.
HTML-просмотрщик
1485
Редактор
Код
Предпросмотр
Живой предпросмотр
Вам также может понадобиться
Как пользоваться HTML-просмотрщиком
- 1
Откройте файл или вставьте код
Нажмите «Открыть файл» и выберите документ .html, .htm или .xhtml, перетащите его на поле редактора или просто вставьте исходный код из буфера обмена.
- 2
Проверьте кодировку
Сначала учитывается BOM, затем объявление <meta charset> или http-equiv в первых 1024 байтах: windows-1251, KOI8-R, Shift_JIS, GBK и другие. Без объявления файл читается как UTF-8. Имя файла и найденная кодировка видны в шапке редактора.
- 3
Посмотрите результат справа
Панель предпросмотра рендерит разметку примерно через полсекунды после остановки ввода — точно так же, как это сделал бы браузер.
- 4
Правьте и сохраняйте
Меняйте код и сразу смотрите, что получилось, затем «Скачать .html» сохранит страницу под именем исходного файла, «Копировать» заберёт разметку, а режим «На весь экран» даст больше места (выход — Esc).
Источники
- MDN — HTML
Справочник и руководства по всем HTML-элементам и атрибутам, на русском языке.
- WHATWG — HTML Standard
Живой стандарт, определяющий синтаксис HTML и правила рендеринга в браузерах (на английском).
- MDN — элемент iframe и атрибут sandbox
Описание ограничений sandbox, которые применяются к панели предпросмотра (страница доступна только на английском).
Связанные инструменты
HTML Minifier
Удалить пробелы и комментарии, чтобы уменьшить размер HTML.
HTML в JSON
Преобразовать HTML-разметку в структурированный JSON.
Просмотрщик Markdown
Смотреть Markdown, отрендеренный как HTML, в реальном времени.
CSS Minifier
Сжать таблицы стилей, которые вы вставляете в страницу.
JS Minifier
Сжать скрипты, которые вы вставляете в страницу.
Часто задаваемые вопросы
- Как открыть HTML-файл онлайн?
- Нажмите «Открыть файл» и выберите .html на диске или перетащите его с рабочего стола на редактор. Исходный код загрузится в левую панель, а справа сразу появится отрисованная страница; сам файл при этом не покидает компьютер.
- Почему вместо русского текста кракозябры?
- Обычно файл сохранён в windows-1251 или KOI8-R, а читается как UTF-8. Просмотрщик берёт кодировку из <meta charset> или из http-equiv, если они стоят в начале файла (первые 1024 байта). Если такой строки нет, добавьте в <head>, например, <meta charset="windows-1251"> и откройте файл заново — кириллица отобразится правильно.
- Чем открыть файл HTML?
- Двойной щелчок открывает готовую страницу в браузере, а «Блокнот» или редактор кода показывает исходный код. Этот просмотрщик даёт и то и другое одновременно: код слева, отрендеренная страница справа.
- Поддерживаются ли .htm и .mhtml?
- Файл .htm — тот же HTML, он открывается кнопкой «Открыть файл» так же, как .html; расширение .xhtml тоже принимается. Формат .mhtml — архив страницы вместе с ресурсами, здесь он не отрисуется: сначала пересохраните страницу как обычный HTML.
- Чем это отличается от просмотра исходного кода страницы (Ctrl+U)?
- Ctrl+U показывает код чужого сайта только для чтения. Здесь можно открыть собственный файл или вставить разметку, править её и тут же видеть, как меняется отрисованная страница, — то есть экспериментировать, а не только читать.
- Как открыть HTML-файл на телефоне (iPhone или Android)?
- Да. В мобильных Safari и Chrome кнопка «Открыть файл» вызывает системный выбор файлов, так что документ из «Файлов», Google Диска или «Загрузок» открывается напрямую. На телефоне редактор и предпросмотр располагаются друг под другом.
- Можно ли сохранить или скачать отредактированную страницу?
- Да. «Скачать .html» сохраняет текущее содержимое редактора в UTF-8; если вы открывали файл, сохраняется его имя, иначе получится index.html. Если исходник объявлял другую кодировку, в копии meta charset заменяется на utf-8, чтобы текст не превратился в мешанину символов.
- Можно ли перевести HTML в PDF?
- Напрямую нет — инструмент только отображает и правит HTML. Скачайте страницу кнопкой «Скачать .html», откройте её в браузере и выберите «Печать» → «Сохранить как PDF».
- Загружаются ли внешние CSS, JavaScript и картинки, и насколько это безопасно?
- Абсолютные https-ссылки (например, на CDN) работают, а относительные пути вида ./style.css — нет, потому что у предпросмотра нет своей папки. Кадр изолирован через sandbox: скрипты разрешены, но доступа к тому же origin нет, поэтому cookie, хранилище и диалоги alert заблокированы.