如何避免HTML中的重复代码？

假设我有一个类，它显示了我想在我的网站上出售的可用物品。当我向我的站点添加新产品时，我应该如何避免重复编写相同的代码。每次我添加一个新产品，只有它的图像和它指向的页面会改变。有没有办法有效地管理这一点？提前谢谢

<div class="sale">
        <div class="img-container"><a href="#"><img src="1.png">Product1</a></div>
        <div class="img-container"><a href="#"><img src="2.png">Product2</a></div>
        <div class="img-container"><a href="#"><img src="3.png">Product3</a></div>
        <div class="img-container"><a href="#"><img src="4.png">Product4</a></div>
</div>

---

基本上，首先你必须学习任何服务器端技术（如Asp、NodeJS.PHP等）和数据库（如mysql、MS Sql server），然后，我相信你会得到答案。更重要的是还要学习Javascript或其库Jquery之一，最好是AngularJS。

---

要创建动态html，您必须在Javascript上使用命令，至少有很多选项可以实现DHTML。 使用JavaScript的一个基本示例：

var详细信息=[{
‘img’：”http://simpleicon.com/wp-content/uploads/light-bulb-6.svg",
“lbl”：“产品1”
}, {
‘img’：”http://images.clipartpanda.com/light-bulb-vector-png-9czEXKbbi.svg",
“lbl”：“产品2”
}, {
‘img’：”http://images.clipartpanda.com/light-bulb-vector-png-light-bulb-7.svg",
“lbl”：“产品3”
}];
var html=“”；
对于（变量i=0，l=details.length；l>i；i++）{
html+=“”；
html+=“”；
html+=“”；
}
document.getElementsByClassName（'sale'）[0].innerHTML=html
.sale{
边框：1倍脊灰；
}
.img集装箱{
边框：1px灰色虚线；
保证金：3倍；
显示：内联块；
填充：3倍；
}
.img容器img{
宽度：100px；
}
几乎在所有后端技术中，如Node.js、Django，都有一个称为
模板。若你们知道或学习了模板，那个么你们可以避免重复你们的html代码。你们可以在其他html文件中重复使用你们的html代码

对于Node.js

对于Django
来说，有效管理这一点的方法是使用编程语言，而不仅仅是html。请您解释一下您指的是哪种语言？他指的是只使用html。这就是我对它的理解。您可以使用客户机/服务器脚本来生成DHTML。你喜欢什么取决于你自己。@Andrew复制和粘贴代码可能是你最不想做的事情。无论如何，看起来您需要一个服务器来处理产品信息（除非它是本地的）。然后使用PHP从服务器生成HTML。尽管如此，这个问题太宽泛，无法给出准确的答案。