HTML-редактор с предпросмотром

Из трёх вкладок исходника в один документ браузера

Подсветка синтаксиса, номера строк, парные скобки, сворачивание и дополнение помогают ориентироваться в небольшом файле, но не доказывают его работу. Копирование активного файла берёт одну вкладку, полного HTML — собранный документ. Импорт принимает файлы в пределах 2 MiB. Соседним изображениям всё равно нужны доступные адреса: импорт HTML не загружает всю папку.

HTML задаёт структуру, CSS оформление, JavaScript обычное поведение в браузере. Фрагмент вроде <main><h1>Заметки</h1></main> получает оболочку документа. Полный HTML сохраняет свои head и body; CSS вкладки добавляется в head, JavaScript ближе к концу body. Уже встроенные стили и скрипты остаются в импортированном файле. Если продублировать их в отдельной вкладке, одно действие может выполняться дважды.

Редактирование, просмотр и проверка поведения — разные этапы. Напишите или отформатируйте код, изучите вид страницы, затем выполните действие и прочитайте диагностические сообщения. Запуск использует текущий черновик. Без автозапуска во время правок может показываться предыдущая версия. Автозапуск удобен для доверенных CSS-экспериментов; ручной режим лучше для незаконченного обработчика или побочного эффекта. Форматирование касается активной вкладки и улучшает читаемость, но не исправляет смысл.

Выбирайте шаблон по нужному приёму. Blank HTML5 и Semantic Article помогают со структурой документа; Responsive Landing, CSS Grid Dashboard и Flexbox Pricing показывают варианты раскладки. Interactive Card и JavaScript Counter раскрывают события. CSS Animation содержит правило уменьшения движения. Accessible Form связывает подписи и статус. Это исходные примеры, а не подтверждение качества после ваших изменений.

Не путать ширину макета с масштабом просмотра

Режим подгонки следует размеру панели; фиксированные режимы используют 390, 768 и 1280 CSS-пикселей. Это ширина области вёрстки, не эмуляция модели телефона. Масштаб меняет видимый размер внутри редактора. Он помогает рассмотреть широкую страницу, но уменьшенная картинка не доказывает, что содержимое помещается в узком viewport. Начните со 100%, сравните режимы и проверьте собственные границы медиазапросов средствами браузера.

Правило на 720 пикселях может показывать три колонки при 768 и одну при 390, не обнаруживая сбой при 721. Проверьте длинные заголовки, пустое состояние и сообщение об ошибке, а не только аккуратный шаблон. Фиксированная ширина дочернего элемента, неразрывная URL или большие внутренние отступы способны вызвать переполнение даже в адаптивной сетке. Убирайте по одному ограничению и запускайте снова.

Сравнение ширин отвечает на вопрос о раскладке. Оно не проверяет касания, экранную клавиатуру, плотность пикселей, производительность телефона или другой движок. Испытайте экспорт с клавиатурой, увеличенным текстом и реальными устройствами. Полный экран даёт место редактору, отдельная вкладка облегчает просмотр. Ни одна из этих команд не публикует страницу.

Искать причину через консоль и проверки документа

В полном документе проверьте <!doctype html>, язык, UTF-8, адаптивный viewport и содержательный title. Поставьте язык текста, не оставляйте английский шаблон автоматически. Отмечаются также скачки уровней заголовков, отсутствие типа кнопки и встроенные события. Очистка консоли удаляет старые сообщения без изменения кода; после неё проще наблюдать одно действие.

Если кнопка не работает, сначала убедитесь, что скрипты разрешены и текущий черновик запущен. Найдите первую ошибку после нового запуска. Значение null у querySelector часто означает несовпадение селектора с ID или отсутствие элемента. Выведите небольшое значение возле проблемной ветви, а не весь конфиденциальный объект. Ограниченная консоль собирает обычные сообщения, ошибки и отклонённые Promise; это не отладчик с точками останова и не полная трасса.

Проверки анализируют собранный документ: недостающие сведения, повторяющиеся ID, картинки без alt, поля без подписей, действия без имени и подозрительные ссылки. Ошибка требует изучения контекста, рекомендация может быть вопросом дизайна. Для декора допустим alt="", для содержательной картинки нужно полезное описание. Несколько H1 не становятся недопустимыми только потому, что предлагается один ясный главный заголовок.

Рекомендации W3C по подписям формы объясняют пользу видимой подписи, связанной с полем. Исчезающий при вводе placeholder не заменяет её. После исправления пройдите форму клавишей Tab и проверьте фокус и сообщения. Эти проверки не подтверждают контраст, порядок чтения, работу со скринридером или полное соответствие HTML. Дополните их валидатором и проверкой доступности конкретного сценария.

Проверьте объём загрузки, прежде чем доводить оформление. Для доверенных внешних ресурсов откройте полноценные сетевые инструменты браузера до повторной загрузки примера. Сравните загрузку без файлов в кеше с повторной загрузкой. Проверьте неудачные запросы, переданные байты, крупные изображения и библиотеки, а также запросы, запускающие загрузку зависимостей. Справочник сетевых инструментов Chrome различает объём передачи и больший размер распакованного ресурса. Небольшой HTML-файл может зависеть от нескольких мегабайт изображений или скриптов. Удалите ненужный ресурс либо уменьшите слишком большое изображение и повторите тот же опыт. Быстрый предпросмотр из кеша не доказывает хорошую работу при медленном соединении.

