如何尽量减少HTML代码？

-1

我一直在做一个有很多重复的东西（有点儿）的HTML页面。有没有办法使用某种模板来最小化它？下面是代码：如何尽量减少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>

来源

2017-04-05 DiNotABot

您可以考虑使用基于JS的模板引擎，或者可能使用XSLT转换的xml文档。 – CollinD

您是否使用任何HTML代码编辑器或工具来创建HTML，当您修改页面控件时，它会为您生成HTML代码。或尝试使用一些Repeater Div和Javascript遍历数据。在您的问题中添加更多信息，以便更好地帮助您。 –

不幸的是没有纯HTML的解决方案。

我会建议一个“模板引擎”写在Javascript（JS）

Here's一些流行的发动机的概述。 https://www.sitepoint.com/overview-javascript-templating-engines/

当然，你也可以使用服务器端脚本语言，如PHP，ASP等。另一个优点是数据库支持。您可以在while循环中输出数据。当然，服务器端脚本语言也有模板引擎。

来源

2017-04-05 19:14:02 summsel

如何尽量减少HTML代码？

回答

相关问题