HTML 코드를 최소화하는 방법은 무엇입니까?

Question

나는 많은 반복적 인 것들이있는 HTML 페이지를 해왔다. 어떤 종류의 템플릿으로 최소화하는 방법이 있습니까?

<div class="float-left-area"> 
      <div class="inner-left"> 
     <label for="picture1"> 
       <div id="pic1" class="sidebar-item"> 
        <img src="eslcc_logo2.png" alt="eslcc logo" style="float:left;" class="size"> 
        <p align="right">1</p> 
       </div> 
     </label> 
     <input id="picture1" type="checkbox" name="picture" data-pic="pic1" value="1" onclick="selectPicture(this)"> 
    <hr />  
     <label for="picture2"> 
       <div id="pic2" class="sidebar-item"> 
        <img src="imac_2.jpg" style="float:left;" class="size" alt="iMac"> 
        <p align="right">5</p> 
       </div> 
     </label> 
     <input id="picture2" type="checkbox" name="picture" data-pic="pic2" value="5" onclick="selectPicture(this)"> 
    <hr /> 
     <label for="picture3"> 
       <div id="pic3" class="sidebar-item"> 
        <img src="coding_img.png" style="float:left;" class="size" alt="Coding Image"> 
        <p align="right">10</p> 
       </div> 
     </label> 
     <input id="picture3" type="checkbox" name="picture" data-pic="pic3" value="10" onclick="selectPicture(this)"> 
    <hr /> 
     <label for="picture4"> 
      <div id="pic4" class="sidebar-item"> 
        <img src="ariane_6.jpg" style="float:left;" class="size" alt="Ariane 6"> 
        <p align="right">20</p> 
       </div> 
     </label> 
     <input id="picture4" type="checkbox" name="picture" data-pic="pic4" value="20" onclick="selectPicture(this)"> 
    <hr /> 
</div> 
</div> 

Answer 1

는 불행하게도 순수 HTML 솔루션이 없습니다 : 다음은 코드입니다.

나는 자바 스크립트 (JS)로 작성된 "템플릿 엔진"

Here's 일부 인기있는 엔진에 대한 개요를 제안합니다. https://www.sitepoint.com/overview-javascript-templating-engines/

물론, 당신은 또한 PHP, ASP 등과 같은 서버 측 스크립트 언어로 그것을 할 수 또 다른 장점은 데이터베이스 지원이다. while 루프에서 데이터를 출력 할 수 있습니다. 물론 서버 측 스크립팅 언어에도 템플릿 엔진이 있습니다.