html中相似代码怎么提高复用性

最近在学习前端的相关内容，在写一个商城页面的时候除了商品图片，链接不同外，其余的代码几乎一致（代码如下），怎么才能像Java封装方法那样提取出相同部分，简化代码，请兄弟们指教一下！

<div class="products">
    <div class="image_1">
        <a href="#" class="p_link">
            <img src="../image/bookimage/IT之火.jpg" >
        </a>
    </div>
    <div class="info_1">
        <a href="#" class="p_link">
        <font style="color: black;">IT之火：计算机技术与社会</font><br>
        </a>
        <font style="color: darkred;">惊喜价：¥85.70</font><br>
        <font style="color: gray; font-size: calc(14px);">市场价：¥
        <font style="text-decoration: line-through;">99.00</font>
        </font>
    </div>
</div>
<div class="products">
    <div class="image_1">
        <a href="#" class="p_link">
            <img src="../image/bookimage/失明症漫记.jpg" >
        </a>
    </div>
    <div class="info_1">
        <a href="#" class="p_link">
        <font style="color: black;">萨拉马戈：失明症漫记</font><br>
        </a>
        <font style="color: darkred;">惊喜价：¥59.00</font><br>
        <font style="color: gray; font-size: calc(14px);">市场价：¥
        <font style="text-decoration: line-through;">59.00</font>
        </font>
    </div>
</div>