关键字/标记和HTML文件中的整行代码之间的某种引用

Question

我想在一行代码中附加某种关键字/标记，并在整个HTML文件中引用该关键字，而不必每次重写整行代码。

例如，将标记TestPic1234附加到<img src="img_chania.jpg" alt="Flowers in Chania">的代码中，这样在我的HTML文件中，TestPic1234自动表示<img src="img_chania.jpg" alt="Flowers in Chania">。

这一切主要是为了避免不必要的混乱，并减少总文件大小(尤其是在使用Base64图像时(。

我在网上找过，唯一接近我想要的是id/class标签，但这仍然不是我想要的(或者可能我滥用了它们，但我对此表示怀疑(

Answer 1

将base64图像移动到CSS:

<style>
.image-a { 
width: 130px;
height: 130px;
display: inline-block;
background-repeat: no-repeat;
background-size: contain;
background-image: url('data:image/gif;base64...[your data-url image here]');
}
</style>

那么你的HTML将是：

<div class="image-a" > </div>
<div class="image-a" > </div>
<div class="image-a" > </div>

要播放的Codepen：https://codepen.io/vovchisko/pen/dyXEZdv