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解决方案。

我建议用Javascript（JS）

编写一个“模板引擎”

以下是一些流行的引擎的概述。 https://www.sitepoint.com/overview-javascript-templating-engines/

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

如何最小化HTML代码？

1 个答案: