무료 온라인 HTML 미화/포매터

Input data
bfotool loadding
Output data
bfotool loadding

HTML 포맷터

지저분하거나 축소되거나 난독화된 HTML을 위의 필드에 입력하여 정리하고 예쁘게 만드십시오. 위의 편집기에는 유용한 줄 번호와 구문 강조 표시도 포함되어 있습니다. 개인의 서식 취향에 맞게 꾸미기를 조정할 수 있는 많은 옵션이 있습니다.

HTML 뷰어, HTML 포맷터, HTML 포맷터를 언제 사용합니까?

HTML을 작성할 때 들여쓰기, 간격 및 기타 서식이 약간 혼란스러울 수 있습니다. 또한 여러 개발자가 서식 지정 기술이 다른 단일 프로젝트에서 작업하는 것이 일반적입니다. 이 도구는 파일 형식을 일관되게 만드는 데 유용합니다. HTML이 축소되거나 난독화되는 것도 일반적입니다. 이 도구를 사용하여 해당 코드를 보기 좋게 만들고 읽기 쉽게 만들 수 있습니다.

예제 HTML 포맷터

아래의 축소된 HTML:

<nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">WebSiteName</a> </div><ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li><li><a href="#">Page 1</a></li><li><a href="#">Page 2</a></li><li><a href="#">Page 3</a></li></ul> </div></nav>

이렇게 아름답게 됩니다.

<nav class="navbar navbar-default">
     <div class="container-fluid">
         <div class="navbar-header"> <a class="navbar-brand" href="#">WebSiteName</a> 
         </div>
         <ul class="nav navbar-nav">
             <li class="active"><a href="#">Home</a>
             </li>
             <li><a href="#">Page 1</a>
             </li>
             <li><a href="#">Page 2</a>
             </li>
             <li><a href="#">Page 3</a>
             </li>
         </ul>
     </div>
 </nav>