<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{font-family: "Microsoft YaHei",serif;}
        body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin: 0;}
        ol,ul,li{margin: 0;padding: 0;list-style: none;}
        img{border: none}
        #wrap{
            width: 750px;
        }
        #wrap span{
            display: inline-block;
            width: 65px;
            height: 35px;
            border: 1px solid blue;
            margin: 5px 2px;
            line-height: 35px;
            text-align: center;
            font-size: 14px;
        }
    </style>
</head>
<body>
<div id="wrap">
    <!--<span>1*img=img</span>-->
    <!--<br>-->
</div>
<script>
    let oWrap = document.getElementById("wrap");

    for (let i = 1;i<=9;i++) {

        //根据当前的行数，生成不同个数的span
        let html = '';
        for (let j=1; j<=i; j++){
            html += `<span>${i}*${j}=${i*j}</span>`
        }

        //九行，每行的换行符
        oWrap.innerHTML += '<br>';

        oWrap.innerHTML += html;
    }
</script>
</body>
</html>