怎么用用html 设计出这个，！我第一次上课的，我自己怎么做都不满意

可以用浮动，或者 flex布局

浮动解决


<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 100%;
            height: 500px;
            /* 清除浮动 */
            clear: both; 
        }
        .left{
            width: 40%;
            height: 400px;
            float: left;
        }
        .left img{
            width: 100%;
            height: 100%;
        }
        .right{
            width: 60%;
            height: 400px;
            float: right;
            margin: 12px 0;
        }
        .titleBox{
            padding: 12px;
        }
        .titleBox >h2{
           text-align: center;
        }
       
        .red{
            color: red;
            /* display: inline-block; */
        }
        hr{
            margin:12px 0;
        }
    </style>
</head>
<body>
     <div class="box">
       <div class="left">
           <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fci.xiaohongshu.com%2Fcc459c9c-644e-2e68-0347-9b5a7058fa14%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fci.xiaohongshu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648899565&t=3d28c28f0dba401f9dbf1201fa94cdf2" alt="">
       </div>
       <div class="right">
         <div class="titleBox">
             <h2>44--------------------<span class="red">双十一购物节</span></h2>
             <hr/>
             <p>44444444444444444444444</p>
             <p>4444444444444444444444477777777</p>
             <p>44444444444444444444444777777777777777777777777</p>
         </div>
       </div>
     </div>
</body>

<script>
  
</script>
</html>

flex布局

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 100%;
            height: 500px;
            /* flex布局 */
            display: flex;
        }
        .left{
            width: 40%;
            height: 400px;
            
        }
        .left img{
            width: 100%;
            height: 100%;
        }
        .right{
            width: 60%;
            height: 400px;
           
            margin: 12px 0;
        }
        .titleBox{
            padding: 12px;
        }
        .titleBox >h2{
           text-align: center;
        }
       
        .red{
            color: red;
            /* display: inline-block; */
        }
        hr{
            margin:12px 0;
        }
    </style>
</head>
<body>
     <div class="box">
       <div class="left">
           <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fci.xiaohongshu.com%2Fcc459c9c-644e-2e68-0347-9b5a7058fa14%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fci.xiaohongshu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648899565&t=3d28c28f0dba401f9dbf1201fa94cdf2" alt="">
       </div>
       <div class="right">
         <div class="titleBox">
             <h2>44--------------------<span class="red">双十一购物节</span></h2>
             <hr/>
             <p>44444444444444444444444</p>
             <p>4444444444444444444444477777777</p>
             <p>44444444444444444444444777777777777777777777777</p>
         </div>
       </div>
     </div>
</body>

<script>
  
</script>
</html>

根据题主仅用HTML设置样式，可以采用table元素来完成，该题考查的是对于table的tr和td元素的colspan和rowspan掌握的情况

    <table border="1px" width="500px" height="100px">
      <tr>
        <td rowspan="2">你的图片</td>
        <td align="center">
          <font size="5"><strong>你的标题</strong></font>
        </td>
      </tr>
      <tr>
        <td>
          <p>内容1</p>
          <p>内容2</p>
          <p>内容3</p>
        </td>
      </tr>
    </table>