Редактор HTML с предпросмотром в браузере
Соберите страницу и сразу посмотрите, как она выглядит: теги подсвечиваются, атрибуты подсказываются, а результат открывается в изолированной песочнице. Готовый файл скачивается на устройство.
- Подсветка тегов и атрибутов
- Автодополнение и Emmet
- Безопасный предпросмотр
- Скачивание файла
Как собрать страницу
Вставьте или откройте HTML
Вставьте разметку в поле или нажмите «Открыть файл», чтобы выбрать страницу с устройства. Пример уже загружен — его можно заменить своим текстом.
Посмотрите результат
Предпросмотр обновляется по мере ввода и показывает страницу в песочнице. Внешние картинки и скрипты остаются заблокированными, пока вы не разрешите их.
Скачайте файл
Кнопка «Скачать» сохраняет страницу как HTML-файл. Его можно открыть в браузере или загрузить на свой сайт.
Что делает предпросмотр
Код страницы отделяется от приложения: предпросмотр открывается в песочнице без доступа к рабочему столу и вашим файлам. Поэтому чужой HTML не может прочитать облачные документы или изменить окно редактора. Скрипты внутри страницы выполняются изолированно, а ошибки выводятся в консоль предпросмотра.
Стили и картинки с относительными адресами подхватываются из той же папки, если страница открыта в редакторе кода с облачной папкой. Для отдельной страницы на этой форме все внешние ресурсы блокируются — так проще проверить разметку без неожиданных запросов.
Помощь при наборе
| Что нужно | Как получить |
|---|---|
| Готовая конструкция | Наберите div.card и нажмите Tab — Emmet развернёт разметку |
| Подсказка тега | Начните вводить < и выберите тег из списка |
| Закрывающий тег | Он подставляется автоматически после > |
| Список атрибутов | Пробел внутри тега открывает подсказки |
Для чего подходит
- Письмо с вёрсткой: таблицы, инлайн-стили и картинки без внешних файлов.
- Простая страница или лендинг на одну секцию.
- Проверка чужого фрагмента разметки перед вставкой в проект.
- Учебная работа: посмотреть, как тег влияет на вид страницы.
Безопасность и приватность
Страница обрабатывается в браузере и не отправляется на сервер. Песочница не даёт ей доступ к приложению, а предупреждение появляется, если разметка пытается загрузить внешний ресурс. Скачанный файл — это ровно тот текст, который был в поле ввода.
Если нужен полный редактор с папкой, вкладками и сохранением в облако, откройте редактор кода онлайн. А для заметок и документации удобнее редактор Markdown.
Вопросы и ответы
Можно ли посмотреть готовую страницу?
Да, предпросмотр справа обновляется при вводе и показывает страницу так, как её увидит браузер. Внешние ресурсы по умолчанию заблокированы, чтобы страница не делала запросов без вашего ведома. Каждое изменение отражается сразу, поэтому вёрстку удобно проверять по ходу. Кнопку «Обновить» нажимать не нужно.
Выполняются ли скрипты в предпросмотре?
Да, но в изолированной песочнице без доступа к приложению и файлам. Скрипт не может открыть облачную папку или повлиять на окно редактора. Ошибки выполнения видны в консоли предпросмотра. Поэтому чужую разметку можно открыть и посмотреть, не рискуя своими файлами. Это та же изоляция, что и в полном редакторе.
Сохраняется ли страница на сервере?
Нет. Текст обрабатывается в этой вкладке, а кнопка «Скачать» сохраняет файл на устройство. В облако страница попадёт только если вы сами откроете полный редактор и сохраните её там. Предпросмотр собирается из текста прямо в браузере, и копия между визитами не хранится.
Подходит ли редактор для больших страниц?
Для страницы на несколько тысяч строк — да, подсветка и предпросмотр остаются отзывчивыми. Очень большие файлы лучше открывать в полном редакторе, где есть поиск, сворачивание и режим чтения. Там же видно предупреждение, если файл слишком велик для подсветки в реальном времени.
Есть ли автодополнение тегов?
Да. Редактор подсказывает теги и атрибуты, автоматически закрывает тег и поддерживает Emmet: сокращение вроде ul>li*3 разворачивается в готовый список. Подсказки появляются при наборе, закрывающий тег вставляется сам, а атрибуты предлагаются списком. Это ускоряет набор и снижает число опечаток. Emmet понимает вложенность и повторение.
Можно ли открыть страницу с телефона?
Да, форма работает в мобильном браузере: поле ввода и предпросмотр располагаются друг под другом. Файл можно выбрать из загрузок или облака, а результат скачать обратно. Панель инструментов остаётся под рукой, а выбор файла работает с памятью телефона и облачными дисками.
Другие инструменты
Редактор HTML с предпросмотром в браузере
Страница HTML с подсветкой, подсказками и предпросмотром в песочнице.
Открыть редактор