Проследите за появлением содержимого и его смещениями. Руководство по CSS, блокирующему отрисовку, объясняет, почему необходимая таблица стилей может задержать первое оформленное представление: размер загрузки не определяет все затраты. Исследуйте загрузку и долгие операции JavaScript средствами анализа производительности браузера; Console и Checks не заменяют профилировщик. Если заголовок смещается после появления изображения, шрифта или встроенного содержимого, используйте рекомендации по сдвигам макета. Заранее выделите нужное место с правильными значениями width/height или aspect-ratio и снова проверьте загрузку. Передавая пример, укажите зависимости и условия проверки. Такой сокращённый опыт не воспроизводит кеш, ответы будущего сервера и производительность всех устройств.

Осознанно подключать внешние ресурсы

Настройки ресурсов принимают HTTP- и HTTPS-адреса CSS и готовых браузерных скриптов, а также базовую URL. Указывайте адрес на отдельной строке. При базе https://example.org/demo/ путь images/logo.png относится к этому каталогу, а /images/logo.png начинается с корня origin. Стандарт HTML описывает такое разрешение адресов. База не является папкой загрузки и не делает локальные файлы доступными в интернете.

Если после импорта пропали шрифт или изображение, проверьте адрес прежде CSS. Он может относиться к другому каталогу, требовать входа, блокироваться сетевым переключателем или удалённым сервером. Разрешение сети допускает попытку, не гарантирует ответ. Выполнение скриптов разрешается отдельно: внешнему JavaScript нужны и ресурс, и разрешение выполнения.

Готовый браузерный файл CDN может подойти для небольшого опыта. Имя пакета npm, JSX, TypeScript, Sass или PHP здесь не превращаются в исполняемую программу. Нет установки пакетов, компиляции, базы данных или посредника для закрытого API. Для фреймворков и приложений с авторизацией нужна соответствующая среда, затем проверка под настоящими политиками будущего сайта.

Что защищает граница предпросмотра?

Правила sandbox WHATWG описывают изолированный origin iframe без разрешения same-origin. Предпросмотр его не выдаёт. Скрипты и сеть изначально выключены и разрешаются независимо; импорт также выключает автозапуск. Для статической вёрстки оставьте оба выключенными. Доверенному счётчику нужны скрипты, но не внешние запросы.

Изоляция ограничивает доступ, а не оценивает доверие. Цикл может расходовать ресурсы, скрипт нарисовать обманную форму входа, а разрешённый ресурс отправить запрос на свой сервер. Не вводите учётные данные в предпросмотр. Ограничения консоли уменьшают обычный поток сообщений, но не гарантируют защиту от зависания вкладки из-за враждебного кода.

Отдельная вкладка предпросмотра сохраняет iframe и выбранные разрешения. Скачанный полный HTML отличается: код и ресурсы находятся в нём без ограничений выполнения редактора. Прямое открытие может запустить скрипты. Изучите файл перед открытием и пересылкой, особенно если источник незнаком.

Сохранить подходящий файл для следующего шага

Проект JSON сохраняет название, отдельные вкладки, базовую URL и списки ресурсов. Полный HTML — собранный документ, не автономный архив всех удалённых изображений и библиотек. При повторном импорте весь HTML остаётся в своей вкладке, исходное разделение не восстанавливается. Храните JSON для дальнейших правок, HTML для просмотра результата.

Для диагностики удобнее неминифицированный HTML. Минификация удаляет комментарии и сжимает поддерживаемый код; сравните результат и оставьте оригинал. Черновик принадлежит локальному профилю, это не облачная копия и не история версий. Хранилище бывает запрещено или очищено. При сообщении о повреждении сохраните нужное до сброса: сознательное сохранение или сброс может заменить прежний черновик.

Поделиться помещает сжатый проект во фрагмент URL, включая код и настройки ресурсов. Это не секрет с контролем доступа и не размещённая в интернете рабочая страница. Получатель может изучить и переслать ссылку. Если проект превышает лимит ссылки, скачайте JSON. Импорт принимает HTML/HTM и поддерживаемый JSON в пределах размера, не целую папку файлов.

Почему структура документа по-прежнему важна

История появления Web от CERN связывает его с работой Тима Бернерса-Ли в 1989 году над обменом связанной информацией. Документный подход полезен и сейчас: заголовки объясняют отношения, ссылки ведут к значимым целям, формы собирают сведения с понятной целью. Красивые общие блоки ещё не делают документ понятным.

В примере для документации сначала решите, что должен узнать читатель. Для действия выбирайте настоящую кнопку, для перехода ссылку. Объясняйте столбцы таблицы, не полагайтесь на цвет. Такие решения делают небольшой пример понятнее и облегчают перенос в другой проект.

Полезная передача фиксирует исходник, последнюю проверенную ширину, браузер, разрешения и ожидаемое поведение. Работа счётчика в этом опыте отличается от готовности приложения к размещению. Быстрый тест сохраняет пользу, не заявляя доказательства серверной работы, безопасности production или всех устройств.