Как да форматирам разхвърлян HTML с отстъпи?

Поставете вашия HTML с избрано Разкрасяване, след което задайте Отстъп на 2 интервала, 4 интервала или Табулации. Изходът се обновява, докато пишете, и можете да го копирате или изтеглите като .html файл. Зареди пример показва образец.

Може ли да пренася дълги редове или да форматира вграден CSS и JavaScript?

Да. Пренасяне предлага Без пренасяне, 80 колони или 120 колони, а опцията Форматирай style и script таговете форматира също CSS и JavaScript в тези блокове. Съдържанието в pre и textarea се оставя точно както е написано.

Как да минифицирам HTML за продукция?

Изберете Минифициране. Интервалите между таговете се свиват и коментарите се премахват, освен ако не отметнете Запази коментарите. Допълнителните квадратчета са Премахни незадължителните кавички, Съкрати булевите атрибути и минифициране на вграден style, script и style атрибути.

Ще развали ли минифицирането моите pre блокове или скриптове?

Съдържанието на pre, script, style и textarea се запазва по време на свиването на интервалите и се оставя интервал между съседни вградени елементи, за да не се слеят думите. Допълнителното вградено минифициране се прилага само ако го отметнете.

Изпраща ли се моят HTML до сървър?

Не. Вграден в страницата токенизатор обработва маркирането във вашия браузър, така че частни шаблони и HTML за имейли остават на вашето устройство. Не се зарежда външна библиотека за форматиране.

Наистина ли е безплатно?

Да. Всеки инструмент е безплатен, без акаунт и кредитна карта. Работата се извършва на вашето устройство, а не на наши сървъри, което позволява да бъде безплатна.

Работи ли на мобилни устройства?

Да. Работи в съвременните мобилни браузъри на iOS и Android, без да инсталирате нищо.

🌐

Разкрасяване и минификация на HTML — безплатно

Форматирайте или минифицирайте HTML с правилно отстъпване на вложените елементи. Запазва съдържанието вътре в <pre>, <script>, <style> блокове.

Работи в браузъраБез регистрация, без изскачащи прозорциНе се изисква входБезплатно завинаги

Работи офлайн след зареждане

Отстъп:

Пренасяне:

Форматирай <style> и <script>

Пуснете файл тук или щракнете, за да изберете

HTML, HTM · обработва се на вашето устройство

или натиснете Ctrl+V, за да поставите от клипборда

Преглед на файлове

HTML вход

Форматиран HTML

Изходът ще се появи тук…

Често срещани употреби

Отстранявление на грешки Server-Rendered HTMLПреглед сурови HTML изход от вашия сървър (PHP, Rails, Django, Node) в четив с отстъп формат.
Форматирайте шаблони Email HTMLEmail HTML е подробен (таблици, вградени стилове). Форматирайте, за да го направите редактируем и поддържан.
Форматирайте статични HTML странициРъчно редактирани статични HTML файлове се възползват от последователно форматиране за съвместно редактиране.
Почистете HTML експортиран от CMSWordPress, Wix, Squarespace експорт HTML с много артефакти. Форматирайте, за да го направите редактируем.
Минифицирайте HTML за производствоНамалете размера на HTML файла за по-бързо зареждане на страница чрез отстраняване на празно място и ненужни символи.

Как работи

Този инструмент форматира или компресира HTML чрез ръчно написан токенизатор, съобразен с тагове, вграден директно в страницата — без библиотека на трета страна за форматиране, без обръщение към сървъра. Всеки символ от вашето маркиране се обработва локално в момента, в който го въведете или поставите.

1
Токенизаторът сканира маркирането
Персонализиран скенер символ по символ обхожда HTML низа, идентифицирайки коментари, декларации DOCTYPE, отварящи тагове, затварящи тагове, самозатварящи се празни елементи (br, img, input и т.н.) и възли със суров текст. Специален помощник следи стойности на атрибути в кавички, така че символи като > вътре в атрибут (напр. value="a>b") никога не карат тага да се разцепи преждевременно.
2
Дълбочината на отстъпа се проследява за всеки таг
За режим на разкрасяване токенизаторът поддържа брояч на дълбочината. Отварящите тагове на ниво блок увеличават дълбочината; затварящите я намаляват преди да бъдат записани. Вградените елементи (span, a, strong, em и т.н.) се запазват на същия ред като съдържанието им, вместо да се изтласкват на собствен отстъпен ред. Тагове като pre, script, style и textarea имат вътрешното си съдържание извеждано буквално, за да се избегне разваляне на чувствителни към празни знаци или изпълним код.
3
Минимизаторът свива празните знаци безопасно
В режим за минимизиране съдържанието на блоковете pre, script, style и textarea се заменя с номерирани маркери, преди да се случи каквото и да е свиване на празни знаци. HTML коментарите се премахват, а поредиците празни знаци между тагове се премахват — с изключение между съседни вградени елементи, където се запазва единичен интервал, така че думите да не се слеят. Маркерите-заместители след това се възстановяват до оригиналното си съдържание.
4
Изходът се показва и по избор се запазва
Форматираният или минимизиран резултат се появява на живо в изходния панел заедно с процент на промяна на размера. Можете да го копирате в клипборда или да го изтеглите като .html файл, без изобщо да напускате браузъра.