HTML форматиране и минимизиране
Подредете разхвърлян HTML с чисти отстъпи или го минимизирайте безопасно във вашия браузър. Вграденият CSS и JavaScript също се форматират. Нищо не се качва.
Как да форматирате HTML
- Поставете HTML или щракнете Отвори файл, за да заредите файл
.htmlили.htm(до 10 МБ). - Изберете Отстъп (2 интервала, 4 интервала или табулация) и дали да Пренасяй редовете при 80 или 120 символа.
- Отметнете Отстъп за и , ако искате те да са с отстъп вътре в
<html>, и Премахни коментарите, за да махнете коментарите<!-- … -->. - Щракнете Форматирай за четим код или Минимизирай за най-малката безопасна версия.
- Копирайте или изтеглете резултата. Редът със състоянието показва размера преди и след.
Резултатът се показва като обикновен текст в полето за изход. HTML кодът ви никога не се изобразява и не се изпълнява на тази страница, така че скриптовете в поставения код не могат да направят нищо.
Форматиране: четим HTML с последователни отстъпи
Форматирай използва js-beautify – форматиращия механизъм в много редактори на код:
- блоковите елементи отиват на отделни редове с отстъп според дълбочината на влагане, а вградените елементи като
<a>,<b>или<span>остават в текста; - съдържанието на
<script>и<style>се форматира като JavaScript и CSS; <pre>и<textarea>се оставят точно както са написани, тъй като интервалите им се виждат;- последователните празни редове се свеждат до един;
- със зададена ширина на пренасяне дългите редове с текст и дългите списъци с атрибути се пренасят.
Форматирането не поправя повреден код: незатворен <div> си остава незатворен, а отстъпът след него показва къде е проблемът.
Минимизиране: по-малък HTML без промяна на страницата
Минимизирай използва нарочно предпазлив подход:
- поредиците от интервали, табулации и нови редове в текста стават един интервал, точно както ги показва браузърът;
- интервалите до блокови елементи и елементи на head (
<div>,<p>,<li>,<td>,<meta>,<br>…) се премахват, защото никога не се изобразяват; - един интервал между вградени елементи се запазва, така че
<b>голям</b> <i>свят</i>не се превръща в „голямсвят“; - коментарите се премахват, когато е отметнато Премахни коментарите, с изключение на условните коментари (
<!--[if IE]>) и коментарите, започващи с<!--!; - съдържанието на
<script>,<style>,<pre>и<textarea>никога не се пипа, а стойностите на атрибутите се запазват точно, включително кавичките.
Не премахва незадължителните затварящи тагове, не пренаписва атрибути и не компресира вградения JavaScript и CSS: тези оптимизации спестяват малко повече, но могат да счупят страници. За повечето страници HTTP компресията (gzip или Brotli) спестява далеч повече от всеки минификатор, така че минимизирането е най-полезно за HTML, вграден в имейли, шаблони или низове в JavaScript.
Често задавани въпроси
Качва ли се кодът ми?
Не. И форматирането, и минимизирането се изпълняват във вашия браузър; кодът ви никога не напуска компютъра ви.
Защо страницата ми изглеждаше различно след минимизиране?
При нормални случаи не би трябвало. Единственото изключение е CSS, който променя показването на интервалите, например white-space: pre върху елемент, различен от <pre> или <textarea>, или елемент, чийто display е променен от block на inline: свитите там интервали стават видими.
Проверява ли форматирането валидността на HTML?
Не. Форматира това, което му подадете. За да проверите дали кодът е валиден, използвайте валидатор като W3C Nu HTML Checker.
Мога ли да форматирам шаблони на Vue, Svelte или Django?
Предимно. Тагове на шаблони в текст и атрибути се запазват, но сложен синтаксис на шаблони може да обърка отстъпите, затова проверете резултата.
Какво променя „Отстъп за <head> и <body>“?
По подразбиране <head> и <body> започват на същото ниво като <html> – често срещана конвенция, която спестява едно ниво на отстъп. Отметнете опцията, за да ги отстъпите с едно ниво навътре.
Сродни инструменти
- XML форматиране Форматирайте, минимизирайте и валидирайте XML във вашия браузър. Грешките се показват с ред и колона. Файловете ви никога не се качват.
- JSON форматиране и валидиране Безплатно форматиране и валидиране на JSON, което подрежда, минимизира и проверява JSON във вашия браузър, със синтактични грешки по ред и колона.
- Генератор на мета тагове Безплатен генератор на мета тагове за заглавие, мета описание, каноничен URL, robots и viewport, с проверка на дължината и правилно екраниран HTML.