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

Question

最近在学习前端的相关内容，在写一个商城页面的时候除了商品图片，链接不同外，其余的代码几乎一致（代码如下），怎么才能像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>

Answer 1

可以用vue把相似代码定义成组件
你可以学习一下vue

组件基础 — Vue.js Vue.js - The Progressive JavaScript Framework https://cn.vuejs.org/v2/guide/components.html

vue组件详解（一）——组件与复用 - 柴小智 - 博客园 一、什么是组件 组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。 二、组件用法 组件需要注册后才可以使用，注册有全局注册和局部注册两种 https://www.cnblogs.com/chaixiaozhi/p/8744209.html